---
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: Vanilla JS
source: https://surveyjs.io/form-library/examples/single-value-slider-input/vanillajs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Slider (Vanilla JS)

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/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/index.js`

```js
import { Model } from "survey-core";
import "survey-js-ui";
import "survey-core/survey-core.min.css";
import "./index.css";
import { json } from "./json";

const survey = new Model(json);
survey.onComplete.add((sender, options) => {
    console.log(JSON.stringify(sender.data, null, 3));
});

survey.render(document.getElementById("surveyElement"));
```

### `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": {
    "survey-core": "latest",
    "survey-js-ui": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/form-library/examples/single-value-slider-input/angular.md)
- [React](https://surveyjs.io/form-library/examples/single-value-slider-input/reactjs.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)