React Native Slider
This lightweight version of a slider is fully compatible with React-Native and React-Native-Web.
It also provides support for Range slider (with 2 thumbs).
- Same API as @react-native-community/slider (with some more features of course!)
- lightweight
- Range slider for sliders with min and max values
- Supports for React-Native-Web
- No extra dependencies!
Install
npm i -S @sharcoux/slider
Usage
Slider
You can see below the available props with their respective default values
import { Slider } from '@sharcoux/slider'
<Slider
value={0}
minimumValue={0}
maximumValue={1}
step={0}
minimumTrackTintColor='grey'
maximumTrackTintColor='grey'
thumbTintColor='darkcyan'
thumbStyle={undefined}
trackStyle={undefined}
vertical={false}
inverted={false}
enabled={true}
trackHeight={4}
thumbSize={15}
slideOnTap={true}
onValueChange={undefined}
onSlidingStart={undefined}
onSlidingComplete={undefined}
{...props}
/>
Range Slider
You can see below the available props with their respective default values
import { RangeSlider } from '@sharcoux/slider'
<RangeSlider
range={[0, 1]}
minimumValue={0}
maximumValue={1}
step={0}
minimumRange={step || 0}
crossingAllowed={false}
outboundColor='grey'
inboundColor='grey'
thumbTintColor='darkcyan'
thumbStyle={undefined}
trackStyle={undefined}
vertical={false}
inverted={false}
enabled={true}
trackHeight={4}
thumbSize={15}
slideOnTap={true}
onValueChange={undefined}
onSlidingStart={undefined}
onSlidingComplete={undefined}
{...props}
/>
Slider V5
In version 5, I removed the Animated API as it cannot work on mobile until this issue is fixed by Facebook.
On the other hand, the default implementation should have received a performance boost that would make the Animated version theoretically useless.
I also added a prop slideOnTap
to define if the slider should change it's value when pressing it, or only on slide.
Changelog V 5.1.0:
- new
crossingAllowed
prop on RangeSlider - new
minimumRange
prop on RangeSlider
Changelog V 5.0.0:
- Remove
AnimatedSlider
and AnimatedRangeSlider
- new
slideOnTap
prop - performance boost
If you have any issue, please fill an issue on our repo