Improved SliderIOS

Summary: public

* No longer sends events when not observing valueChanged.
* Snaps to step value while dragging.
* Added additional example to UIExplorer.

Reviewed By: javache

Differential Revision: D2595594

fb-gh-sync-id: 1e92427d2ab2e71e4eb4a9a7a75cd0f5f4a3a529

Libraries/Components/SliderIOS/SliderIOS.ios.js

@@ -88,17 +88,6 @@ var SliderIOS = React.createClass({
     onSlidingComplete: PropTypes.func,
   },
 
-  _onValueChange: function(event: Event) {
-    this.props.onChange && this.props.onChange(event);
-    if (event.nativeEvent.continuous) {
-      this.props.onValueChange &&
-        this.props.onValueChange(event.nativeEvent.value);
-    } else {
-      this.props.onSlidingComplete && event.nativeEvent.value !== undefined &&
-        this.props.onSlidingComplete(event.nativeEvent.value);
-    }
-  },
-
   getDefaultProps: function() : any {
     return {
       disabled: false,
@@ -106,17 +95,26 @@ var SliderIOS = React.createClass({
   },
 
   render: function() {
+
+    let onValueChange = this.props.onValueChange && ((event: Event) => {
+      this.props.onValueChange &&
+        this.props.onValueChange(event.nativeEvent.value);
+    });
+
+    let onSlidingComplete = this.props.onSlidingComplete && ((event: Event) => {
+      this.props.onSlidingComplete &&
+        this.props.onSlidingComplete(event.nativeEvent.value);
+    });
+
+    let {style, ...props} = this.props;
+    style = [styles.slider, this.props.style];
+
     return (
       <RCTSlider
-        style={[styles.slider, this.props.style]}
-        value={this.props.value}
-        step={this.props.step}
-        maximumValue={this.props.maximumValue}
-        minimumValue={this.props.minimumValue}
-        minimumTrackTintColor={this.props.minimumTrackTintColor}
-        maximumTrackTintColor={this.props.maximumTrackTintColor}
-        disabled={this.props.disabled}
-        onChange={this._onValueChange}
+        {...props}
+        style={style}
+        onValueChange={onValueChange}
+        onSlidingComplete={onSlidingComplete}
       />
     );
   }
@@ -128,8 +126,6 @@ var styles = StyleSheet.create({
   },
 });
 
-var RCTSlider = requireNativeComponent('RCTSlider', SliderIOS, {
-  nativeOnly: { onChange: true },
-});
+var RCTSlider = requireNativeComponent('RCTSlider', SliderIOS);
 
 module.exports = SliderIOS;