|
1 | 1 | # RangeSlider |
2 | | -A highly optimized and fully customizable pure JS component for value range selection. |
| 2 | +A highly optimized and fully customizable pure TS component for value range selection. |
3 | 3 |
|
4 | 4 | The component is not re-rendered while user moves the thumb.<br/> |
5 | 5 | Even if there is a label, only the label component is re-rendered when values are changed. |
@@ -66,26 +66,26 @@ const handleValueChange = useCallback((low, high) => { |
66 | 66 |
|
67 | 67 | ### Properties |
68 | 68 |
|
69 | | -| Name | Description | Type | Default Value | |
70 | | -|----------------------| --- | --- | :-------------: | |
71 | | -| `min` | Minimum value of slider | number | _**required**_ | |
72 | | -| `max` | Maximum value of slider | number | _**required**_ | |
73 | | -| `minRange` | Minimum range of thumbs allowed to be selected **by the user**.<br/>**Note:** it is still possible to set values closer to each other than `minRange` programmatically.<br/>If `disableRange` is set to true, maximum value allowed for user will be `max` - `minRange`. | number | `0` | |
74 | | -| `step` | Step of slider | number | `1` | |
75 | | -| `low` | Low value of slider | number | Initially `min` value will be set if not provided | |
76 | | -| `high` | High value of slider | number | Initially `max` value will be set if not provided | |
77 | | -| `floatingLabel` | If set to `true`, labels will not take space in component tree. Instead they will be rendered over the content above the slider (like a small popup). | boolean | `false` | |
78 | | -| `disableRange` | Slider works as an ordinary slider with 1 control if `true` | boolean | `false` | |
79 | | -| `disabled` | Any user interactions will be ignored if `true` | boolean | `false` | |
80 | | -| `allowLabelOverflow` | If set to `true`, labels are allowed to be drawn outside of slider component's bounds.<br/>Otherwise label's edges will never get out of component's edges. | boolean | `false` | |
81 | | -| `renderThumb` | Should render the thumb. | `() => Node` | _**required**_ | |
82 | | -| `renderRail` | Should render the "rail" for thumbs.<br/>Rendered component **should** have `flex: 1` style so it won't fill up the whole space. | `() => Node` | _**required**_ | |
83 | | -| `renderRailSelected` | Should render the selected part of "rail" for thumbs.<br/>Rendered component **should not** have `flex: 1` style so it fills up the whole space. | `() => Node` | _**required**_ | |
84 | | -| `renderLabel` | Should render label above thumbs.<br/>If no function is passed, no label will be drawn. | `(value: number) => Node` | `undefined` | |
85 | | -| `renderNotch` | Should render the notch below the label (above the thumbs).<br/>Classic notch is a small triangle below the label.<br/>If `allowLabelOverflow` is not set to true, the notch will continue moving with thumb even if the label has already reached the edge of the component and can't move further.| `() => Node` | `undefined` | |
86 | | -| `onValueChanged` | Will be called when a value was changed.<br/>If `disableRange` is set to true, the second argument should be ignored.<br/>`fromUser` will be true if the value was changed by user's interaction. | `(low: number, high: number, fromUser: boolean) => void` | `undefined` | |
87 | | -| `onSliderTouchStart` | Will be called when user starts interaction with slider.<br/>If `disableRange` is set to true, the second argument should be ignored. | `(low: number, high: number) => void` | `undefined` | |
88 | | -| `onSliderTouchEnd` | Will be called when user ends interaction with slider.<br/>If `disableRange` is set to true, the second argument should be ignored. | `(low: number, high: number) => void` | `undefined` | |
| 69 | +| Name | Description | Type | Default Value | |
| 70 | +|----------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------|:-------------------------------------------------:| |
| 71 | +| `min` | Minimum value of slider | number | _**required**_ | |
| 72 | +| `max` | Maximum value of slider | number | _**required**_ | |
| 73 | +| `minRange` | Minimum range of thumbs allowed to be selected **by the user**.<br/>**Note:** it is still possible to set values closer to each other than `minRange` programmatically.<br/>If `disableRange` is set to true, maximum value allowed for user will be `max` - `minRange`. | number | `0` | |
| 74 | +| `step` | Step of slider | number | `1` | |
| 75 | +| `low` | Low value of slider | number | Initially `min` value will be set if not provided | |
| 76 | +| `high` | High value of slider | number | Initially `max` value will be set if not provided | |
| 77 | +| `floatingLabel` | If set to `true`, labels will not take space in component tree. Instead they will be rendered over the content above the slider (like a small popup). | boolean | `false` | |
| 78 | +| `disableRange` | Slider works as an ordinary slider with 1 control if `true` | boolean | `false` | |
| 79 | +| `disabled` | Any user interactions will be ignored if `true` | boolean | `false` | |
| 80 | +| `allowLabelOverflow` | If set to `true`, labels are allowed to be drawn outside of slider component's bounds.<br/>Otherwise label's edges will never get out of component's edges. | boolean | `false` | |
| 81 | +| `renderThumb` | Should render the thumb. The `name` is the name of the thumb. This may be helpful if there is a need to render different thumbs for high and low values. | `(name: 'high' | 'low') => Node` | _**required**_ | |
| 82 | +| `renderRail` | Should render the "rail" for thumbs.<br/>Rendered component **should** have `flex: 1` style so it won't fill up the whole space. | `() => Node` | _**required**_ | |
| 83 | +| `renderRailSelected` | Should render the selected part of "rail" for thumbs.<br/>Rendered component **should not** have `flex: 1` style so it fills up the whole space. | `() => Node` | _**required**_ | |
| 84 | +| `renderLabel` | Should render label above thumbs.<br/>If no function is passed, no label will be drawn. | `(value: number) => Node` | `undefined` | |
| 85 | +| `renderNotch` | Should render the notch below the label (above the thumbs).<br/>Classic notch is a small triangle below the label.<br/>If `allowLabelOverflow` is not set to true, the notch will continue moving with thumb even if the label has already reached the edge of the component and can't move further. | `() => Node` | `undefined` | |
| 86 | +| `onValueChanged` | Will be called when a value was changed.<br/>If `disableRange` is set to true, the second argument should be ignored.<br/>`fromUser` will be true if the value was changed by user's interaction. | `(low: number, high: number, fromUser: boolean) => void` | `undefined` | |
| 87 | +| `onSliderTouchStart` | Will be called when user starts interaction with slider.<br/>If `disableRange` is set to true, the second argument should be ignored. | `(low: number, high: number) => void` | `undefined` | |
| 88 | +| `onSliderTouchEnd` | Will be called when user ends interaction with slider.<br/>If `disableRange` is set to true, the second argument should be ignored. | `(low: number, high: number) => void` | `undefined` | |
89 | 89 |
|
90 | 90 | All the other props (e.g. style) will be passed to root container component. |
91 | 91 |
|
|
0 commit comments