| 1 | ### SCSS
|
| 2 |
|
| 3 | #### Modifiers
|
| 4 |
|
| 5 | Use these modifiers with `.bx--slider` class.
|
| 6 |
|
| 7 | | Selector | Description |
|
| 8 | | --------------------- | ------------------------------------------------------------------- |
|
| 9 | | .bx--slider--disabled | Applies disabled styling and prevents JS from running on user input |
|
| 10 |
|
| 11 | ### Javascript
|
| 12 |
|
| 13 | #### Options
|
| 14 |
|
| 15 | | Option | Default Selector | Description |
|
| 16 | | ------------------------------ | ---------------------------- | ------------------------------------------------------------------------- |
|
| 17 | | `selectorInit` | `[data-slider]` | The selector to find the Slider element. |
|
| 18 | | `selectorTrack` | `.bx--slider__track` | The selector to find the Slider track element. |
|
| 19 | | `selectorFilledTrack` | `.bx--slider__filled-track` | The selector to find the Slider filled track element. |
|
| 20 | | `selectorThumb` | `.bx--slider__thumb` | The selector to find the Slider thumb element. |
|
| 21 | | `selectorInput` | `.bx--slider__input` | The selector to find the Slider input element. |
|
| 22 | | `eventBeforeSliderValueChange` | `slider-before-value-change` | The event emitted before the Slider value changes. |
|
| 23 | | `eventAfterSliderValueChange` | `slider-after-value-change` | The event emitted when the Slider value changes. |
|
| 24 | | `stepMultiplier` | `4` | The multiplier applied to arrow key inputs when the shift key is pressed. |
|
| 25 |
|
| 26 | ### FAQ
|
| 27 |
|
| 28 | #### Keydown event
|
| 29 |
|
| 30 | Once `Slider` instance is initialized a user can use the following keys to control the slider.
|
| 31 |
|
| 32 | - `up` and `right` arrow keys increase the slider value by one step
|
| 33 | - `down` and `left` arrow keys decrease the slider value by one step
|
| 34 | - Pressing `shift` while changing the value of the slider will multiple the change by `Slider.options.stepMultiplier` (the default is 4)
|