Bind Sliders to Text Inputs

Sliders visually represent a value on a scale, but in some cases, it is easier to change the value by entering it in a text input field. For example, when a user needs to input a precise number—such as setting a temperature to 22.5℃ or specifying an exact budget amount—typing the value directly may be more efficient and accurate than adjusting a slider. This demo shows how you can bind a SurveyJS Slider and Range Slider to text input fields.

To enable two-way binding between a Slider and a Single-Line Input question, follow the steps below:

1. Add a Slider and a Single-Line Input question to your survey.
2. Set the Slider's name property to a unique value.
3. Copy the Slider's name to the Single-Line Input question's valueName property.

This setup ensures that the Slider and the text input stay in sync—when the user changes one, the other updates automatically.

Additionally, you can configure the following optional features for better usability:

• Use the text input's min and max properties to restrict its values to the Slider's scale range.
• Set the text input's inputType to "number" to enforce numeric input.
• Enable immediate updates by setting the text input's textUpdateMode to "onTyping".
• Place both questions in a Panel for better control over their layout and grouping.

Binding a Range Slider is slightly different because it returns an array of two numbers (representing the selected range), whereas a text input can only store a single value.

To synchronize a Range Slider with two Single-Line Input questions, do the following:

1. Add a Range Slider and two Single-Line Input questions to your survey.
2. Set the name property for all those elements to unique values.
3. Set the Range Slider's setValueExpression property to: [{min-input-name}, {max-input-name}].
4. Specify each text input's setValueExpression property as follows:
   • For the minimum value input: {range-slider-name[0]}.
   • For the maximum value input: {range-slider-name[1]}.

This ensures the Range Slider and the input fields remain synchronized.

You can also apply the same optional settings described above—min, max, inputType, textUpdateMode, and layout grouping using a panel—for better user experience.