support custom track & handle style, for react-tiny

README.md

@@ -107,6 +107,9 @@ The following APIs are shared by Slider and Range.
 | onAfterChange | Function | NOOP | `onAfterChange` will be triggered when `ontouchend` or `onmouseup` is triggered. |
 | minimumTrackTintColor | String |  | The color used for the track to the left of the button. |
 | maximumTrackTintColor | String |  | The color used for the track to the right of the button. |
+| handleColor | String |  | The color used for background of handle. |
+| handleSize | Number | 14 | The size used for handle. |
+| trackSize | Number | 4 | The size used for height of track. |
 
 ### Slider
 

examples/slider.js

@@ -101,6 +101,10 @@ ReactDOM.render(
       <p>Basic Slider without tooltip</p>
       <Slider tipFormatter={null} onChange={log} />
     </div>
+    <div style={style}>
+      <p>Slider with custom handle and track style</p>
+      <Slider defaultValue={30} trackSize={6} handleSize={20} handleColor="#96dbfa" />
+    </div>
     <div style={style}>
       <p>Basic Slider, disabled</p>
       <Slider tipTransitionName="rc-slider-tooltip-zoom-down" onChange={log} disabled />

src/Handle.jsx

@@ -3,12 +3,22 @@ import React, { PropTypes } from 'react';
 export default class Handle extends React.Component {
   render() {
     const {
-      className, vertical, offset, minimumTrackTintColor, disabled, ...restProps,
+      className, vertical, offset, minimumTrackTintColor, handleColor, handleSize,
+      trackSize, disabled, ...restProps,
     } = this.props;
     const style = vertical ? { bottom: `${offset}%` } : { left: `${offset}%` };
     if (minimumTrackTintColor && !disabled) {
       style.borderColor = minimumTrackTintColor;
     }
+    if (handleColor) {
+      style.backgroundColor = handleColor;
+    }
+    if (handleSize) { // handleSize > 0
+      style.width = handleSize;
+      style.height = handleSize;
+      style.marginLeft = -handleSize / 2;
+      style.marginTop = -(handleSize - trackSize) / 2;
+    }
     return <div {...restProps} className={className} style={style} />;
   }
 }
@@ -18,5 +28,8 @@ Handle.propTypes = {
   vertical: PropTypes.bool,
   offset: PropTypes.number,
   minimumTrackTintColor: PropTypes.string,
+  handleColor: PropTypes.string,
+  handleSize: PropTypes.number,
+  trackSize: PropTypes.number,
   disabled: PropTypes.bool,
 };

src/Slider.jsx

@@ -110,6 +110,9 @@ class Slider extends React.Component {
       included,
       disabled,
       minimumTrackTintColor,
+      handleColor,
+      handleSize,
+      trackSize,
       handle: handleGenerator,
     } = this.props;
     const { value, dragging } = this.state;
@@ -121,6 +124,9 @@ class Slider extends React.Component {
       value,
       dragging,
       disabled,
+      handleColor,
+      handleSize,
+      trackSize,
       minimumTrackTintColor,
       ref: h => this.saveHandle(0, h),
     });
@@ -130,6 +136,7 @@ class Slider extends React.Component {
         vertical={vertical}
         included={included}
         offset={0}
+        size={trackSize}
         disabled={disabled}
         length={offset}
         minimumTrackTintColor={minimumTrackTintColor}

src/common/Track.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const Track = ({
-  className, included, vertical, offset, length, minimumTrackTintColor, disabled,
+  className, included, vertical, offset, size, length, minimumTrackTintColor, disabled,
 }) => {
   const style = {
     visibility: included ? 'visible' : 'hidden',
@@ -16,6 +16,10 @@ const Track = ({
   if (minimumTrackTintColor && !disabled) {
     style.backgroundColor = minimumTrackTintColor;
   }
+  if (size) { // size > 0
+    style.height = size;
+  }
+
   return <div className={className} style={style} />;
 };
 

src/common/createSlider.jsx

@@ -31,6 +31,10 @@ export default function createSlider(Component) {
       vertical: PropTypes.bool,
       style: PropTypes.object,
       maximumTrackTintColor: PropTypes.string,
+      minimumTrackTintColor: PropTypes.string,
+      handleColor: PropTypes.string,
+      handleSize: PropTypes.number,
+      trackSize: PropTypes.number,
     };
 
     static defaultProps = {
@@ -53,6 +57,8 @@ export default function createSlider(Component) {
       disabled: false,
       dots: false,
       vertical: false,
+      handleSize: 14,
+      trackSize: 4,
     };
 
     constructor(props) {
@@ -208,6 +214,7 @@ export default function createSlider(Component) {
         max,
         children,
         maximumTrackTintColor,
+        trackSize,
         style,
       } = this.props;
       const { tracks, handles } = super.render();
@@ -224,6 +231,10 @@ export default function createSlider(Component) {
         backgroundColor: maximumTrackTintColor,
       } : {};
 
+      if (trackSize) {
+        trackStyle.height = trackSize;
+      }
+
       return (
         <div
           ref={this.saveSlider}

tests/__snapshots__/Range.test.js.snap

@@ -2,7 +2,8 @@ exports[`Range should render Multi-Range with correct DOM structure 1`] = `
 <div
   class="rc-slider">
   <div
-    class="rc-slider-rail" />
+    class="rc-slider-rail"
+    style="height:4px;" />
   <div
     class="rc-slider-track rc-slider-track-1"
     style="visibility:visible;left:0%;width:0%;" />
@@ -35,7 +36,8 @@ exports[`Range should render Range with correct DOM structure 1`] = `
 <div
   class="rc-slider">
   <div
-    class="rc-slider-rail" />
+    class="rc-slider-rail"
+    style="height:4px;" />
   <div
     class="rc-slider-track rc-slider-track-1"
     style="visibility:visible;left:0%;width:0%;" />

tests/__snapshots__/Slider.test.js.snap

@@ -2,15 +2,16 @@ exports[`Slider should render Slider with correct DOM structure 1`] = `
 <div
   class="rc-slider">
   <div
-    class="rc-slider-rail" />
+    class="rc-slider-rail"
+    style="height:4px;" />
   <div
     class="rc-slider-track"
-    style="visibility:visible;left:0%;width:0%;" />
+    style="visibility:visible;left:0%;width:0%;height:4px;" />
   <div
     class="rc-slider-step" />
   <div
     class="rc-slider-handle"
-    style="left:0%;" />
+    style="left:0%;width:14px;height:14px;margin-left:-7px;margin-top:-5px;" />
   <div
     class="rc-slider-mark" />
 </div>