Add option for both min/max track image.

Summary:
This is a followup to PR facebook#3850 but now separates min/max track images into different properties.
Closes facebook#4476

Add examples for `minimumTrackTintColor`, `maximumTrackTintColor`, `minimumTrackImage`, `maximumTrackImage` to UIExplorer.
Closes facebook#4586

Reviewed By: svcscm

Differential Revision: D2779193

Pulled By: nicklockwood

fb-gh-sync-id: 0510a0f496816baacdd0d4be0f3cd3a63a5a9865

Author: christopherdro

Examples/UIExplorer/SliderIOSExample.js

@@ -84,10 +84,38 @@ exports.examples = [
       return <SliderExample step={0.25} />;
     }
   },
+  {
+    title: 'Custom min/max track tint color',
+    render(): ReactElement {
+      return (
+        <SliderExample
+          minimumTrackTintColor={'red'}
+          maximumTrackTintColor={'green'}
+        />
+      );
+    }
+  },
   {
     title: 'Custom thumb image',
     render(): ReactElement {
-      return <SliderExample thumbImage={require('image!uie_thumb_big')} />;
+      return <SliderExample thumbImage={require('./uie_thumb_big.png')} />;
     }
-  }
+  },
+  {
+    title: 'Custom track image',
+    render(): ReactElement {
+      return <SliderExample trackImage={require('./slider.png')} />;
+    }
+  },
+  {
+    title: 'Custom min/max track image',
+    render(): ReactElement {
+      return (
+        <SliderExample
+          minimumTrackImage={require('./slider-left.png')}
+          maximumTrackImage={require('./slider-right.png')}
+        />
+      );
+    }
+  },
 ];

Examples/UIExplorer/UIExplorer/Images.xcassets/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

Examples/UIExplorer/slider-left.png

@@ -78,11 +78,24 @@ var SliderIOS = React.createClass({
      */
     disabled: PropTypes.bool,
 
-   /**
-     * Sets an image for the track. It only supports images that are included as assets
+    /**
+     * Assigns a single image for the track. Only static images are supported.
+     * The center pixel of the image will be stretched to fill the track.
      */
     trackImage: Image.propTypes.source,
 
+    /**
+     * Assigns a minimum track image. Only static images are supported. The
+     * rightmost pixel of the image will be stretched to fill the track.
+     */
+    minimumTrackImage: Image.propTypes.source,
+
+    /**
+     * Assigns a maximum track image. Only static images are supported. The
+     * leftmost pixel of the image will be stretched to fill the track.
+     */
+    maximumTrackImage: Image.propTypes.source,
+
     /**
      * Sets an image for the thumb. It only supports static images.
      */
@@ -107,28 +120,18 @@ var SliderIOS = React.createClass({
   },
 
   render: function() {
+    let {style, onValueChange, onSlidingComplete, ...props} = this.props;
+    props.style = [styles.slider, style];
 
-    let onValueChange = this.props.onValueChange && ((event: Event) => {
-      this.props.onValueChange &&
-        this.props.onValueChange(event.nativeEvent.value);
+    props.onValueChange = onValueChange && ((event: Event) => {
+      onValueChange && onValueChange(event.nativeEvent.value);
     });
 
-    let onSlidingComplete = this.props.onSlidingComplete && ((event: Event) => {
-      this.props.onSlidingComplete &&
-        this.props.onSlidingComplete(event.nativeEvent.value);
+    props.onSlidingComplete = onSlidingComplete && ((event: Event) => {
+      onSlidingComplete && onSlidingComplete(event.nativeEvent.value);
     });
 
-    let {style, ...props} = this.props;
-    style = [styles.slider, style];
-
-    return (
-      <RCTSlider
-        {...props}
-        style={style}
-        onValueChange={onValueChange}
-        onSlidingComplete={onSlidingComplete}
-      />
-    );
+    return <RCTSlider {...props}/>;
   }
 });
 

Examples/UIExplorer/slider-left@2x.png

@@ -20,6 +20,9 @@
 @property (nonatomic, assign) float lastValue;
 
 @property (nonatomic, strong) UIImage *trackImage;
+@property (nonatomic, strong) UIImage *minimumTrackImage;
+@property (nonatomic, strong) UIImage *maximumTrackImage;
+
 @property (nonatomic, strong) UIImage *thumbImage;