Slider
A range input component powered by noUiSlider. Supports both single value and range selection.
Requires JS
This component requires the slider stimulus controller.
API Reference
Slider
| Name | Type | Default |
|---|---|---|
range: | boolean | false |
| When true, creates a range slider with two handles for selecting a value range instead of a single value. | ||
name: | string or array | nil |
| Name attribute for the hidden form inputs. When range is true, must be an array of two names for start and end values. | ||
value: | string or array | nil |
| Initial value(s) for the slider. When range is true, must be an array of two values [start, end]. | ||
orientation: | symbol | :horizontal |
Direction of the slider track and handle movement. :horizontal | :vertical | ||
step: | number | 1 |
| Specifies step for the slider. | ||
min: | number | 0 |
| Specifies minimum value for the slider. | ||
max: | number | 100 |
| Specifies maximum value for the slider. | ||
disabled: | boolean | false |
options: | hash | {} |
| Options for nouislider. | ||
attributes | keyword arguments | |
Keyboard Interactions
| Key | Description |
|---|---|
| ArrowUp | When orientation is horizontal, moves the handle to the right. When orientation is vertical, moves the handle to the top. |
| ArrowDown | When orientation is horizontal, moves the handle to the left. When orientation is vertical, moves the handle to the bottom. |
| ArrowLeft | When orientation is horizontal, moves the handle to the left. When orientation is vertical, moves the handle to the top. |
| ArrowRight | When orientation is horizontal, moves the handle to the right. When orientation is vertical, moves the handle to the bottom. |