react-native-range-slider-expo

Customizable range slider for react native apps

Getting started

npm i react-native-range-slider-expo

Usage

Examples - display

Examples - code (reflects the short video above)

import RangeSlider, { Slider } from 'react-native-range-slider-expo';

     const [fromValue, setFromValue] = useState(0);
     const [toValue, setToValue] = useState(0);
     const [value, setValue] = useState(0);
     return (
          <View style={styles.container}>
               <View>
                    <RangeSlider min={5} max={25}
                         fromValueOnChange={value => setFromValue(value)}
                         toValueOnChange={value => setToValue(value)}
                         initialFromValue={11}
                    />
                    <Text>from value:  {fromValue}</Text>
                    <Text>to value:  {toValue}</Text>
               </View>
               <View>
                    <Slider min={0} max={40} step={4}
                         valueOnChange={value => setValue(value)}
                         initialValue={12}
                         knobColor='red'
                         valueLabelsBackgroundColor='black'
                         inRangeBarColor='purple'
                         outOfRangeBarColor='orange'
                    />
                    <Text>value:  {value}</Text>
               </View>
          </View>
     );

API - RangeSlider (default import)

API - Slider (1 knob)

API - Textual Slider

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