# rangeSlider

The live `rangeSlider` field uses the `ion.rangeSlider` jQuery plugin.

## 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>

!["Range Slider Element"](/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>
```

## Common Configuration Properties

| Property       | Type      | Description                                                      |
| -------------- | --------- | ---------------------------------------------------------------- |
| `type`         | `String`  | Must be `"rangeSlider"`                                          |
| `label`        | `String`  | Field label                                                      |
| `model`        | `String`  | Model key that stores either a single number or a two-item array |
| `placeholder`  | `String`  | Placeholder text                                                 |
| `disabled`     | `Boolean` | Disables the control                                             |
| `readonly`     | `Boolean` | Makes the input read-only                                        |
| `fieldOptions` | `Object`  | Options passed directly into `$(el).ionRangeSlider(...)`         |

## Example Schema Snippet

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

## Runtime Notes

* The component requires the `ion.rangeSlider` library to be loaded globally.
* `fieldOptions.type` defaults to `"single"` if you do not provide it.
* When the slider type is `"double"`, the model is written as `[from, to]`.
* Otherwise, the model is written as a single numeric value.

### Theming

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

Use key `"skin"` to change theme.

```
"fieldOptions": {
    "grid": true,
    "skin": "big"
  }
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.klai.studio/reference/components-overview/misc-elements/rangeslider.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.