Introduction
This feature is not yet available to all users.
Range sliders allow site visitors to input a range of values by sliding two 'handles' along a numeric track. The slider also supports a 'single-handle' mode.
max
and min
define the upper and lower limits of a range slider.
value
defines the currently selected values of the handles.
Range sliders can be used to filter data, or to collect numeric input from site visitors. For example, you can use a range slider so a site visitor can select a price range for their online shopping needs.
A range slider has a sliderType
that can be set to either 'Continuous' or 'Stepped'.
- As a handle slides left or right along a continuous slider, the selected value always increases or decreases by 0.1.
- Unlike a continuous slider, a stepped slider includes tick marks along its track. The tick marks indicate the possible input values that can be selected by sliding the handles.
- As a handle slides left or right along a stepped slider, the value increases or decreases by its
step
value represented by the tick marks. - A stepped slider also has a
stepType
that can be set to either 'Number' or 'Value'.- When set to 'Number', the
stepType
defines the amount of steps there are within a given range. - When set to 'Value', the
stepType
defines the amount of units between each step. - The
stepType
andstep
properties can only be used when a range slider has asliderType
of 'Stepped'.
- When set to 'Number', the
The following diagram illustrates how the stepType
and step
properties
can only be used when the range slider's sliderType
is set to 'Stepped'.
Was this helpful?