> For the complete documentation index, see [llms.txt](https://docs.klai.studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.klai.studio/v1/reference/components-overview/misc-elements/rangeslider.md).

# rangeSlider

The range slider component is based in the `ion.rangeSlider` library and will require a DOM header link to include the module.

### Source Reference

Vue-form-generator: <https://vue-generators.gitbook.io/vue-generators/fields/optional_fields/slider>

ion.rangeSlider.js: <http://ionden.com/a/plugins/ion.rangeSlider/index.html>

![](/files/-LaB-T3w6321JZGwHMUf)

Add the CDN references below into the DOM Header Insertions section of your site.

```
<!--rangeSlider CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/css/ion.rangeSlider.min.css"/>

<!--Plugin JavaScript file-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js"></script>
    
```

### Example code snippet

```
{
  "label": "Rank",
  "styleClasses": "col-md-12 ",
  "max": 10,
  "min": 1,
  "model": "rank",
  "rangeSliderOptions": {
    "grid": true
  },
  "type": "rangeSlider"
}
```

#### Theming

see docs for theming info here: <http://ionden.com/a/plugins/ion.rangeSlider/skins.html>