UNPKG

2.14 kBMarkdownView Raw
1@# Slider
2
3A slider is a numeric input for choosing numbers between lower and upper bounds.
4It also has a labeled axis that supports custom formatting.
5
6To adjust a slider value, the user clicks and drags a handle or clicks the axis
7to move the nearest handle to that spot. Users can also use arrow keys on the
8keyboard to adjust individual handles.
9
10Use `Slider` for choosing a single value, `RangeSlider` for choosing two values,
11and `MultiSlider` for more advanced use cases.
12
13@## Slider
14
15Use `Slider` to choose a single value on a number line. It is a controlled
16component, so the `value` prop determines its current appearance. Provide an
17`onChange` handler to receive updates and an `onRelease` handler to determine
18when the user has stopped interacting with the slider.
19
20@reactExample SliderExample
21
22@interface ISliderProps
23
24@## Range slider
25
26Use `RangeSlider` to choose a range between upper and lower bounds. The
27component functions identically to `Slider` with the addition of a second
28handle. It exposes its selected value as `[number, number]`: a two-element array
29with minimum and maximum range bounds.
30
31`RangeSlider` is a controlled component, so the `value` prop determines its
32current appearance. Provide an `onChange` handler to receive updates and an
33`onRelease` handler to determine when the user has stopped interacting with the
34slider.
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
43line. It powers both `Slider` and `RangeSlider` internally and can be used for
44implementing more advanced use cases than one or two numbers.
45
46@reactExample MultiSliderExample
47
48@interface IMultiSliderProps
49
50@### Handle
51
52Handles for a `MultiSlider` are configured as `MultiSlider.Handle` children
53elements, 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