support custom track & handle style, for react-tiny

README.md

@@ -105,8 +105,9 @@ The following APIs are shared by Slider and Range.
 | onBeforeChange | Function | NOOP | `onBeforeChange` will be triggered when `ontouchstart` or `onmousedown` is triggered. |
 | onChange | Function | NOOP | `onChange` will be triggered while the value of Slider changing. |
 | 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. |
+| minimumTrackStyle | Object |`{}` | The style used for the track to the left of the button. |
+| maximumTrackStyle | Object | `{}` | The style used for the track to the right of the button. |
+| handleStyle | Object | `{}` | The style used for handle. |
 
 ### Slider
 

assets/index.less

@@ -34,6 +34,7 @@
     width: 100%;
     background-color: #e9e9e9;
     height: 4px;
+    border-radius: @border-radius-base;
   }
 
   &-track {
@@ -286,4 +287,4 @@
     border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
     border-top-color: @tooltip-arrow-color;
   }
-}
+}

examples/slider.js

@@ -101,6 +101,22 @@ 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}
+        maximumTrackStyle={{ backgroundColor: 'red', height: 10 }}
+        minimumTrackStyle={{ backgroundColor: 'blue', height: 10 }}
+        handleStyle={{
+          borderColor: 'blue',
+          height: 28,
+          width: 28,
+          marginLeft: -14,
+          marginTop: -9,
+          backgroundColor: 'blue',
+        }}
+      />
+    </div>
     <div style={style}>
       <p>Basic Slider, disabled</p>
       <Slider tipTransitionName="rc-slider-tooltip-zoom-down" onChange={log} disabled />

package.json

@@ -1,6 +1,5 @@
 {
   "name": "rc-slider",
-
   "version": "6.3.1",
   "description": "Slider UI component for React",
   "keywords": [
@@ -26,7 +25,10 @@
   "license": "MIT",
   "main": "./lib/index.js",
   "entry": {
-    "rc-slider": ["./assets/index.less", "./src/index.js"]
+    "rc-slider": [
+      "./assets/index.less",
+      "./src/index.js"
+    ]
   },
   "style": "./assets/index.css",
   "config": {
@@ -66,6 +68,7 @@
   "dependencies": {
     "babel-runtime": "6.x",
     "classnames": "^2.2.5",
+    "object-assign": "^4.1.1",
     "rc-tooltip": "^3.4.2",
     "rc-util": "^4.0.0",
     "warning": "^3.0.0"

src/Handle.jsx

@@ -1,22 +1,19 @@
 import React, { PropTypes } from 'react';
+import assign from 'object-assign';
 
 export default class Handle extends React.Component {
   render() {
     const {
-      className, vertical, offset, minimumTrackTintColor, disabled, ...restProps,
+      className, vertical, offset, handleStyle, ...restProps,
     } = this.props;
     const style = vertical ? { bottom: `${offset}%` } : { left: `${offset}%` };
-    if (minimumTrackTintColor && !disabled) {
-      style.borderColor = minimumTrackTintColor;
-    }
-    return <div {...restProps} className={className} style={style} />;
+    return <div {...restProps} className={className} style={assign({}, style, handleStyle)} />;
   }
 }
 
 Handle.propTypes = {
   className: PropTypes.string,
   vertical: PropTypes.bool,
   offset: PropTypes.number,
-  minimumTrackTintColor: PropTypes.string,
-  disabled: PropTypes.bool,
+  handleStyle: PropTypes.object,
 };

src/Slider.jsx

@@ -109,7 +109,8 @@ class Slider extends React.Component {
       vertical,
       included,
       disabled,
-      minimumTrackTintColor,
+      minimumTrackStyle,
+      handleStyle,
       handle: handleGenerator,
     } = this.props;
     const { value, dragging } = this.state;
@@ -121,7 +122,7 @@ class Slider extends React.Component {
       value,
       dragging,
       disabled,
-      minimumTrackTintColor,
+      handleStyle,
       ref: h => this.saveHandle(0, h),
     });
     const track = (
@@ -130,9 +131,8 @@ class Slider extends React.Component {
         vertical={vertical}
         included={included}
         offset={0}
-        disabled={disabled}
         length={offset}
-        minimumTrackTintColor={minimumTrackTintColor}
+        minimumTrackStyle={minimumTrackStyle}
       />
     );
 

src/common/Track.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
+import assign from 'object-assign';
 
 const Track = ({
-  className, included, vertical, offset, length, minimumTrackTintColor, disabled,
+  className, included, vertical, offset, length, minimumTrackStyle,
 }) => {
   const style = {
     visibility: included ? 'visible' : 'hidden',
@@ -13,10 +14,8 @@ const Track = ({
     style.left = `${offset}%`;
     style.width = `${length}%`;
   }
-  if (minimumTrackTintColor && !disabled) {
-    style.backgroundColor = minimumTrackTintColor;
-  }
-  return <div className={className} style={style} />;
+
+  return <div className={className} style={assign({}, style, minimumTrackStyle)} />;
 };
 
 export default Track;

src/common/createSlider.jsx

@@ -30,7 +30,9 @@ export default function createSlider(Component) {
       dots: PropTypes.bool,
       vertical: PropTypes.bool,
       style: PropTypes.object,
-      maximumTrackTintColor: PropTypes.string,
+      minimumTrackStyle: PropTypes.object,
+      maximumTrackStyle: PropTypes.object,
+      handleStyle: PropTypes.object,
     };
 
     static defaultProps = {
@@ -53,6 +55,9 @@ export default function createSlider(Component) {
       disabled: false,
       dots: false,
       vertical: false,
+      minimumTrackStyle: {},
+      maximumTrackStyle: {},
+      handleStyle: {},
     };
 
     constructor(props) {
@@ -207,7 +212,7 @@ export default function createSlider(Component) {
         min,
         max,
         children,
-        maximumTrackTintColor,
+        maximumTrackStyle,
         style,
       } = this.props;
       const { tracks, handles } = super.render();
@@ -220,10 +225,6 @@ export default function createSlider(Component) {
         [className]: className,
       });
 
-      const trackStyle = maximumTrackTintColor && !disabled ? {
-        backgroundColor: maximumTrackTintColor,
-      } : {};
-
       return (
         <div
           ref={this.saveSlider}
@@ -232,7 +233,7 @@ export default function createSlider(Component) {
           onMouseDown={disabled ? noop : this.onMouseDown}
           style={style}
         >
-          <div className={`${prefixCls}-rail`} style={trackStyle} />
+          <div className={`${prefixCls}-rail`} style={maximumTrackStyle} />
           {tracks}
           <Steps
             prefixCls={prefixCls}