Add custom track component support

.gitignore

@@ -35,3 +35,5 @@ local.properties
 node_modules/
 npm-debug.log
 lib
+
+package-lock.json

Example/app.js

@@ -11,6 +11,7 @@ var {
  View,
  SliderIOS,
 } = ReactNative;
+import { LinearGradient } from 'expo';
 
 var DEFAULT_VALUE = 0.2;
 
@@ -143,6 +144,51 @@ var SliderExample = React.createClass({
  thumbTintColor='#0c6692'
  />
  </SliderContainer>
+ <SliderContainer caption='<Slider/> with custom components (LinearGradient)'>
+ <Slider
+ minimumValue={1}
+ maximumValue={100}
+ step={1}
+ customMinimumTrack={(
+ <LinearGradient
+ start={{x: .74, y: .26}}
+ end={{x: 0, y: .77}}
+ colors={['#ff8960', '#ff62a5']}
+ style={{
+ width: '100%',
+ height: '100%',
+ }}
+ />
+ )}
+ customMinimumTrack={(
+ <LinearGradient
+ start={{x: .74, y: .26}}
+ end={{x: 0, y: .77}}
+ colors={['#efefef', '#c1c0c9']}
+ style={{
+ width: '100%',
+ height: '100%',
+ }}
+ />
+ )}
+ customThumb={(
+ <LinearGradient
+ start={{x: .74, y: .26}}
+ end={{x: 0, y: .77}}
+ colors={['#ff8960', '#ff62a5']}
+ style={{
+ width: 36,
+ height: 36,
+ margin: 2,
+ borderRadius: 36 / 2,
+ borderWidth: 4,
+ borderColor: '#fff',
+ elevation: 1
+ }}
+ />
+ )}
+ />
+ </SliderContainer>
  </ScrollView>
  );
  },

README.md

@@ -73,28 +73,30 @@ Try this example [live on Expo Snack](https://snack.expo.io/HkbAqpbwb).
 
 ## Props
 
-Prop | Type | Optional | Default | Description
---------------------- | -------- | -------- | ------------------------- | -----------
-value | number | Yes | 0 | Initial value of the slider
-disabled | bool | Yes | false | If true the user won't be able to move the slider
-minimumValue | number | Yes | 0 | Initial minimum value of the slider
-maximumValue | number | Yes | 1 | Initial maximum value of the slider
-step | number | Yes | 0 | Step value of the slider. The value should be between 0 and maximumValue - minimumValue)
-minimumTrackTintColor | string | Yes | '#3f3f3f' | The color used for the track to the left of the button
-maximumTrackTintColor | string | Yes | '#b3b3b3' | The color used for the track to the right of the button
-thumbTintColor | string | Yes | '#343434' | The color used for the thumb
-thumbTouchSize | object | Yes | `{width: 40, height: 40}` | The size of the touch area that allows moving the thumb. The touch area has the same center as the visible thumb. This allows to have a visually small thumb while still allowing the user to move it easily.
-onValueChange | function | Yes | | Callback continuously called while the user is dragging the slider
-onSlidingStart | function | Yes | | Callback called when the user starts changing the value (e.g. when the slider is pressed)
-onSlidingComplete | function | Yes | | Callback called when the user finishes changing the value (e.g. when the slider is released)
-style | [style](http://facebook.github.io/react-native/docs/view.html#style) | Yes | | The style applied to the slider container
-trackStyle | [style](http://facebook.github.io/react-native/docs/view.html#style) | Yes | | The style applied to the track
-thumbStyle | [style](http://facebook.github.io/react-native/docs/view.html#style) | Yes | | The style applied to the thumb
-thumbImage | [source](http://facebook.github.io/react-native/docs/image.html#source) | Yes | | Sets an image for the thumb.
-debugTouchArea | bool | Yes | false | Set this to true to visually see the thumb touch rect in green.
-animateTransitions | bool | Yes | false | Set to true if you want to use the default 'spring' animation
-animationType | string | Yes | 'timing' | Set to 'spring' or 'timing' to use one of those two types of animations with the default [animation properties](https://facebook.github.io/react-native/docs/animations.html).
-animationConfig | object | Yes | undefined | Used to configure the animation parameters. These are the same parameters in the [Animated library](https://facebook.github.io/react-native/docs/animations.html). 
+Prop | Type | Optional | Default | Description
+--------------------- | --------- | -------- | ------------------------- | -----------
+value | number | Yes | 0 | Initial value of the slider
+disabled | bool | Yes | false | If true the user won't be able to move the slider
+minimumValue | number | Yes | 0 | Initial minimum value of the slider
+customMinimumTrack | number | Yes | 1 | Initial maximum value of the slider
+step | number | Yes | 0 | Step value of the slider. The value should be between 0 and maximumValue - minimumValue)
+minimumTrackTintColor | string | Yes | '#3f3f3f' | The color used for the track to the left of the button
+customMinimumTrack | component | Yes | | Sets an custom component used for the track to the left of the button.
+maximumTrackTintColor | string | Yes | '#b3b3b3' | The color used for the track to the right of the button
+customMaximumTrack | component | Yes | | Sets an custom component used for the track to the right of the button.
+thumbTintColor | string | Yes | '#343434' | The color used for the thumb
+thumbTouchSize | object | Yes | `{width: 40, height: 40}` | The size of the touch area that allows moving the thumb. The touch area has the same center as the visible thumb. This allows to have a visually small thumb while still allowing the user to move it easily.
+onValueChange | function | Yes | | Callback continuously called while the user is dragging the slider
+onSlidingStart | function | Yes | | Callback called when the user starts changing the value (e.g. when the slider is pressed)
+onSlidingComplete | function | Yes | | Callback called when the user finishes changing the value (e.g. when the slider is released)
+style | [style](http://facebook.github.io/react-native/docs/view.html#style) | Yes | | The style applied to the slider container
+trackStyle | [style](http://facebook.github.io/react-native/docs/view.html#style) | Yes | | The style applied to the track
+thumbStyle | [style](http://facebook.github.io/react-native/docs/view.html#style) | Yes | | The style applied to the thumb
+customThumb | component | Yes | | Sets an custom component for the thumb.
+debugTouchArea | bool | Yes | false | Set this to true to visually see the thumb touch rect in green.
+animateTransitions | bool | Yes | false | Set to true if you want to use the default 'spring' animation
+animationType | string | Yes | 'timing' | Set to 'spring' or 'timing' to use one of those two types of animations with the default [animation properties](https://facebook.github.io/react-native/docs/animations.html).
+animationConfig | object | Yes | undefined | Used to configure the animation parameters. These are the same parameters in the [Animated library](https://facebook.github.io/react-native/docs/animations.html). 
 
 
 ---

package.json

@@ -1,13 +1,13 @@
 {
- "name": "react-native-slider",
+ "name": "react-native-slider-custom",
  "version": "0.11.0",
- "description": "A pure JavaScript <Slider /> component for react-native",
- "main": "lib/Slider.js",
+ "description": "A pure JavaScript <Slider /> component for react-native [Custom]",
+ "main": "src/Slider.js",
  "files": [
  "lib",
  "src"
  ],
- "author": "Jean Regisser <jean.regisser@gmail.com> (https://github.com/jeanregisser)",
+ "author": "Emmanuel Mota <emmanuellmota@gmail.com> forked from jeanregisser/react-native-slider",
  "keywords": [
  "react-component",
  "react-native",