---
title: Range slider
menu: docs.components.range-slider
libs: nouislider
---
To be able to use the range slider in your application you will need to install the nouislider dependency with `npm install nouislider`.
All options and features can be found [**here**](https://refreshless.com/nouislider/).
## Basic range slider
{% capture code %}
{% endcapture %}
{% include example.html code=code %}
## Basic options
Basic range slider options.
## js-name
By setting `js-name` you can access slider in your js code. **Remember to use it in your code after the page has loaded.**
```js
/* Example */
window.onload = slider;
function slider(){
let sliderText = document.getElementById('sliderText');
slider1.on('update',function(values,handle){
sliderText.innerHTML = values[handle];
});
}
```
{% capture code %}
{% endcapture %}
{% include example.html code=code %}
## start
The `start` option sets the number of handles and corresponding start positions.
The `start` option uses the slider's `'format'` option to decode the input. Number input will be cast to string and decoded.
{% capture code %}
{% endcapture %}
{% include example.html code=code %}
## range
All values on the slider are part of a range. The range has a minimum and maximum value. **The minimum value cannot be equal to the maximum value.**
{% capture code %}
{% endcapture %}
{% include example.html code=code %}
## step
By default, the slider slides fluently. In order to make the handles jump between intervals, you can use the step option.
{% capture code %}
{% endcapture %}
{% include example.html code=code %}
## connect
The connect option can be used to control the bar between the handles or the edges of the slider.
If you are using one handle, set the value to either `'upper'` or `'lower'`.
For sliders with 2 or more handles, pass an array with a boolean for every connecting element, including the edges of the slider. The length of this array must match the handle count + 1.
Setting true sets the bars between the handles, but not between the handles and the sliders edges.
{% capture code %}
{% endcapture %}
{% include example.html code=code %}
## margin
When using two handles, the minimum distance between the handles can be set using the margin option. The margin value is relative to the value set in 'range'. This option is only available on linear sliders.
{% capture code %}
{% endcapture %}
{% include example.html code=code %}
## limit
The `limit` option is the oposite of the margin option, limiting the maximum distance between two handles. As with the margin option, the `limit` option can only be used on linear sliders.
{% capture code %}
{% endcapture %}
{% include example.html code=code %}
## padding
Padding limits how close to the slider edges handles can be.
{% capture code %}
{% endcapture %}
{% include example.html code=code %}
That's only the basic features and options of range slider. More possibilities can be found [**here**](https://refreshless.com/nouislider/).