A Slider allows the user to select values in a linear range of values.
Use a Slider when you need a selection from a range of values where we want the user to play with the possible values. A popular use is changing the contrast color value for an image. Other uses could be: setting the volume of audio, the reproduction bar of a video or adjusting a filter in a faceted search, etc.
A Slider shows a range of values along a bar, from which users may select a single value. It has default values for its range: min to max — 0 to 100, each. However, these values can be tailored depending on what’s needed.
Additionally, a step value can be set. A step specifies the size of each thumb movement (the increment or jump between values) of the Slider control. Layout
The browser will determine the cursor to display based on the current context
It shows the current slider value. Showing the tooltip is optional as a slider can be combined with other components (inputs, labels, etc). It’s shown when the user hovers over the thumb.
Drag and Drop
The Thumb only moves horizontally so It can be dragged and dropped from right to left and left to right.