react-native-range-slider-expo
!
Supports Android and iOS !
MIT License$3
Getting started
npm i react-native-range-slider-expo
Usage
#### Examples - display
#### Examples - code (reflects the short video above)
``javascript
import RangeSlider, { Slider } from 'react-native-range-slider-expo';
`
`javascript
const [fromValue, setFromValue] = useState(0);
const [toValue, setToValue] = useState(0);
const [value, setValue] = useState(0);
return (
fromValueOnChange={value => setFromValue(value)}
toValueOnChange={value => setToValue(value)}
initialFromValue={11}
/>
from value: {fromValue}
to value: {toValue}
valueOnChange={value => setValue(value)}
initialValue={12}
knobColor='red'
valueLabelsBackgroundColor='black'
inRangeBarColor='purple'
outOfRangeBarColor='orange'
/>
value: {value}
);
``
API - RangeSlider (default import)
| Property | Type | Required | Default |
| :--- |:----:| :-----: | :-----: |
| min | number | yes | - |
| max | number | yes | - |
| fromValueOnChange | callback | yes | - |
| toValueOnChange | callback | yes | - |
| step | number | no | 1 |
| styleSize | string ( 'small' \| 'medium' \| 'large' \| number ) | no | 'medium' |
| fromKnobColor | string (color) | no | '#00a2ff' |
| toKnobColor | string (color) | no | '#00a2ff' |
| inRangeBarColor | string (color) | no | 'rgb(100,100,100)' |
| outOfRangeBarColor | string (color) | no | 'rgb(200,200,200)' |
| valueLabelsBackgroundColor | string (color) | no | '#3a4766' |
| rangeLabelsTextColor | string (color) | no | 'rgb(60,60,60)' |
| showRangeLabels | boolean | no | true |
| showValueLabels | boolean | no | true |
| initialFromValue | number | no | as 'min' value |
| initialToValue | number | no | as 'max' value |
| knobSize | number | no | 24/34/44 |
| containerStyle | style | no | - |
| barHeight | number | no | 8/11/15 |
| labelFormatter | (value: number) => string | no | - |
API - Slider (1 knob)
| Property | Type | Required | Default |
| :--- |:----:| :-----: | :-----: |
| min | number | yes | - |
| max | number | yes | - |
| valueOnChange | callback | yes | - |
| step | number | no | 1 |
| styleSize | string ( 'small' \| 'medium' \| 'large' \| number ) | no | 'medium' |
| knobColor | string (color) | no | '#00a2ff' |
| inRangeBarColor | string (color) | no | 'rgb(200,200,200)' |
| outOfRangeBarColor | string (color) | no | 'rgb(100,100,100)' |
| valueLabelsTextColor | string (color) | no | 'white' |
| valueLabelsBackgroundColor | string (color) | no | '#3a4766' |
| rangeLabelsTextColor | string (color) | no | 'rgb(60,60,60)' |
| showRangeLabels | boolean | no | true |
| showValueLabels | boolean | no | true |
| initialValue | number | no | as 'min' value |
| containerStyle | style | no | - |
| barHeight | number | no | 8/11/15 |
| labelFormatter | (value: number) => string | no | - |
API - Textual Slider
| Property | Type | Required | Default |
| :--- |:----:| :-----: | :-----: |
| values | [ItemType] | yes | - |
| valueOnChange | callback | yes | - |
| styleSize | string ( 'small' \| 'medium' \| 'large' \| number ) | no | 'medium' |
| knobColor | string (color) | no | '#00a2ff' |
| inRangeBarColor | string (color) | no | 'rgb(200,200,200)' |
| outOfRangeBarColor | string (color) | no | 'rgb(100,100,100)' |
| valueLabelsTextColor | string (color) | no | 'white' |
| valueLabelsBackgroundColor | string (color) | no | '#3a4766' |
| rangeLabelsTextColor | string (color) | no | 'rgb(60,60,60)' |
| showRangeLabels | boolean | no | true |
| showValueLabels | boolean | no | true |
| initialValue | number | no | - |
License
This project is licensed under the MIT License
Todo
- [X] Add plain slider (with 1 knob)
- [X] Add initial values
- [X] Add numeric style size
- [X] Add textual values
- [ ] Add prefix/suffix to numeric values
- [ ] Beautify styling