diff --git a/Example/app.js b/Example/app.js
index 2c514bc..d45917f 100644
--- a/Example/app.js
+++ b/Example/app.js
@@ -135,6 +135,14 @@ var SliderExample = React.createClass({
thumbTouchSize={{width: 50, height: 40}}
/>
+
+
+
);
},
@@ -281,7 +289,7 @@ var customStyles7 = StyleSheet.create({
var customStyles8 = StyleSheet.create({
container: {
- height: 20,
+ height: 30,
},
track: {
height: 2,
@@ -299,4 +307,15 @@ var customStyles8 = StyleSheet.create({
}
});
+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);
diff --git a/Example/img/thumb.png b/Example/img/thumb.png
new file mode 100644
index 0000000..8151bcf
Binary files /dev/null and b/Example/img/thumb.png differ
diff --git a/Example/img/thumb@2x.png b/Example/img/thumb@2x.png
new file mode 100644
index 0000000..4f64cc2
Binary files /dev/null and b/Example/img/thumb@2x.png differ
diff --git a/Example/img/thumb@3x.png b/Example/img/thumb@3x.png
new file mode 100644
index 0000000..85c2631
Binary files /dev/null and b/Example/img/thumb@3x.png differ
diff --git a/README.md b/README.md
index 1eac726..d13e06f 100644
--- a/README.md
+++ b/README.md
@@ -92,6 +92,7 @@ onSlidingComplete | function | Yes | | Callba
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).
diff --git a/Screenshots/basic.png b/Screenshots/basic.png
index 544d8db..8d36d05 100644
Binary files a/Screenshots/basic.png and b/Screenshots/basic.png differ
diff --git a/Screenshots/basic@2x.png b/Screenshots/basic@2x.png
index 88dd084..5db99e6 100644
Binary files a/Screenshots/basic@2x.png and b/Screenshots/basic@2x.png differ
diff --git a/Screenshots/basic_android_xxhdpi.png b/Screenshots/basic_android_xxhdpi.png
index e266338..ba0d98c 100644
Binary files a/Screenshots/basic_android_xxhdpi.png and b/Screenshots/basic_android_xxhdpi.png differ
diff --git a/Screenshots/debug_thumb_touch_size@2x.png b/Screenshots/debug_thumb_touch_size@2x.png
index 35a93cc..6b622a3 100644
Binary files a/Screenshots/debug_thumb_touch_size@2x.png and b/Screenshots/debug_thumb_touch_size@2x.png differ
diff --git a/src/Slider.js b/src/Slider.js
index d534825..92d9434 100644
--- a/src/Slider.js
+++ b/src/Slider.js
@@ -7,6 +7,7 @@ import React, {
import {
Animated,
+ Image,
StyleSheet,
PanResponder,
View,
@@ -143,6 +144,11 @@ var Slider = React.createClass({
*/
thumbStyle: View.propTypes.style,
+ /**
+ * Sets an image for the thumb.
+ */
+ thumbImage: Image.propTypes.source,
+
/**
* Set this to true to visually see the thumb touch rect in green.
*/
@@ -230,6 +236,7 @@ var Slider = React.createClass({
minimumTrackTintColor,
maximumTrackTintColor,
thumbTintColor,
+ thumbImage,
styles,
style,
trackStyle,
@@ -278,7 +285,9 @@ var Slider = React.createClass({
...valueVisibleStyle
}
]}
- />
+ >
+ {this._renderThumbImage()}
+
@@ -496,6 +505,14 @@ var Slider = React.createClass({
pointerEvents='none'
/>
);
+ },
+
+ _renderThumbImage() {
+ var {thumbImage} = this.props;
+
+ if (!thumbImage) return;
+
+ return ;
}
});