Skip to content

Commit

Permalink
* Version updated to 2.2.2
Browse files Browse the repository at this point in the history 
 * README updated
  • Loading branch information
@githuboftigran
githuboftigran committed Sep 16, 2022
1 parent a57d916 commit 5b0c535
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 22 deletions.
42 changes: 21 additions & 21 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -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.<br/>
Even if there is a label, only the label component is re-rendered when values are changed.
Expand Down Expand Up @@ -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**.<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` |
| `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.<br/>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.<br/>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.<br/>Rendered component **should not** have `flex: 1` style so it fills up the whole space. | `() => Node` | _**required**_ |
| `renderLabel` | Should render label above thumbs.<br/>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).<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` |
| `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` |
| `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` |
| `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` |
| 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**.<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` |
| `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.<br/>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' &#124; 'low') => Node` | _**required**_ |
| `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**_ |
| `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**_ |
| `renderLabel` | Should render label above thumbs.<br/>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).<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` |
| `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` |
| `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` |
| `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` |

All the other props (e.g. style) will be passed to root container component.

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "rn-range-slider",
"version": "2.2.1",
"version": "2.2.2",
"author": "Tigran Sahakyan <mail.of.tigran@gmail.com>",
"description": "A highly optimized pure JS implementation of Range Slider for React Native",
"homepage": "https://github.com/githuboftigran/rn-range-slider",
Expand Down

0 comments on commit 5b0c535

Please sign in to comment.