Slider

A Slider UI element presents a predefined range of values along a scale with a draggable thumb that users can move to select a number. It offers a user-friendly alternative to text boxes by visually representing the available input range. This example demonstrates the Slider question included out of the box in the SurveyJS Form Library.

To add a 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, specify the question's title and a unique name that identifies the question. Optionally, you can specify a description to place under 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: -1000, max: 1000, step: 100.

A 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 thumb and is saved in the survey results if the user doesn't change the selection. By default, this value is undefined, and the thumb starts at 0. Use the defaultValue property to assign a static default, or the defaultValueExpression property to calculate it dynamically.

In this demo, the bottom Slider has a default value of 50, specified using the defaultValue property.