Components/Slider

There are two types of sliders, Standard Slider and Range Slider. The standard slider is a control that enables the user to adjust single values within a specified numerical range. The range slider enables the user to select a value range within a predefined numerical interval.

**Use the slider if:** - you want to change values with graphical support. **Use the range slide if:** - you want to select a value range within a predefined numerical interval. If you want to specify only a single value within a predefined numerical interval, use the slider instead. **Use the slider if:** - you want to change values with graphical support.

The standard slider displays a track with a handle. When the user hovers over the handle, a hand cursor appears. The user can either drag and drop the handle or click on the bar to change the slider setting.

The range slider displays a track with two handles, indicating that a range between two values can be selected. To display a range slider, add the \

The slider can display ticks on the bar to help guide the user. If a tick is in selected range (Active Area), the \

The slider can display labels that indicate the values of each tick. Labels can be displayed with the \

By default, the slider is not responsive. However, to make the slider more mobile-friendly, you may enlarge the slider handle and its hit area by adding \

By default, the slider is not responsive. However, to make the slider more mobile-friendly, you may enlarge the slider handle and its hit area by adding \