# rangeSlider

This is a range slider input field.

> Please note, this field depend on the following library:
>
> * [jQuery](http://www.jquery.com)
> * [ion.rangeSlider](https://github.com/IonDen/ion.rangeSlider)
> * ion.rangeSlider.css
> * ion.rangeSlider.skinHTML5.css

## Special properties of field

| Property             | Default | Accepted values                                                       | Description                                                                               |
| -------------------- | ------- | --------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
| `autocomplete`       | *none*  | [see doc](https://html.spec.whatwg.org/multipage/forms.html#autofill) | Indicates whether the value of the control can be automatically completed by the browser. |
| `max`                | 100     | `Number`                                                              | Max value (need to use `validators.number`)                                               |
| `min`                | 10      | `Number`                                                              | Min value (need to use `validators.number`)                                               |
| `placeholder`        | *none*  | `String`                                                              | Placeholder text for input field                                                          |
| `readonly`           | `false` | `Boolean`                                                             | If true, the input field is read only                                                     |
| `rangeSliderOptions` | `{}`    | `Object`                                                              | Settings to slider. See details below.                                                    |
| `step`               | 1       | `Number`                                                              | Set sliders step. Always > 0. Could be fractional.                                        |

### `rangeSliderOptions`

For more details, see the official [rangeSlider documentation](http://ionden.com/a/plugins/ion.rangeSlider/demo.html).

| Property                 | Default  | Accepted values | Description                                                                                                                                               |
| ------------------------ | -------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `type`                   | "single" | `String`        | Choose slider type, could be single - for one handle, or double for two handles                                                                           |
| `from`                   | min      | `Number`        | Set start position for left handle (or for single handle)                                                                                                 |
| `to`                     | max      | `Number`        | Set start position for right handle                                                                                                                       |
| `step`                   | 1        | `Number`        | Set sliders step. Always > 0. Could be fractional.                                                                                                        |
| `min_interval`           | *none*   | `Number`        | Set minimum diapason between sliders. Only in "double" type                                                                                               |
| `max_interval`           | *none*   | `Number`        | Set maximum diapason between sliders. Only in "double" type                                                                                               |
| `drag_interval`          | false    | `Boolean`       | Allow user to drag whole range. Only in "double" type (beta)                                                                                              |
| `from_fixed`             | false    | `Boolean`       | Fix position of left (or single) handle.                                                                                                                  |
| `from_min`               | min      | `Number`        | Set minimum limit for left handle.                                                                                                                        |
| `from_max`               | max      | `Number`        | Set the maximum limit for left handle                                                                                                                     |
| `from_shadow`            | false    | `Boolean`       | Highlight the limits for left handle                                                                                                                      |
| `to_fixed`               | false    | `Boolean`       | Fix position of right handle.                                                                                                                             |
| `to_min`                 | min      | `Number`        | Set the minimum limit for right handle                                                                                                                    |
| `to_max`                 | max      | `Number`        | Set the maximum limit for right handle                                                                                                                    |
| `to_shadow`              | false    | `Boolean`       | Highlight the limits for right handle                                                                                                                     |
| `prettify_enabled`       | true     | `Boolean`       | Improve readability of long numbers. 10000000 → 10 000 000                                                                                                |
| `prettify_separator`     | " "      | `String`        | Set up your own separator for long numbers. 10 000, 10.000, 10-000, etc.                                                                                  |
| `prettify`               | `null`   | `Function`      | Set up your own prettify function. Can be anything. For example, you can set up unix time as slider values and than transform them to cool looking dates. |
| `force_edges`            | false    | `Boolean`       | Slider will be always inside it's container.                                                                                                              |
| `keyboard`               | false    | `Boolean`       | Activates keyboard controls. Move left: ←, ↓, A, S. Move right: →, ↑, W, D.                                                                               |
| `keyboard_step`          | 5        | `Number`        | Movement step, than controling from keyboard. In percents.                                                                                                |
| `grid`                   | false    | `Boolean`       | Enables grid of values.                                                                                                                                   |
| `grid_margin`            | true     | `Boolean`       | Set left and right grid borders.                                                                                                                          |
| `grid_num`               | 4        | `Number`        | Number of grid units.                                                                                                                                     |
| `grid_snap`              | false    | `Boolean`       | Snap grid to sliders step (step param). If activated, grid\_num will not be used.                                                                         |
| `hide_min_max`           | false    | `Boolean`       | Hides min and max labels                                                                                                                                  |
| `hide_from_to`           | false    | `Boolean`       | Hide from and to lables                                                                                                                                   |
| `prefix`                 | *none*   | `String`        | Set prefix for values. Will be set up right before the number: $100                                                                                       |
| `postfix`                | *none*   | `String`        | Set postfix for values. Will be set up right after the number: 100k                                                                                       |
| `max_postfix`            | *none*   | `String`        | Special postfix, used only for maximum value. Will be showed after handle will reach maximum right position. For example 0 — 100+                         |
| `decorate_both`          | true     | `Boolean`       | Used for "double" type and only if prefix or postfix was set up. Determine how to decorate close values. For example: $10k — $100k or $10 — 100k          |
| `values_separator`       | " — "    | `String`        | Set your own separator for close values. Used for "double" type. Default: 10 — 100. Or you may set: 10 to 100, 10 + 100, 10 → 100 etc.                    |
| `input_values_separator` | " ; "    | `String`        | Separator for double values in input value property.                                                                                                      |

## Usage

#### Simple slider with one value

```javascript
{
    type: "rangeSlider",
    label: "Rank",
    model: "rank",
    min: 1,
    max: 10,
    required: true,
    rangeSliderOptions: {
        grid: true
    },
    validator: validators.integer
}
```

In this example the value will be a `Number` like this:

```javascript
rank: 6
```

#### Double range slider

```javascript
{
    type: "rangeSlider",
    label: "Income",
    model: "income",
    min: 0,
    max: 100000,
    rangeSliderOptions: {
        type: "double",
        prefix: "$",
        step: 1000
    }
}
```

In this example the value will be an array of numbers:

```javascript
income: [5000, 9000]
```


---

# 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://vue-generators.gitbook.io/vue-generators/develop/fields/optional_fields/slider.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.