---
title: Slider
product: Form Library
description: Learn how to add a single-value Slider question to a SurveyJS form and configure its settings, such as the slider's range, step size, and default thumb position.
framework: React
source: https://surveyjs.io/form-library/examples/single-value-slider-input/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Slider (React)

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.

## Create a Slider Question

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`](/form-library/documentation/api-reference/page-model#elements) array. Within this object, specify the question's [`title`](/form-library/documentation/api-reference/questionslidermodel#title) and a unique [`name`](/form-library/documentation/api-reference/questionslidermodel#name) that identifies the question. Optionally, you can specify a [`description`](/form-library/documentation/api-reference/questionslidermodel#description) to place under the `title`.

## Configure the Slider Scale

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

- [`min`](/form-library/documentation/api-reference/questionslidermodel#min): `number`         
The minimum value on the scale.

- [`max`](/form-library/documentation/api-reference/questionslidermodel#max): `number`         
The maximum value on the scale.

- [`step`](/form-library/documentation/api-reference/questionslidermodel#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](/form-library/examples/customize-slider-scale-labels/ (linkStyle))

## Set a Default Slider Value

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`](/form-library/documentation/api-reference/questionslidermodel#defaultValue) property to assign a static default, or the [`defaultValueExpression`](/form-library/documentation/api-reference/questionslidermodel#defaultValueExpression) property to calculate it dynamically.

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

## Files

### `public/index.html`

```html
<div id="surveyElement" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 100%; height:100%"></div>
```

### `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 (<Survey model={survey} />);
}

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(<SurveyComponent />);
```

### `src/json.js`

```js
export const json = {
  "elements": [
    {
      "type": "slider",
      "name": "default-configuration",
      "title": "Default configuration",
      "description": "Min = 0 | Max = 100 | Step = 1"
    },
    {
      "type": "slider",
      "name": "change-min-max-step",
      "title": "Change min, max, and step",
      "description": "Min = -1000 | Max = 1000 | Step = 100",
      "min": -1000,
      "max": 1000,
      "step": 100
    },
    {
      "type": "slider",
      "name": "set-default-value",
      "title": "Set a default value",
      "description": "Default value = 50",
      "defaultValue": 50
    }
  ]
};
```

### `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/single-value-slider-input/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/single-value-slider-input/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/single-value-slider-input/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/single-value-slider-input/vanillajs.md)