diff --git a/Slider.js b/Slider.js
index 7a7eb7d..ccaab52 100644
--- a/Slider.js
+++ b/Slider.js
@@ -2,14 +2,13 @@
 
 var React = require('react');
 var ReactNative = require('react-native');
-var {
-  PropTypes
-} = React;
+var PropTypes = require('prop-types');
 var {
   StyleSheet,
   PanResponder,
   View,
-  TouchableHighlight
+  ViewPropTypes,
+  TouchableWithoutFeedback
 } = ReactNative;
 
 var converter = require('./converter.js');
@@ -36,29 +35,29 @@ var sliderProps = {
 
   optionsArray: PropTypes.array,
 
-  containerStyle: View.propTypes.style,
-  trackStyle: View.propTypes.style,
-  selectedStyle: View.propTypes.style,
-  unselectedStyle: View.propTypes.style,
-  markerStyle: View.propTypes.style,
-  pressedMarkerStyle: View.propTypes.style
+  containerStyle: ViewPropTypes.style,
+  trackStyle: ViewPropTypes.style,
+  selectedStyle: ViewPropTypes.style,
+  unselectedStyle: ViewPropTypes.style,
+  markerStyle: ViewPropTypes.style,
+  pressedMarkerStyle: ViewPropTypes.style
 };
 
-var Slider = React.createClass({
+class Slider extends React.Component {
 
-  propTypes: sliderProps,
+  static propTypes = sliderProps
 
-  getDefaultProps: function() {
-    return mockProps;
-  },
+  static defaultProps = mockProps
+
+  constructor(props) {
+    super(props)
 
-  getInitialState() {
     this.optionsArray = this.props.optionsArray || converter.createArray(this.props.min,this.props.max,this.props.step);
     this.stepLength = this.props.sliderLength/this.optionsArray.length;
 
     var initialValues = this.props.values.map(value => converter.valueToPosition(value,this.optionsArray,this.props.sliderLength));
 
-    return {
+    this.state = {
       pressedOne: true,
       valueOne: this.props.values[0],
       valueTwo: this.props.values[1],
@@ -67,35 +66,46 @@ var Slider = React.createClass({
       positionOne: initialValues[0],
       positionTwo: initialValues[1]
     };
-  },
 
-  componentWillMount() {
-    var customPanResponder = function (start,move,end) {
-      return PanResponder.create({
-        onStartShouldSetPanResponder: (evt, gestureState) => true,
-        onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
-        onMoveShouldSetPanResponder: (evt, gestureState) => true,
-        onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
-        onPanResponderGrant: (evt, gestureState) => start(),
-        onPanResponderMove: (evt, gestureState) => move(gestureState),
-        onPanResponderTerminationRequest: (evt, gestureState) => false,
-        onPanResponderRelease: (evt, gestureState) => end(gestureState),
-        onPanResponderTerminate: (evt, gestureState) => end(gestureState),
-        onShouldBlockNativeResponder: (evt, gestureState) => true
-      })
-    };
-
-    this._panResponderOne = customPanResponder(this.startOne, this.moveOne, this.endOne);
-    this._panResponderTwo = customPanResponder(this.startTwo, this.moveTwo, this.endTwo);
+    this.bindFunctions()
+  }
 
-  },
+  componentWillMount() {
+    this._panResponderOne = this.customPanResponder(this.startOne, this.moveOne, this.endOne);
+    this._panResponderTwo = this.customPanResponder(this.startTwo, this.moveTwo, this.endTwo);
+  }
 
   componentWillReceiveProps(nextProps) {
     var { values } = this.props;
     if (nextProps.values.join() !== values.join()) {
       this.set(nextProps);
     }
-  },
+  }
+
+  bindFunctions() {
+    this.startOne = this.startOne.bind(this)
+    this.moveOne = this.moveOne.bind(this)
+    this.endOne = this.endOne.bind(this)
+    this.startTwo = this.startTwo.bind(this)
+    this.moveTwo = this.moveTwo.bind(this)
+    this.endTwo = this.endTwo.bind(this)
+    this.customPanResponder = this.customPanResponder.bind(this)
+  }
+
+  customPanResponder(start,move,end) {
+    return PanResponder.create({
+      onStartShouldSetPanResponder: (evt, gestureState) => true,
+      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
+      onMoveShouldSetPanResponder: (evt, gestureState) => true,
+      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
+      onPanResponderGrant: (evt, gestureState) => start(),
+      onPanResponderMove: (evt, gestureState) => move(gestureState),
+      onPanResponderTerminationRequest: (evt, gestureState) => false,
+      onPanResponderRelease: (evt, gestureState) => end(gestureState),
+      onPanResponderTerminate: (evt, gestureState) => end(gestureState),
+      onShouldBlockNativeResponder: (evt, gestureState) => true
+    })
+  };
 
   set(config) {
     var { max, min, optionsArray, step, values } = config || this.props;
@@ -113,21 +123,21 @@ var Slider = React.createClass({
       positionOne: initialValues[0],
       positionTwo: initialValues[1]
     });
-  },
+  }
 
   startOne () {
     this.props.onValuesChangeStart();
     this.setState({
       onePressed: !this.state.onePressed
     });
-  },
+  }
 
   startTwo () {
     this.props.onValuesChangeStart();
     this.setState({
       twoPressed: !this.state.twoPressed
     });
-  },
+  }
 
   moveOne(gestureState) {
     var unconfined = gestureState.dx + this.state.pastOne;
@@ -154,7 +164,7 @@ var Slider = React.createClass({
         this.props.onValuesChange(change);
       });
     }
-  },
+  }
 
   moveTwo(gestureState) {
     var unconfined  = gestureState.dx + this.state.pastTwo;
@@ -176,7 +186,7 @@ var Slider = React.createClass({
         this.props.onValuesChange([this.state.valueOne,this.state.valueTwo]);
       });
     }
