react-native-slider

A pure JavaScript component for react-native. This is still very much a work in progress, ideas and contributions are very welcome.

react-native-sliderb

Install

npm i --save react-native-slider

Note: I try to maintain backward compatibility of this component with previous versions of React Native, but due to the nature of the platform, and the existence of breaking changes between releases, it is possible that you need to use a specific version of this component to support the exact version of React Native you are using. See the following table:

React Native version(s) Supporting react-native-slider version(s)
<0.25.0 <0.7.0
v0.25.x v0.7.x
v0.26.0+ v0.8.x
v0.43.0+ v0.10.x
v0.44.0+ v0.11.x

Usage

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

class SliderExample extends React.Component {
  state = {
    value: 0.2
  };

  render() {
    return (
      <View style={styles.container}>
        <Slider
          value={this.state.value}
          onValueChange={value => this.setState({ value })}
        />
        <Text>
          Value: {this.state.value}
        </Text>
      </View>
    );
  }
}

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

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

GitHub