--- title: Bind Sliders to Text Inputs product: Form Library description: Bind SurveyJS Single-Value Slider and Range Slider questions to text input fields in order to let users enter values manually in scenarios such as setting exact amounts or measurements. This demo explains how to set up two-way data binding between sliders and inputs so that changes in one are automatically reflected in the other. framework: React source: https://surveyjs.io/form-library/examples/sync-slider-with-input-fields/reactjs index: https://surveyjs.io/form-library/examples/overview.md --- # Bind Sliders to Text Inputs (React) 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. ## Bind the Slider to a Text Input Field 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`](/form-library/documentation/api-reference/questionslidermodel#name) property to a unique value. 3. Copy the Slider's `name` to the Single-Line Input question's [`valueName`](/form-library/documentation/api-reference/questionslidermodel#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`](/form-library/documentation/api-reference/text-entry-question-model#min) and [`max`](/form-library/documentation/api-reference/text-entry-question-model#max) properties to restrict its values to the Slider's scale range. - Set the text input's [`inputType`](/form-library/documentation/api-reference/text-entry-question-model#inputType) to `"number"` to enforce numeric input. - Enable immediate updates by setting the text input's [`textUpdateMode`](/form-library/documentation/api-reference/survey-data-model#textUpdateMode) to `"onTyping"`. - Place both questions in a [Panel](https://surveyjs.io/form-library/documentation/api-reference/panel-model) for better control over their layout and grouping. ## Bind the Range Slider to Text Input Fields 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`](/form-library/documentation/api-reference/question#name) property for all those elements to unique values. 3. Set the Range Slider's [`setValueExpression`](/form-library/documentation/api-reference/questionslidermodel#setValueExpression) property to: `[{min-input-name}, {max-input-name}]`. 4. Specify each text input's [`setValueExpression`](/form-library/documentation/api-reference/text-entry-question-model#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. ## Files ### `public/index.html` ```html
``` ### `src/SurveyComponent.jsx` ```js import React from "react"; import { Model } from "survey-core"; import { Survey } from "survey-react-ui"; import "survey-core/survey-core.min.css"; import "./index.css"; import { json } from "./json"; function SurveyComponent() { const survey = new Model(json); survey.onComplete.add((sender, options) => { console.log(JSON.stringify(sender.data, null, 3)); }); return (); } export default SurveyComponent; ``` ### `src/index.css` ```css /* You can add your custom CSS here. */ ``` ### `src/index.js` ```js import React from "react"; import { createRoot } from "react-dom/client"; import SurveyComponent from "./SurveyComponent"; const root = createRoot(document.getElementById("surveyElement")); root.render(); ``` ### `src/json.js` ```js export const json = { "elements": [ { "type": "panel", "name": "textual-entry-slider-panel", "title": "Slider + Text input field", "elements": [ { "type": "slider", "name": "textual-entry-slider", "titleLocation": "hidden" }, { "type": "text", "name": "textual-entry-textbox", "width": "120px", "minWidth": "100px", "startWithNewLine": false, "titleLocation": "hidden", "defaultValue": 0, "inputType": "number", "textUpdateMode": "onTyping", "min": 0, "max": 100, "valueName": "textual-entry-slider" } ] }, { "type": "panel", "name": "textual-entry-range-panel", "title": "Range Slider + Text input fields", "elements": [ { "type": "slider", "sliderType": "range", "name": "textual-entry-range", "titleLocation": "hidden", "setValueExpression": "[ {textual-entry-range-min}, {textual-entry-range-max} ]" }, { "type": "text", "name": "textual-entry-range-min", "width": "50%", "minWidth": "200px", "title": "Min:", "titleLocation": "left", "setValueExpression": "{textual-entry-range[0]}", "defaultValue": "0", "inputType": "number", "textUpdateMode": "onTyping", "min": 0, "max": 100 }, { "type": "text", "name": "textual-entry-range-max", "width": "50%", "minWidth": "200px", "startWithNewLine": false, "title": "Max:", "titleLocation": "left", "setValueExpression": "{textual-entry-range[1]}", "defaultValue": "100", "inputType": "number", "textUpdateMode": "onTyping", "min": 0, "max": 100 } ] } ], "widthMode": "static", "width": "670px" }; ``` ### `src/theme.js` ```js export const themeJson = {}; ``` ### `package.json` ```json { "dependencies": { "react": "latest", "react-dom": "latest", "survey-core": "latest", "survey-react-ui": "latest" }, "devDependencies": { "react-scripts": "latest" } } ``` ## Other Frameworks - [Angular](https://surveyjs.io/form-library/examples/sync-slider-with-input-fields/angular.md) - [Vue 3](https://surveyjs.io/form-library/examples/sync-slider-with-input-fields/vue3js.md) - [jQuery](https://surveyjs.io/form-library/examples/sync-slider-with-input-fields/jquery.md) - [Vanilla JS](https://surveyjs.io/form-library/examples/sync-slider-with-input-fields/vanillajs.md)