Range Slider

A Range Slider displays a predefined scale with two draggable thumbs, allowing users to select a range of values. Users can also drag the entire selected range along the scale without changing the distance between the thumbs. This demo showcases the Range Slider question included out of the box in the SurveyJS Form Library.

To add a Range Slider question to your survey or form, define an object with the type property set to "slider" and add it to the elements array. Within this object, set the sliderType property to "range", specify the question's title, and assign a unique name to identify it. You can also provide a description, which will appear below the title.

The slider scale defines the range of valid values and the interval between selectable points (snap points). The main scale settings include:

• min: number
  The minimum value on the scale.

• max: number
  The maximum value on the scale.

• step: number
  The interval between snap points.

This example demonstrates both the default scale configuration—min: 0, max: 100, step: 1—and a customized one—min: 100, max: 1000, step: 50.

A Range Slider also displays labels that indicate specific values along the scale. For details on how to configure these labels, refer to the following demo:

Configure Slider Scale Labels

The default value sets the initial position of the slider thumbs and is saved in the survey results if the user doesn't change the selection. By default, this value is undefined, and the thumbs start at the beginning and the end of the scale. Use the defaultValue property to assign a static default, or the defaultValueExpression property to calculate it dynamically.

In this demo, one of the Range Sliders has a default value of [20, 80], specified using the defaultValue property.

To prevent users from selecting a range that is too short or too long, use the minRangeLength and maxRangeLength properties. These properties accept numeric values that define the minimum and maximum allowable range lengths.

In this demo, the bottom Range Slider restricts selection to a range no shorter than 20 and no longer than 60.