diff --git a/README.md b/README.md index 28847c1..d99d85f 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # RangeSlider -A highly optimized and fully customizable pure JS component for value range selection. +A highly optimized and fully customizable pure TS component for value range selection. The component is not re-rendered while user moves the thumb.
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) => { ### Properties -| Name | Description | Type | Default Value | -|----------------------| --- | --- | :-------------: | -| `min` | Minimum value of slider | number | _**required**_ | -| `max` | Maximum value of slider | number | _**required**_ | -| `minRange` | Minimum range of thumbs allowed to be selected **by the user**.
**Note:** it is still possible to set values closer to each other than `minRange` programmatically.
If `disableRange` is set to true, maximum value allowed for user will be `max` - `minRange`. | number | `0` | -| `step` | Step of slider | number | `1` | -| `low` | Low value of slider | number | Initially `min` value will be set if not provided | -| `high` | High value of slider | number | Initially `max` value will be set if not provided | -| `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` | -| `disableRange` | Slider works as an ordinary slider with 1 control if `true` | boolean | `false` | -| `disabled` | Any user interactions will be ignored if `true` | boolean | `false` | -| `allowLabelOverflow` | If set to `true`, labels are allowed to be drawn outside of slider component's bounds.
Otherwise label's edges will never get out of component's edges. | boolean | `false` | -| `renderThumb` | Should render the thumb. | `() => Node` | _**required**_ | -| `renderRail` | Should render the "rail" for thumbs.
Rendered component **should** have `flex: 1` style so it won't fill up the whole space. | `() => Node` | _**required**_ | -| `renderRailSelected` | Should render the selected part of "rail" for thumbs.
Rendered component **should not** have `flex: 1` style so it fills up the whole space. | `() => Node` | _**required**_ | -| `renderLabel` | Should render label above thumbs.
If no function is passed, no label will be drawn. | `(value: number) => Node` | `undefined` | -| `renderNotch` | Should render the notch below the label (above the thumbs).
Classic notch is a small triangle below the label.
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` | -| `onValueChanged` | Will be called when a value was changed.
If `disableRange` is set to true, the second argument should be ignored.
`fromUser` will be true if the value was changed by user's interaction. | `(low: number, high: number, fromUser: boolean) => void` | `undefined` | -| `onSliderTouchStart` | Will be called when user starts interaction with slider.
If `disableRange` is set to true, the second argument should be ignored. | `(low: number, high: number) => void` | `undefined` | -| `onSliderTouchEnd` | Will be called when user ends interaction with slider.
If `disableRange` is set to true, the second argument should be ignored. | `(low: number, high: number) => void` | `undefined` | +| Name | Description | Type | Default Value | +|----------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------|:-------------------------------------------------:| +| `min` | Minimum value of slider | number | _**required**_ | +| `max` | Maximum value of slider | number | _**required**_ | +| `minRange` | Minimum range of thumbs allowed to be selected **by the user**.
**Note:** it is still possible to set values closer to each other than `minRange` programmatically.
If `disableRange` is set to true, maximum value allowed for user will be `max` - `minRange`. | number | `0` | +| `step` | Step of slider | number | `1` | +| `low` | Low value of slider | number | Initially `min` value will be set if not provided | +| `high` | High value of slider | number | Initially `max` value will be set if not provided | +| `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` | +| `disableRange` | Slider works as an ordinary slider with 1 control if `true` | boolean | `false` | +| `disabled` | Any user interactions will be ignored if `true` | boolean | `false` | +| `allowLabelOverflow` | If set to `true`, labels are allowed to be drawn outside of slider component's bounds.
Otherwise label's edges will never get out of component's edges. | boolean | `false` | +| `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**_ | +| `renderRail` | Should render the "rail" for thumbs.
Rendered component **should** have `flex: 1` style so it won't fill up the whole space. | `() => Node` | _**required**_ | +| `renderRailSelected` | Should render the selected part of "rail" for thumbs.
Rendered component **should not** have `flex: 1` style so it fills up the whole space. | `() => Node` | _**required**_ | +| `renderLabel` | Should render label above thumbs.
If no function is passed, no label will be drawn. | `(value: number) => Node` | `undefined` | +| `renderNotch` | Should render the notch below the label (above the thumbs).
Classic notch is a small triangle below the label.
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` | +| `onValueChanged` | Will be called when a value was changed.
If `disableRange` is set to true, the second argument should be ignored.
`fromUser` will be true if the value was changed by user's interaction. | `(low: number, high: number, fromUser: boolean) => void` | `undefined` | +| `onSliderTouchStart` | Will be called when user starts interaction with slider.
If `disableRange` is set to true, the second argument should be ignored. | `(low: number, high: number) => void` | `undefined` | +| `onSliderTouchEnd` | Will be called when user ends interaction with slider.
If `disableRange` is set to true, the second argument should be ignored. | `(low: number, high: number) => void` | `undefined` | All the other props (e.g. style) will be passed to root container component. diff --git a/package.json b/package.json index 13f7ac0..d4918c1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rn-range-slider", - "version": "2.2.1", + "version": "2.2.2", "author": "Tigran Sahakyan ", "description": "A highly optimized pure JS implementation of Range Slider for React Native", "homepage": "https://github.com/githuboftigran/rn-range-slider",