-  },
+  }
 
   endOne(gestureState) {
     this.setState({
@@ -189,7 +199,7 @@ var Slider = React.createClass({
       }
       this.props.onValuesChangeFinish(change);
     });
-  },
+  }
 
   endTwo(gestureState) {
     this.setState({
@@ -198,7 +208,12 @@ var Slider = React.createClass({
     }, function () {
       this.props.onValuesChangeFinish([this.state.valueOne,this.state.valueTwo]);
     });
-  },
+  }
+
+  onPressTrack = (e) => {
+    if ( this.props.onPressTrack )
+      this.props.onPressTrack(e);
+  }
 
   render() {
     var {positionOne, positionTwo} = this.state;
@@ -224,58 +239,58 @@ var Slider = React.createClass({
     };
 
     return (
-      <View style={[styles.container, this.props.containerStyle]}>
-        <View style={[styles.fullTrack, { width: sliderLength }]}>
-          <View style={[this.props.trackStyle, styles.track, trackOneStyle, { width: trackOneLength }]} />
-          <View style={[this.props.trackStyle, styles.track, trackTwoStyle, { width: trackTwoLength }]} />
-          { twoMarkers && (
-            <View style={[this.props.trackStyle, styles.track, trackThreeStyle, { width: trackThreeLength }]} />
-          ) }
-
+      <View
+        style={[styles.row, this.props.containerStyle, { width: sliderLength }]}
+      >
+        <TouchableWithoutFeedback
+          onPress={ this.onPressTrack }
+        >
+          <View style={styles.row}>
+            <View style={[this.props.trackStyle, styles.track, trackOneStyle, { width: trackOneLength }]} />
+            <View style={[this.props.trackStyle, styles.track, trackTwoStyle, { width: trackTwoLength }]} />
+          </View>
+        </TouchableWithoutFeedback>
+        { twoMarkers && (
+          <View style={[this.props.trackStyle, styles.track, trackThreeStyle, { width: trackThreeLength }]} />
+        ) }
+
+
+        <View
+          style={[styles.touch, touchStyle, {left: -(trackTwoLength + trackThreeLength + width / 2)}]}
+          {...this._panResponderOne.panHandlers}
+          >
+          <Marker
+            pressed={this.state.onePressed}
+            value={this.state.valueOne}
+            markerStyle={this.props.markerStyle}
+            pressedMarkerStyle={this.props.pressedMarkerStyle}
+            />
+        </View>
 
+        { twoMarkers && (positionOne !== this.props.sliderLength) && (
           <View
-            style={[styles.touch, touchStyle, {left: -(trackTwoLength + trackThreeLength + width / 2)}]}
-            ref={component => this._markerOne = component}
-            {...this._panResponderOne.panHandlers}
+            style={[styles.touch, touchStyle, {left: -(trackThreeLength + width * 1.5)}]}
+            {...this._panResponderTwo.panHandlers}
             >
             <Marker
-              pressed={this.state.onePressed}
+              pressed={this.state.twoPressed}
               value={this.state.valueOne}
               markerStyle={this.props.markerStyle}
               pressedMarkerStyle={this.props.pressedMarkerStyle}
               />
           </View>
-
-          { twoMarkers && (positionOne !== this.props.sliderLength) && (
-            <View
-              style={[styles.touch, touchStyle, {left: -(trackThreeLength + width * 1.5)}]}
-              ref={component => this._markerTwo = component}
-              {...this._panResponderTwo.panHandlers}
-              >
-              <Marker
-                pressed={this.state.twoPressed}
-                value={this.state.valueOne}
-                markerStyle={this.props.markerStyle}
-                pressedMarkerStyle={this.props.pressedMarkerStyle}
-                />
-            </View>
-          ) }
-
-        </View>
+        ) }
       </View>
     );
   }
-});
+};
 
 module.exports = Slider;
 
 
 var styles = StyleSheet.create({
-  container: {
-    justifyContent: 'center',
-  },
-  fullTrack: {
-    flexDirection: 'row',
+  row: {
+    flexDirection: 'row'
   },
   track: {
     justifyContent: 'center'
diff --git a/customMarker.js b/customMarker.js
index 4b44cd5..b560dcf 100644
--- a/customMarker.js
+++ b/customMarker.js
@@ -2,21 +2,19 @@
 
 var React = require('react');
 var ReactNative = require('react-native');
-var {
-  PropTypes
-} = React;
+var PropTypes = require('prop-types');
 var {
   StyleSheet,
   Image
 } = ReactNative;
 
-var CustomMarker = React.createClass({
+class CustomMarker extends React.PureComponent({
 
-  propTypes: {
+  static propTypes = {
     pressed: PropTypes.bool,
-  },
+  }
 
-  render: function () {
+  render() {
     return (
       <Image
         style={styles.image}
@@ -25,7 +23,7 @@ var CustomMarker = React.createClass({
       />
     );
   }
-});
+};
 
 var styles = StyleSheet.create({
   image: {
diff --git a/mockProps.js b/mockProps.js
index 34b97cb..6b824c5 100644
--- a/mockProps.js
+++ b/mockProps.js
@@ -2,29 +2,28 @@
 
 var React = require('react');
 var ReactNative = require('react-native');
+var PropTypes = require('prop-types');
 var {
-  PropTypes
-} = React;
-var {
-  View
+  View,
+  ViewPropTypes
 } = ReactNative;
 
-var BasicMarker = React.createClass({
+class BasicMarker extends React.Component {
 
-  propTypes: {
+  static propTypes = {
     pressed: PropTypes.bool,
-    pressedMarkerStyle: View.propTypes.style,
-    markerStyle: View.propTypes.style
-  },
+    pressedMarkerStyle: ViewPropTypes.style,
+    markerStyle: ViewPropTypes.style
+  }
 
-  render: function () {
+  render() {
     return (
       <View
         style={[this.props.markerStyle, this.props.pressed && this.props.pressedMarkerStyle]}
       />
     );
   }
-});
+};
 
 var mockProps = {
   values: [0],