UNPKG

carbon-components

Version:

Carbon Components is a component library for IBM Cloud

carbondesignsystem.com

IBM/carbon-components

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