1 | @# Slider
|
2 |
|
3 | A slider is a numeric input for choosing numbers between lower and upper bounds.
|
4 | It also has a labeled axis that supports custom formatting.
|
5 |
|
6 | To adjust a slider value, the user clicks and drags a handle or clicks the axis
|
7 | to move the nearest handle to that spot. Users can also use arrow keys on the
|
8 | keyboard to adjust individual handles.
|
9 |
|
10 | Use `Slider` for choosing a single value, `RangeSlider` for choosing two values,
|
11 | and `MultiSlider` for more advanced use cases.
|
12 |
|
13 | @## Slider
|
14 |
|
15 | Use `Slider` to choose a single value on a number line. It is a controlled
|
16 | component, so the `value` prop determines its current appearance. Provide an
|
17 | `onChange` handler to receive updates and an `onRelease` handler to determine
|
18 | when the user has stopped interacting with the slider.
|
19 |
|
20 | @reactExample SliderExample
|
21 |
|
22 | @interface ISliderProps
|
23 |
|
24 | @## Range slider
|
25 |
|
26 | Use `RangeSlider` to choose a range between upper and lower bounds. The
|
27 | component functions identically to `Slider` with the addition of a second
|
28 | handle. It exposes its selected value as `[number, number]`: a two-element array
|
29 | with minimum and maximum range bounds.
|
30 |
|
31 | `RangeSlider` is a controlled component, so the `value` prop determines its
|
32 | current appearance. Provide an `onChange` handler to receive updates and an
|
33 | `onRelease` handler to determine when the user has stopped interacting with the
|
34 | slider.
|
35 |
|
36 | @reactExample RangeSliderExample
|
37 |
|
38 | @interface IRangeSliderProps
|
39 |
|
40 | @## Multi slider
|
41 |
|
42 | `MultiSlider` is a flexible solution for picking arbitrary values on a number
|
43 | line. It powers both `Slider` and `RangeSlider` internally and can be used for
|
44 | implementing more advanced use cases than one or two numbers.
|
45 |
|
46 | @reactExample MultiSliderExample
|
47 |
|
48 | @interface IMultiSliderProps
|
49 |
|
50 | @### Handle
|
51 |
|
52 | Handles for a `MultiSlider` are configured as `MultiSlider.Handle` children
|
53 | elements, each with their own `value` and other properties.
|
54 |
|
55 | ```tsx
|
56 | // RangeSlider looks roughly like this:
|
57 | <MultiSlider onChange={...}>
|
58 | <MultiSlider.Handle value={startValue} type="start" intentAfter={Intent.PRIMARY} />
|
59 | <MultiSlider.Handle value={endValue} type="end" />
|
60 | </MultiSlider>
|
61 | ```
|
62 |
|
63 | @interface IHandleProps
|