This web component creates a highly configurable slider element.
Usage
<wc-slider></wc-slider>
<script type="module" src="wc-slider.js"></script>
Configuration
The slider's appearance and behaviour can be changed using attributes.
Adding a width
number variable will change the dimension of the chart from the default of 100%.
Adding a min
number variable will change the start number of the slider from the default of 1.
Adding a max
number variable will change the end number of the slider from the default of 7.
Adding a from
hex colour will change the start colour of the slider from the default of #afd6f3
.
Adding a to
hex colour will change the end colour of the slider from the default of #2b91de
.
(there will be a stepped gradient of shades between from
and to
between min
and max
)
Adding a deselected-from
hex colour will change the deselected start colour of the slider from the default of #d0d5d5
(In reality, this will never be shown).
Adding a deselected-to
hex colour will change the deselected end colour of the slider from the default of #7f8c8d
.
(there will be a stepped gradient of deselected shades between deselected-from
and deselected-to
between min
and max
)
Adding a constrain-min
number variable will constrain the minimum value surfaced by the slider. The default value is the min
Adding a constrain-max
number variable will constrain the maximum value surfaced by the slider. The default value is the max
All attributes are optional
Usage
Dragging the slider element will alter the value surfaced by the component from its value
attribute (should the number in which the drop ends be greater than or equal to the constrain-min
or less than or equal to the constrain-max
)
Clicking on the numbers shown at the top of each step will alter the value surfaced by the component from its value
attribute (should the number be greater than or equal to the constrain-min
or less than or equal to the constrain-max
).
Clicking on the triangles either side of the slider will alter the value surfaced by the component from its value
attribute by +/- 1 (should the number resulting from the click be greater than or equal to the constrain-min
or less than or equal to the constrain-max
).
Caution
The range of numbers, inclusive of min
and max
, should not be too large - tests have found that the ranges should not have more than 15 numbers, but YMMV.