Sliders are ideal components for adjusting settings that reflect intensity levels, such as volume, brightness, or color saturation.
Sliders may have icons on both ends of the bar that reflect the value intensity. Place the smallest value for the slider range on the left and the largest value on the right.
Continuous sliders allow users to select a value along a subjective range. They do not require a specific value to make adjustments, although they may, in some instances, offer an editable numeric value.
Discrete sliders allow users to select a specific value from a range.
Use continuous sliders for subjective settings that do not require a specific value for the user to make meaningful adjustments.
The discrete slider thumb snaps to evenly spaced tick marks along the slider rail. Use for objective settings that require specific values for the user to make meaningful adjustments. Each tick mark should change the setting to a level that’s discernible to the user. The values are predetermined and aren’t user-editable.
The thumb label can be positioned on the near of the far side of the track by setting the thumbLabelPosition property to "near" or "far". Default value is "near".
Use for settings for which users need to know the exact value of the setting.
Continuous smartSlider with a scale.
|
|
|
|
|
|
Continuous slider with scale positions: near, both and far
Discrete smartSlider can have a scale on the track
Discrete slider
smartSlider can have multiple thumbs
Range slider
Smart Slider can be horizontal or vertical depending on the orientation property.
Vertical continuous slider / Vertical continuous slider inverted
Vertical discrete slider / Vertical discrete slider inverted
Sliders are controls that are used for adjusting values precisely.