Skip to main content

Slider

A slider provides a visual indication of adjustable content, as well as the current setting in the total range of content. Use a slider when you want people to set defined values (such as volume or brightness), or when people would benefit from instant feedback on the effect of setting changes.

Examples#

Properties#

NameTypeDefaultDescription
valuenumberCurrent value of the slider.
labelstringDescription label of the slider.
minnumberThe min value of the slider.
maxnumberThe max value of the slider.
stepnumberThe difference between the two adjacent values of the slider.
showValueboolfalseWhether to show the value on the right of the slider.
valueFormatstring{value}Optional format string for the slider value, for example {value}%.
verticalboolfalseOptional flag to render the slider vertically. Defaults to rendering horizontal.
datastringAdditional data attached to the control. The value is passed in change event data along with a slider value.

Events#

NameDescription
changeFires when the value of a slider has been changed.