---
title: Range slider
description: The Range Slider component lets users select a value or range with customizable intervals and limits.
---
Capture a range
```html
```
```javascript
envision.rangeSlider('#my-slider', object);
```
## Options
### values
- **Type:** Array
- **Default:** [0, 0]
Values to initialize the slider with.
```javascript
envision.rangeSlider('#my-slider', {
values: [20, 70],
});
```
### min
- **Type:** Number
- **Default:** 0
The minimum value of the slider.
```javascript
envision.rangeSlider('#my-slider', {
min: 100,
});
```
### max
- **Type:** Number
- **Default:** 100
The maximum value of the slider.
```javascript
envision.rangeSlider('#my-slider', {
max: 200,
});
```
### step
- **Type:** Number
- **Default:** 1
The size of every step between min and max. The value range (max - min) should be evenly divisible by the step.
```javascript
envision.rangeSlider('#my-slider', {
step: 5,
});
```
### visibleValues
- **Type:** Boolean
- **Default:** true
If values should be visible below the handles.
```javascript
envision.rangeSlider('#my-slider', {
visibleValues: false,
});
```
## Events
### input
Triggered for every move during slide.
```javascript
document.querySelector('#my-slider').addEventListener('input', (e) => {
console.log('input', e.detail);
});
```
### change
Triggered when slide is completed.
```javascript
document.querySelector('#my-slider').addEventListener('change', (e) => {
// Triggered when slide is completed
console.log('change', e.detail);
});
```
### slide Deprecated
Triggered for every move during slide. Event `slide` is deprecated, please use `input` event.
### slidestop Deprecated
Triggered when slide is completed. Event `slidestop` is deprecated, please use `change` event.
## Methods
### values(values)
Parameters
- **values:** An array of values to set
Set the values for the range.
```javascript
envision.rangeSlider('#my-slider').then(function (sliders) {
sliders[0].values([50, 90]);
});
```