app.js

var React = require('react');
var ReactNative = require('react-native');
var Slider = require('../src/Slider').default;
var {
  AppRegistry,
  StyleSheet,
  Text,
  ScrollView,
  View,
  SliderIOS,
  TouchableOpacity
} = ReactNative;

var DEFAULT_VALUE = 0.2;

var SliderContainer = React.createClass({
  getInitialState() {
    return {
      value: DEFAULT_VALUE,
    };
  },

  render() {
    var value = this.state.value;

    return (
      <View>
        <View style={styles.titleContainer}>
          <Text style={styles.caption} numberOfLines={1}>{this.props.caption}</Text>
          <Text style={styles.value} numberOfLines={1}>{value}</Text>
        </View>
        {this._renderChildren()}
      </View>
    );
  },

  _renderChildren() {
    return React.Children.map(this.props.children, (child) => {
      if (child.type === Slider
          || child.type === ReactNative.Slider) {
        return React.cloneElement(child);
      } else {
        return child;
      }
    });
  },
});

var SliderExample = React.createClass({
  getInitialState() {
    return {
      value:         50,
      maximumValue:  50,
      value1:        49,
      maximumValue1: 50,
    };
  },

  render() {
    return (
      <ScrollView contentContainerStyle={styles.container}>

        <SliderContainer caption='<Slider/> maximumValue still the same the value - slider does not update maximum value'>
          <Slider
            value={this.state.value}
            minimumValue={0}
            maximumValue={this.state.maximumValue}
            minimumTrackTintColor='#1fb28a'
            maximumTrackTintColor='#d3d3d3'
            thumbTintColor='#1a9274'
          />
          <TouchableOpacity onPress={() => this.setState({maximumValue: 20, value: 20})}>
            <Text>ResetMaxValue</Text>
          </TouchableOpacity>
        </SliderContainer>

        <SliderContainer caption='<Slider/> maximumValue still the same the value - slider does update correctly'>
          <Slider
            value={this.state.value1}
            minimumValue={0}
            maximumValue={this.state.maximumValue1}
            minimumTrackTintColor='#1fb28a'
            maximumTrackTintColor='#d3d3d3'
            thumbTintColor='#1a9274'
          />
          <TouchableOpacity onPress={() => this.setState({maximumValue1: 20, value1: 20})}>
            <Text>ResetMaxValue</Text>
          </TouchableOpacity>
        </SliderContainer>

      </ScrollView>
    );
  },
});

var styles = StyleSheet.create({
  container:      {
    margin:         20,
    paddingBottom:  20,
    justifyContent: 'flex-start',
    alignItems:     'stretch',
  },
  titleContainer: {
    flexDirection:  'row',
    justifyContent: 'space-between',
    alignItems:     'center',
  },
  caption:        {
    //flex: 1,
  },
  value:          {
    flex:       1,
    textAlign:  'right',
    marginLeft: 10,
  }
});

var iosStyles = StyleSheet.create({
  track: {
    height:       2,
    borderRadius: 1,
  },
  thumb: {
    width:           30,
    height:          30,
    borderRadius:    30 / 2,
    backgroundColor: 'white',
    shadowColor:     'black',
    shadowOffset:    {width: 0, height: 2},
    shadowRadius:    2,
    shadowOpacity:   0.35,
  }
});

var customStyles2 = StyleSheet.create({
  track: {
    height:       4,
    borderRadius: 2,
  },
  thumb: {
    width:           30,
    height:          30,
    borderRadius:    30 / 2,
    backgroundColor: 'white',
    borderColor:     '#30a935',
    borderWidth:     2,
  }
});

var customStyles3 = StyleSheet.create({
  track: {
    height:          10,
    borderRadius:    5,
    backgroundColor: '#d0d0d0',
  },
  thumb: {
    width:           10,
    height:          30,
    borderRadius:    5,
    backgroundColor: '#eb6e1b',
  }
});

var customStyles4 = StyleSheet.create({
  track: {
    height:          10,
    borderRadius:    4,
    backgroundColor: 'white',
    shadowColor:     'black',
    shadowOffset:    {width: 0, height: 1},
    shadowRadius:    1,
    shadowOpacity:   0.15,
  },
  thumb: {
    width:           20,
    height:          20,
    backgroundColor: '#f8a1d6',
    borderColor:     '#a4126e',
    borderWidth:     5,
    borderRadius:    10,
    shadowColor:     'black',
    shadowOffset:    {width: 0, height: 2},
    shadowRadius:    2,
    shadowOpacity:   0.35,
  }
});

var customStyles5 = StyleSheet.create({
  track: {
    height:          18,
    borderRadius:    1,
    backgroundColor: '#d5d8e8',
  },
  thumb: {
    width:           20,
    height:          30,
    borderRadius:    1,
    backgroundColor: '#838486',
  }
});

var customStyles6 = StyleSheet.create({
  track: {
    height:          14,
    borderRadius:    2,
    backgroundColor: 'white',
    borderColor:     '#9a9a9a',
    borderWidth:     1,
  },
  thumb: {
    width:           20,
    height:          20,
    borderRadius:    2,
    backgroundColor: '#eaeaea',
    borderColor:     '#9a9a9a',
    borderWidth:     1,
  }
});

var customStyles7 = StyleSheet.create({
  track: {
    height:          1,
    backgroundColor: '#303030',
  },
  thumb: {
    width:           30,
    height:          30,
    backgroundColor: 'rgba(150, 150, 150, 0.3)',
    borderColor:     'rgba(150, 150, 150, 0.6)',
    borderWidth:     14,
    borderRadius:    15,
  }
});

var customStyles8 = StyleSheet.create({
  container: {
    height: 30,
  },
  track:     {
    height:          2,
    backgroundColor: '#303030',
  },
  thumb:     {
    width:           10,
    height:          10,
    backgroundColor: '#31a4db',
    borderRadius:    10 / 2,
    shadowColor:     '#31a4db',
    shadowOffset:    {width: 0, height: 0},
    shadowRadius:    2,
    shadowOpacity:   1,
  }
});

var customStyles9 = StyleSheet.create({
  thumb: {
    width:         30,
    height:        30,
    shadowColor:   'black',
    shadowOffset:  {width: 0, height: 1},
    shadowOpacity: 0.5,
    shadowRadius:  1,
  }
});

AppRegistry.registerComponent('Example', () => SliderExample);