react-native-sliders

react-native-sliders


A pure JavaScript component for react-native with multiple thumbs support.

It is a drop-in replacement for Slider.

Install

``shell
npm i --save react-native-sliders
`

Usage

`jsx
import React from "react";
import Slider from "react-native-sliders";
import { AppRegistry, StyleSheet, View, Text } from "react-native";

class SliderExample extends React.Component {
state = {
value: [0.2, 0.5]
};

render() {
return (

value={this.state.value}
onValueChange={value => this.setState({ value })}
/>

Value: {this.state.value}


);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
marginLeft: 10,
marginRight: 10,
alignItems: "stretch",
justifyContent: "center"
}
});

AppRegistry.registerComponent("SliderExample", () => SliderExample);
`

Try this example live on Expo Snack.

Props

Prop | Type | Optional | Default | Description
--------------------- | -------- | -------- | ------------------------- | -----------
value | [number] | Yes | 0 | Initial value of the slider
disabled | bool | Yes | false | If true the user won't be able to move the slider
minimumValue | number | Yes | 0 | Initial minimum value of the slider
maximumValue | number | Yes | 1 | Initial maximum value of the slider
step | number | Yes | 0 | Step value of the slider. The value should be between 0 and maximumValue - minimumValue)
minimumTrackTintColor | string | Yes | '#3f3f3f' | The color used for the track to the left of the button
maximumTrackTintColor | string | Yes | '#b3b3b3' | The color used for the track to the right of the button
minimumTrackStyle | style | Yes | | The style applied to the track to the left of the button
maximumTrackStyle | style | Yes | | The style applied to the track to the right of the button
thumbStyle | style | Yes | | The style applied to the thumb
thumbTintColor | string | Yes | '#343434' | The color used for the thumb
thumbTouchSize | object | Yes | {width: 40, height: 40}` | The size of the touch area that allows moving the thumb. The touch area has the same center as the visible thumb. This allows to have a visually small thumb while still allowing the user to move it easily.
onValueChange | function | Yes | | Callback continuously called while the user is dragging the slider
onSlidingStart | function | Yes | | Callback called when the user starts changing the value (e.g. when the slider is pressed)
onSlidingComplete | function | Yes | | Callback called when the user finishes changing the value (e.g. when the slider is released)
style | style | Yes | | The style applied to the slider container
trackStyle | style | Yes | | The style applied to the track
thumbStyle | style | Yes | | The style applied to the thumb
thumbElement | [ReactNativeElement] | Yes | | Sets an element for the thumb.
debugTouchArea | bool | Yes | false | Set this to true to visually see the thumb touch rect in green.
animateTransitions | bool | Yes | false | Set to true if you want to use the default 'spring' animation
animationType | string | Yes | 'timing' | Set to 'spring' or 'timing' to use one of those two types of animations with the default animation properties.
animationConfig | object | Yes | undefined | Used to configure the animation parameters. These are the same parameters in the Animated library.

---

MIT Licensed