Introduction

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 and step properties can only be used when a range slider has a sliderType of 'Stepped'.

The following diagram illustrates how the stepType and step properties can only be used when the range slider's sliderType is set to 'Stepped'.