Sliders

Sliders let users select a value from a continuous or discrete range of values by moving the slider thumb. The smallest value is to the left, the largest to the right. Sliders can have icons to the left and right of the bar that reflect the value intensity. The interactive nature of the slider makes it a great choice for settings that reflect intensity levels, such as volume, brightness, or color saturation.

Continuous sliders show no real indication of what the value is for the range. They are normally used when precision isn't fully required. The basic props required for a Slider is the id prop for accessibility and linking the slider with the <input type="range"> hidden behind the scenes. You can also provide a label that will get displayed above the slider.

When a keyboard user tab-focuses this slider, a ring will appear around the slider and the user can select values with the left or right arrow keys. Once they tab away, that value will be set.



Discrete sliders are used when more precision is required for the sliding range. When the user touches or clicks the slider, a "balloon" will appear that displays the current value. While the user drags the slider, the value will update in real time to show the value. Once the user clicks or touches away from the slider, the "balloon" will be hidden again.

When a keyboard user tab-focuses the slider, it will show the balloon and a small ring for a second to indicate focus. They can then select values just like the continuous slider by using the left and right arrow keys.



By default the slider uses a 0-100 scale and "step" increments of 1, but you can update this by setting a min, max, and/or step prop. Right now, I only support a min and max range on the same side of 0 (so just don't do a negative to positive range) because I couldn't get the maths right.

It is generally recommended to use a larger range for the slider as it will appear more "fluid". When there is a smaller range, the slider will attempt to fix itself to the closest value after stops dragging.

When using discrete sliders, you can also add tick marks at certain points to help show the progress of the slider.




Sliders have been updated to also have support for displaying icons inline with the slider. I'm not sure what the major use-case is for it, but it looks neat.

In some cases, it can be easier for users to specifically state the number they want in the range by using a text field. If the editable prop is provided, a number text field will be placed to the right of the slider and allow for real-time updates if the user changes the value using that field.