Updates

examples/common.js

@@ -30,7 +30,7 @@
 /******/ 	// "0" means "already loaded"
 /******/ 	// Array means "loading", array contains callbacks
 /******/ 	var installedChunks = {
-/******/ 		6:0
+/******/ 		7:0
 /******/ 	};
 /******/
 /******/ 	// The require function
@@ -76,7 +76,7 @@
 /******/ 			script.charset = 'utf-8';
 /******/ 			script.async = true;
 /******/
-/******/ 			script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"marks","1":"range","2":"slider","3":"v-marks","4":"v-range","5":"v-slider"}[chunkId]||chunkId) + ".js";
+/******/ 			script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"custom-handles","1":"marks","2":"range","3":"slider","4":"v-marks","5":"v-range","6":"v-slider"}[chunkId]||chunkId) + ".js";
 /******/ 			head.appendChild(script);
 /******/ 		}
 /******/ 	};
@@ -264,6 +264,9 @@
 	var queueIndex = -1;
 	
 	function cleanUpNextTick() {
+	    if (!draining || !currentQueue) {
+	        return;
+	    }
 	    draining = false;
 	    if (currentQueue.length) {
 	        queue = currentQueue.concat(queue);
@@ -20160,19 +20163,21 @@
 	      var tipFormatter = _props3.tipFormatter;
 	      var children = _props3.children;
 	
+	      var customHandle = this.props.handle;
+	
 	      var upperOffset = this.calcOffset(upperBound);
 	      var lowerOffset = this.calcOffset(lowerBound);
 	
 	      var handleClassName = prefixCls + '-handle';
 	      var isNoTip = step === null || tipFormatter === null;
 	
-	      var upper = _react2['default'].createElement(_Handle2['default'], { className: handleClassName,
+	      var upper = (0, _react.cloneElement)(customHandle, { className: handleClassName,
 	        noTip: isNoTip, tipTransitionName: tipTransitionName, tipFormatter: tipFormatter,
 	        vertical: vertical, offset: upperOffset, value: upperBound, dragging: handle === 'upperBound' });
 	
 	      var lower = null;
 	      if (range) {
-	        lower = _react2['default'].createElement(_Handle2['default'], { className: handleClassName,
+	        lower = (0, _react.cloneElement)(customHandle, { className: handleClassName,
 	          noTip: isNoTip, tipTransitionName: tipTransitionName, tipFormatter: tipFormatter,
 	          vertical: vertical, offset: lowerOffset, value: lowerBound, dragging: handle === 'lowerBound' });
 	      }
@@ -20217,6 +20222,7 @@
 	  onBeforeChange: _react2['default'].PropTypes.func,
 	  onChange: _react2['default'].PropTypes.func,
 	  onAfterChange: _react2['default'].PropTypes.func,
+	  handle: _react2['default'].PropTypes.element,
 	  tipTransitionName: _react2['default'].PropTypes.string,
 	  tipFormatter: _react2['default'].PropTypes.func,
 	  dots: _react2['default'].PropTypes.bool,
@@ -20233,6 +20239,7 @@
 	  max: 100,
 	  step: 1,
 	  marks: {},
+	  handle: _react2['default'].createElement(_Handle2['default'], null),
 	  onBeforeChange: noop,
 	  onChange: noop,
 	  onAfterChange: noop,
@@ -22328,8 +22335,8 @@
 /* 182 */
 /***/ function(module, exports) {
 
-	/* eslint-disable no-unused-vars */
 	'use strict';
+	/* eslint-disable no-unused-vars */
 	var hasOwnProperty = Object.prototype.hasOwnProperty;
 	var propIsEnumerable = Object.prototype.propertyIsEnumerable;
 	
@@ -22341,7 +22348,51 @@
 		return Object(val);
 	}
 	
-	module.exports = Object.assign || function (target, source) {
+	function shouldUseNative() {
+		try {
+			if (!Object.assign) {
+				return false;
+			}
+	
+			// Detect buggy property enumeration order in older V8 versions.
+	
+			// https://bugs.chromium.org/p/v8/issues/detail?id=4118
+			var test1 = new String('abc');  // eslint-disable-line
+			test1[5] = 'de';
+			if (Object.getOwnPropertyNames(test1)[0] === '5') {
+				return false;
+			}
+	
+			// https://bugs.chromium.org/p/v8/issues/detail?id=3056
+			var test2 = {};
+			for (var i = 0; i < 10; i++) {
+				test2['_' + String.fromCharCode(i)] = i;
+			}
+			var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
+				return test2[n];
+			});
+			if (order2.join('') !== '0123456789') {
+				return false;
+			}
+	
+			// https://bugs.chromium.org/p/v8/issues/detail?id=3056
+			var test3 = {};
+			'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
+				test3[letter] = letter;
+			});
+			if (Object.keys(Object.assign({}, test3)).join('') !==
+					'abcdefghijklmnopqrst') {
+				return false;
+			}
+	
+			return true;
+		} catch (e) {
+			// We don't expect any of the above to throw, but better to be safe.
+			return false;
+		}
+	}
+	
+	module.exports = shouldUseNative() ? Object.assign : function (target, source) {
 		var from;
 		var to = toObject(target);
 		var symbols;
@@ -22950,7 +23001,7 @@
 	    if (this.popupRendered) {
 	      var _ret = function () {
 	        var self = _this;
-	        _reactDom2["default"].unstable_renderSubtreeIntoContainer(_this, _this.getPopupElement(), _this.getPopupContainer(), function renderPopup() {
+	        self.popupInstance = _reactDom2["default"].unstable_renderSubtreeIntoContainer(_this, _this.getPopupElement(), _this.getPopupContainer(), function renderPopup() {
 	          /* eslint react/no-is-mounted:0 */
 	          if (this.isMounted()) {
 	            self.popupDomNode = this.getPopupDomNode();
@@ -22961,7 +23012,7 @@
 	            props.afterPopupVisibleChange(state.popupVisible);
 	          }
 	        });
-	        if (props.action.indexOf('click') !== -1) {
+	        if (_this.isClickToHide()) {
 	          if (state.popupVisible) {
 	            if (!_this.clickOutsideHandler) {
 	              _this.clickOutsideHandler = _rcUtil.Dom.addEventListener(document, 'mousedown', _this.onDocumentClick);
@@ -23001,12 +23052,21 @@
 	  onMouseEnter: function onMouseEnter() {
 	    this.delaySetPopupVisible(true, this.props.mouseEnterDelay);
 	  },
-	  onMouseLeave: function onMouseLeave() {
+	  onMouseLeave: function onMouseLeave(e) {
+	    // https://github.com/react-component/trigger/pull/13
+	    // react bug?
+	    if (e.relatedTarget && !e.relatedTarget.setTimeout && _rcUtil.Dom.contains(this.popupContainer, e.relatedTarget)) {
+	      return;
+	    }
 	    this.delaySetPopupVisible(false, this.props.mouseLeaveDelay);
 	  },
 	  onFocus: function onFocus() {
-	    this.focusTime = Date.now();
-	    this.delaySetPopupVisible(true, this.props.focusDelay);
+	    // incase focusin and focusout
+	    this.clearDelayTimer();
+	    if (this.isFocusToShow()) {
+	      this.focusTime = Date.now();
+	      this.delaySetPopupVisible(true, this.props.focusDelay);
+	    }
 	  },
 	  onMouseDown: function onMouseDown() {
 	    this.preClickTime = Date.now();
@@ -23015,7 +23075,10 @@
 	    this.preTouchTime = Date.now();
 	  },
 	  onBlur: function onBlur() {
-	    this.delaySetPopupVisible(false, this.props.blurDelay);
+	    this.clearDelayTimer();
+	    if (this.isBlurToHide()) {
+	      this.delaySetPopupVisible(false, this.props.blurDelay);
+	    }
 	  },
 	  onClick: function onClick(event) {
 	    // focus will trigger click
@@ -23093,9 +23156,12 @@
 	  getPopupElement: function getPopupElement() {
 	    var props = this.props;
 	    var state = this.state;
+	
 	    var mouseProps = {};
-	    if (props.action.indexOf('hover') !== -1) {
+	    if (this.isMouseEnterToShow()) {
 	      mouseProps.onMouseEnter = this.onMouseEnter;
+	    }
+	    if (this.isMouseLeaveToHide()) {
 	      mouseProps.onMouseLeave = this.onMouseLeave;
 	    }
 	    return _react2["default"].createElement(
@@ -23195,6 +23261,11 @@
 	
 	    return action.indexOf('focus') !== -1 || hideAction.indexOf('blur') !== -1;
 	  },
+	  forcePopupAlign: function forcePopupAlign() {
+	    if (this.state.popupVisible && this.popupInstance && this.popupInstance.alignInstance) {
+	      this.popupInstance.alignInstance.forceAlign();
+	    }
+	  },
 	  render: function render() {
 	    this.popupRendered = this.popupRendered || this.state.popupVisible;
 	    var props = this.props;
@@ -23214,10 +23285,8 @@
 	    if (this.isMouseLeaveToHide()) {
 	      newChildProps.onMouseLeave = (0, _rcUtil.createChainedFunction)(this.onMouseLeave, childProps.onMouseLeave);
 	    }
-	    if (this.isFocusToShow()) {
+	    if (this.isFocusToShow() || this.isBlurToHide()) {
 	      newChildProps.onFocus = (0, _rcUtil.createChainedFunction)(this.onFocus, childProps.onFocus);
-	    }
-	    if (this.isBlurToHide()) {
 	      newChildProps.onBlur = (0, _rcUtil.createChainedFunction)(this.onBlur, childProps.onBlur);
 	    }
 	
@@ -23370,6 +23439,7 @@
 	          {
 	            target: this.getTarget,
 	            key: 'popup',
+	            ref: this.saveAlign,
 	            monitorWindowResize: true,
 	            align: align,
 	            onAlign: this.onAlign
@@ -23398,6 +23468,7 @@
 	        {
 	          target: this.getTarget,
 	          key: 'popup',
+	          ref: this.saveAlign,
 	          monitorWindowResize: true,
 	          xVisible: visible,
 	          childrenProps: { visible: 'xVisible' },
@@ -23451,6 +23522,9 @@
 	    }
 	    return maskElement;
 	  },
+	  saveAlign: function saveAlign(align) {
+	    this.alignInstance = align;
+	  },
 	  render: function render() {
 	    return _react2["default"].createElement(
 	      'div',
@@ -23468,20 +23542,20 @@
 /* 194 */
 /***/ function(module, exports, __webpack_require__) {
 
-	// export this package's api
 	'use strict';
 	
-	Object.defineProperty(exports, '__esModule', {
+	Object.defineProperty(exports, "__esModule", {
 	  value: true
 	});
 	
-	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-	
 	var _Align = __webpack_require__(195);
 	
 	var _Align2 = _interopRequireDefault(_Align);
 	
-	exports['default'] = _Align2['default'];
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+	
+	exports["default"] = _Align2["default"]; // export this package's api
+	
 	module.exports = exports['default'];
 
 /***/ },
@@ -23490,12 +23564,10 @@
 
 	'use strict';
 	
-	Object.defineProperty(exports, '__esModule', {
+	Object.defineProperty(exports, "__esModule", {
 	  value: true
 	});
 	
-	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-	
 	var _react = __webpack_require__(3);
 	
 	var _react2 = _interopRequireDefault(_react);
@@ -23514,8 +23586,10 @@
 	
 	var _isWindow2 = _interopRequireDefault(_isWindow);
 	
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+	
 	function buffer(fn, ms) {
-	  var timer = undefined;
+	  var timer = void 0;
 	  return function bufferFn() {
 	    if (timer) {
 	      clearTimeout(timer);
@@ -23524,7 +23598,7 @@
 	  };
 	}
 	
-	var Align = _react2['default'].createClass({
+	var Align = _react2["default"].createClass({
 	  displayName: 'Align',
 	
 	  propTypes: {
@@ -23544,37 +23618,31 @@
 	        return window;
 	      },
 	      onAlign: function onAlign() {},
+	
 	      monitorBufferTime: 50,
 	      monitorWindowResize: false,
 	      disabled: false
 	    };
 	  },
-	
 	  componentDidMount: function componentDidMount() {
 	    var props = this.props;
 	    // if parent ref not attached .... use document.getElementById
-	    if (!props.disabled) {
-	      var source = _reactDom2['default'].findDOMNode(this);
-	      props.onAlign(source, (0, _domAlign2['default'])(source, props.target(), props.align));
-	      if (props.monitorWindowResize) {
-	        this.startMonitorWindowResize();
-	      }
+	    this.forceAlign();
+	    if (!props.disabled && props.monitorWindowResize) {
+	      this.startMonitorWindowResize();
 	    }
 	  },
-	
 	  componentDidUpdate: function componentDidUpdate(prevProps) {
 	    var reAlign = false;
 	    var props = this.props;
-	    var currentTarget = undefined;
 	
 	    if (!props.disabled) {
 	      if (prevProps.disabled || prevProps.align !== props.align) {
 	        reAlign = true;
-	        currentTarget = props.target();
 	      } else {
 	        var lastTarget = prevProps.target();
-	        currentTarget = props.target();
-	        if ((0, _isWindow2['default'])(lastTarget) && (0, _isWindow2['default'])(currentTarget)) {
+	        var currentTarget = props.target();
+	        if ((0, _isWindow2["default"])(lastTarget) && (0, _isWindow2["default"])(currentTarget)) {
 	          reAlign = false;
 	        } else if (lastTarget !== currentTarget) {
 	          reAlign = true;
@@ -23583,8 +23651,7 @@
 	    }
 	
 	    if (reAlign) {
-	      var source = _reactDom2['default'].findDOMNode(this);
-	      props.onAlign(source, (0, _domAlign2['default'])(source, currentTarget, props.align));
+	      this.forceAlign();
 	    }
 	
 	    if (props.monitorWindowResize && !props.disabled) {
@@ -23593,38 +23660,33 @@
 	      this.stopMonitorWindowResize();
 	    }
 	  },
-	
 	  componentWillUnmount: function componentWillUnmount() {
 	    this.stopMonitorWindowResize();
 	  },
-	
-	  onWindowResize: function onWindowResize() {
-	    var props = this.props;
-	    if (!props.disabled) {
-	      var source = _reactDom2['default'].findDOMNode(this);
-	      props.onAlign(source, (0, _domAlign2['default'])(source, props.target(), props.align));
-	    }
-	  },
-	
 	  startMonitorWindowResize: function startMonitorWindowResize() {
 	    if (!this.resizeHandler) {
-	      this.resizeHandler = _rcUtil.Dom.addEventListener(window, 'resize', buffer(this.onWindowResize, this.props.monitorBufferTime));
+	      this.resizeHandler = _rcUtil.Dom.addEventListener(window, 'resize', buffer(this.forceAlign, this.props.monitorBufferTime));
 	    }
 	  },
-	
 	  stopMonitorWindowResize: function stopMonitorWindowResize() {
 	    if (this.resizeHandler) {
 	      this.resizeHandler.remove();
 	      this.resizeHandler = null;
 	    }
 	  },
-	
+	  forceAlign: function forceAlign() {
+	    var props = this.props;
+	    if (!props.disabled) {
+	      var source = _reactDom2["default"].findDOMNode(this);
+	      props.onAlign(source, (0, _domAlign2["default"])(source, props.target(), props.align));
+	    }
+	  },
 	  render: function render() {
 	    var _props = this.props;
 	    var childrenProps = _props.childrenProps;
 	    var children = _props.children;
 	
-	    var child = _react2['default'].Children.only(children);
+	    var child = _react2["default"].Children.only(children);
 	    if (childrenProps) {
 	      var newProps = {};
 	      for (var prop in childrenProps) {
@@ -23632,13 +23694,13 @@
 	          newProps[prop] = this.props[childrenProps[prop]];
 	        }
 	      }
-	      return _react2['default'].cloneElement(child, newProps);
+	      return _react2["default"].cloneElement(child, newProps);
 	    }
 	    return child;
 	  }
 	});
 	
-	exports['default'] = Align;
+	exports["default"] = Align;
 	module.exports = exports['default'];
 
 /***/ },
@@ -24698,14 +24760,12 @@
 	  value: true
 	});
 	exports["default"] = isWindow;
-	
 	function isWindow(obj) {
 	  /* eslint no-eq-null: 0 */
 	  /* eslint eqeqeq: 0 */
 	  return obj != null && obj == obj.window;
 	}
-	
-	module.exports = exports["default"];
+	module.exports = exports['default'];
 
 /***/ },
 /* 205 */
@@ -24976,15 +25036,15 @@
 	    if (this.isValidChildByKey(currentChildren, key)) {
 	      this.performEnter(key);
 	    } else {
-	      if (_util2['default'].allowLeaveCallback(props)) {
-	        props.onLeave(key);
-	        props.onEnd(key, false);
-	      }
 	      if (this.isMounted() && !(0, _ChildrenUtils.isSameChildren)(this.state.children, currentChildren, props.showProp)) {
 	        this.setState({
 	          children: currentChildren
 	        });
 	      }
+	      if (_util2['default'].allowLeaveCallback(props)) {
+	        props.onLeave(key);
+	        props.onEnd(key, false);
+	      }
 	    }
 	  },
 	
@@ -25375,20 +25435,20 @@
 	
 	  _Event2["default"].addEndEventListener(node, node.rcEndListener);
 	
-	  nodeClasses.add(className);
-	
 	  if (start) {
 	    start();
 	  }
+	  nodeClasses.add(className);
 	
 	  node.rcAnimTimeout = setTimeout(function () {
 	    node.rcAnimTimeout = null;
 	    nodeClasses.add(activeClassName);
 	    if (active) {
-	      active();
+	      setTimeout(active, 0);
 	    }
 	    fixBrowserByTimeout(node);
-	  }, 0);
+	    // 30ms for firefox
+	  }, 30);
 	
 	  return {
 	    stop: function stop() {

examples/custom-handles.html

@@ -0,0 +1,321 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>custom-handles.js - example - rc-slider@3.7.0</title>
+  <meta name="viewport"
+        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
+  <meta charset="utf-8"/>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
+  <style>
+    .highlight pre {
+      padding: .8em 1em;
+      font: 14px/20px Consolas, Monaco, 'Andale Mono', monospace;
+      border: 1px solid #e5e8ec;
+      border-radius: 3px;
+      background-color: #21221d;
+      background-image: -webkit-linear-gradient(#21221d 50%, #272822 50%);
+      background-image: -moz-linear-gradient(#21221d 50%, #272822 50%);
+      background-image: -ms-linear-gradient(#21221d 50%, #272822 50%);
+      background-image: -o-linear-gradient(#21221d 50%, #272822 50%);
+      background-image: linear-gradient(#21221d 50%, #272822 50%);
+      background-size: 40px 40px;
+      background-origin: content-box;
+      overflow: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    .highlight pre > code {
+      font-family: inherit;
+      direction: ltr;
+      text-align: left;
+      white-space: pre;
+      word-spacing: normal;
+      vertical-align: 2px;
+      display: block;
+      -moz-tab-size: 2;
+      -o-tab-size: 2;
+      tab-size: 2;
+      -webkit-hyphens: none;
+      -moz-hyphens: none;
+      -ms-hyphens: none;
+      hyphens: none;
+      color: #E5E5C2;
+    }
+  </style>
+  <style>
+/*
+
+Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #23241f;
+  -webkit-text-size-adjust: none;
+}
+
+.hljs,
+.hljs-tag,
+.css .hljs-rule,
+.css .hljs-value,
+.aspectj .hljs-function,
+.css .hljs-function
+.hljs-preprocessor,
+.hljs-pragma {
+  color: #f8f8f2;
+}
+
+.hljs-strongemphasis,
+.hljs-strong,
+.hljs-emphasis {
+  color: #a8a8a2;
+}
+
+.hljs-bullet,
+.hljs-blockquote,
+.hljs-horizontal_rule,
+.hljs-number,
+.hljs-regexp,
+.alias .hljs-keyword,
+.hljs-literal,
+.hljs-hexcolor {
+  color: #ae81ff;
+}
+
+.hljs-code,
+.hljs-title,
+.css .hljs-class,
+.hljs-class .hljs-title:last-child {
+  color: #a6e22e;
+  /*color: #e6db74;*/
+}
+
+.hljs-link_url {
+  font-size: 80%;
+}
+
+.hljs-strong,
+.hljs-strongemphasis {
+  font-weight: bold;
+}
+
+.hljs-emphasis,
+.hljs-strongemphasis,
+.hljs-class .hljs-title:last-child,
+.hljs-typename {
+  font-style: italic;
+}
+
+.hljs-keyword,
+.ruby .hljs-class .hljs-keyword:first-child,
+.ruby .hljs-function .hljs-keyword,
+.hljs-function,
+.hljs-change,
+.hljs-winutils,
+.hljs-flow,
+.nginx .hljs-title,
+.tex .hljs-special,
+.hljs-header,
+.hljs-symbol,
+.hljs-symbol .hljs-string,
+.hljs-tag .hljs-title,
+.hljs-value,
+.alias .hljs-keyword:first-child,
+.css .hljs-tag,
+.css .unit,
+.css .hljs-important {
+  color: #f92672;
+}
+
+.hljs-function .hljs-keyword,
+.hljs-class .hljs-keyword:first-child,
+.hljs-aspect .hljs-keyword:first-child,
+.hljs-constant,
+.hljs-typename,
+.hljs-name,
+.css .hljs-attribute {
+  color: #66d9ef;
+}
+
+.hljs-variable,
+.hljs-params,
+.hljs-class .hljs-title,
+.hljs-aspect .hljs-title {
+  color: #f8f8f2;
+}
+
+.hljs-tag .hljs-value,
+.hljs-string,
+.css .hljs-id,
+.hljs-subst,
+.hljs-type,
+.ruby .hljs-class .hljs-parent,
+.django .hljs-template_tag,
+.django .hljs-variable,
+.smalltalk .hljs-class,
+.django .hljs-filter .hljs-argument,
+.smalltalk .hljs-localvars,
+.smalltalk .hljs-array,
+.hljs-attr_selector,
+.hljs-pseudo,
+.hljs-addition,
+.hljs-stream,
+.hljs-envvar,
+.apache .hljs-tag,
+.apache .hljs-cbracket,
+.tex .hljs-command,
+.hljs-prompt,
+.hljs-link_label,
+.hljs-link_url {
+  color: #e6db74;
+}
+
+.hljs-comment,
+.hljs-annotation,
+.hljs-decorator,
+.hljs-pi,
+.hljs-doctype,
+.hljs-deletion,
+.hljs-shebang,
+.apache .hljs-sqbracket,
+.tex .hljs-formula {
+  color: #75715e;
+}
+
+.coffeescript .javascript,
+.javascript .xml,
+.tex .hljs-formula,
+.xml .javascript,
+.xml .vbscript,
+.xml .css,
+.xml .hljs-cdata,
+.xml .php,
+.php .xml {
+  opacity: 0.5;
+}
+/***********/
+.hljs-attribute{
+  color: #a6e22e;
+}
+/***** node keyword ******/
+.hljs-built_in{
+  color: #3396dc;
+  font-weight: bold;
+}
+  </style>
+  <style>
+    .container {
+      width: 86%;
+      max-width: 1000px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    .header p {
+      color: #666;
+    }
+
+    .example {
+      padding: 20px 0;
+    }
+  </style>
+
+  <script>
+    // Console-polyfill. MIT license.
+    // https://github.com/paulmillr/console-polyfill
+    // Make it safe to do console.log() always.
+    (function (global) {
+      'use strict';
+      global.console = global.console || {};
+      var con = global.console;
+      var prop, method;
+      var empty = {};
+      var dummy = function () {
+      };
+      var properties = 'memory'.split(',');
+      var methods = ('assert,clear,count,debug,dir,dirxml,error,exception,group,' +
+      'groupCollapsed,groupEnd,info,log,markTimeline,profile,profiles,profileEnd,' +
+      'show,table,time,timeEnd,timeline,timelineEnd,timeStamp,trace,warn').split(',');
+      while (prop = properties.pop()) con[prop] = con[prop] || empty;
+      while (method = methods.pop()) con[method] = con[method] || dummy;
+    })(typeof window === 'undefined' ? this : window);
+    // Using `this` for web workers while maintaining compatibility with browser
+    // targeted script loaders such as Browserify or Webpack where the only way to
+    // get to the global object is via `window`.
+  </script>
+  <!--[if lt IE 9]>
+  <script src="https://a.alipayobjects.com/??es5-shim/4.0.5/es5-shim.js,es5-shim/4.0.5/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js"></script>
+  <![endif]-->
+  <link rel="stylesheet" href="common.css" />
+</head>
+
+<body>
+<div class="container">
+  <div class="header">
+    <h1>rc-slider@3.7.0</h1>
+
+    <p>slider ui component for react</p>
+  </div>
+  <div class="example" id="__react-content"></div>
+  <script src="common.js?nowrap"></script>
+  <script src="custom-handles.js?nowrap"></script>
+  <div class="highlight"><pre><code language="js"><span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider/assets/index.css'</span>);
+
+<span class="hljs-keyword">const</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
+<span class="hljs-keyword">const</span> ReactDOM = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-dom'</span>);
+<span class="hljs-keyword">const</span> Slider = <span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider'</span>);
+
+<span class="hljs-keyword">const</span> wrapperStyle = {width: <span class="hljs-number">400</span>, margin: <span class="hljs-number">50</span>};
+
+<span class="hljs-keyword">const</span> handleStyle = {
+  position: <span class="hljs-string">'absolute'</span>,
+  transform: <span class="hljs-string">'translate(-50%, -50%)'</span>,
+  cursor: <span class="hljs-string">'pointer'</span>,
+  padding: <span class="hljs-string">'2px'</span>,
+  border: <span class="hljs-string">'2px solid #abe2fb'</span>,
+  borderRadius: <span class="hljs-string">'3px'</span>,
+  background: <span class="hljs-string">'#fff'</span>,
+  fontSize: <span class="hljs-string">'14px'</span>,
+  textAlign: <span class="hljs-string">'center'</span>,
+  zIndex: <span class="hljs-number">3</span>,
+};
+
+<span class="hljs-keyword">const</span> CustomHandle = props =&gt; {
+  <span class="hljs-keyword">const</span> style = <span class="hljs-built_in">Object</span>.assign({left: props.offset + <span class="hljs-string">'%'</span>}, handleStyle);
+  <span class="hljs-keyword">return</span> (
+    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>val: {props.value}<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
+  );
+};
+CustomHandle.propTypes = {
+  value: React.PropTypes.any,
+  offset: React.PropTypes.number,
+};
+
+ReactDOM.render(
+  <span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{wrapperStyle}</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Default slider<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">min</span>=<span class="hljs-value">{0}</span> <span class="hljs-attribute">max</span>=<span class="hljs-value">{20}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{3}</span> /&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{wrapperStyle}</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Slider with custom handle<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">min</span>=<span class="hljs-value">{0}</span> <span class="hljs-attribute">max</span>=<span class="hljs-value">{20}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{3}</span> <span class="hljs-attribute">handle</span>=<span class="hljs-value">{&lt;CustomHandle</span> /&gt;</span>} /&gt;
+    <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
+  , document.getElementById('__react-content'));
+</span></code></pre></div>
+</div>
+<a href="http://github.com/react-component/slider">
+  <img style="position: absolute; top: 0; right: 0; border: 0;"
+       src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
+       alt="Fork me on GitHub"
+       data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
+</a>
+</body>
+
+</html>

examples/custom-handles.js

@@ -0,0 +1,76 @@
+webpackJsonp([0],[
+/* 0 */
+/***/ function(module, exports, __webpack_require__) {
+
+	module.exports = __webpack_require__(1);
+
+
+/***/ },
+/* 1 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+	
+	__webpack_require__(2);
+	
+	var React = __webpack_require__(3);
+	var ReactDOM = __webpack_require__(160);
+	var Slider = __webpack_require__(161);
+	
+	var wrapperStyle = { width: 400, margin: 50 };
+	
+	var handleStyle = {
+	  position: 'absolute',
+	  transform: 'translate(-50%, -50%)',
+	  cursor: 'pointer',
+	  padding: '2px',
+	  border: '2px solid #abe2fb',
+	  borderRadius: '3px',
+	  background: '#fff',
+	  fontSize: '14px',
+	  textAlign: 'center',
+	  zIndex: 3
+	};
+	
+	var CustomHandle = function CustomHandle(props) {
+	  var style = Object.assign({ left: props.offset + '%' }, handleStyle);
+	  return React.createElement(
+	    'div',
+	    { style: style },
+	    'val: ',
+	    props.value
+	  );
+	};
+	CustomHandle.propTypes = {
+	  value: React.PropTypes.any,
+	  offset: React.PropTypes.number
+	};
+	
+	ReactDOM.render(React.createElement(
+	  'div',
+	  null,
+	  React.createElement(
+	    'div',
+	    { style: wrapperStyle },
+	    React.createElement(
+	      'p',
+	      null,
+	      'Default slider'
+	    ),
+	    React.createElement(Slider, { min: 0, max: 20, defaultValue: 3 })
+	  ),
+	  React.createElement(
+	    'div',
+	    { style: wrapperStyle },
+	    React.createElement(
+	      'p',
+	      null,
+	      'Slider with custom handle'
+	    ),
+	    React.createElement(Slider, { min: 0, max: 20, defaultValue: 3, handle: React.createElement(CustomHandle, null) })
+	  )
+	), document.getElementById('__react-content'));
+
+/***/ }
+]);
+//# sourceMappingURL=custom-handles.js.map

examples/custom-handles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack:///./examples/custom-handles.js"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,oBAAO,CAAC,CAA6B,CAAC,CAAC;;AAEvC,KAAM,KAAK,GAAG,mBAAO,CAAC,CAAO,CAAC,CAAC;AAC/B,KAAM,QAAQ,GAAG,mBAAO,CAAC,GAAW,CAAC,CAAC;AACtC,KAAM,MAAM,GAAG,mBAAO,CAAC,GAAW,CAAC,CAAC;;AAEpC,KAAM,YAAY,GAAG,EAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAC,CAAC;;AAE9C,KAAM,WAAW,GAAG;AAClB,WAAQ,EAAE,UAAU;AACpB,YAAS,EAAE,uBAAuB;AAClC,SAAM,EAAE,SAAS;AACjB,UAAO,EAAE,KAAK;AACd,SAAM,EAAE,mBAAmB;AAC3B,eAAY,EAAE,KAAK;AACnB,aAAU,EAAE,MAAM;AAClB,WAAQ,EAAE,MAAM;AAChB,YAAS,EAAE,QAAQ;AACnB,SAAM,EAAE,CAAC;EACV,CAAC;;AAEF,KAAM,YAAY,GAAG,SAAf,YAAY,CAAG,KAAK,EAAI;AAC5B,OAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,EAAC,IAAI,EAAE,KAAK,CAAC,MAAM,GAAG,GAAG,EAAC,EAAE,WAAW,CAAC,CAAC;AACrE,UACE;;OAAK,KAAK,EAAE,KAAM;;KAAO,KAAK,CAAC,KAAK;IAAO,CAC3C;EACH,CAAC;AACF,aAAY,CAAC,SAAS,GAAG;AACvB,QAAK,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG;AAC1B,SAAM,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM;EAC/B,CAAC;;AAEF,SAAQ,CAAC,MAAM,CACb;;;GACE;;OAAK,KAAK,EAAE,YAAa;KACvB;;;;MAAqB;KACrB,oBAAC,MAAM,IAAC,GAAG,EAAE,CAAE,EAAC,GAAG,EAAE,EAAG,EAAC,YAAY,EAAE,CAAE,GAAG;IACxC;GACN;;OAAK,KAAK,EAAE,YAAa;KACvB;;;;MAAgC;KAChC,oBAAC,MAAM,IAAC,GAAG,EAAE,CAAE,EAAC,GAAG,EAAE,EAAG,EAAC,YAAY,EAAE,CAAE,EAAC,MAAM,EAAE,oBAAC,YAAY,OAAI,GAAG;IAClE;EACF,EACJ,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC,C","file":"custom-handles.js","sourcesContent":["require('rc-slider/assets/index.less');\n\nconst React = require('react');\nconst ReactDOM = require('react-dom');\nconst Slider = require('rc-slider');\n\nconst wrapperStyle = {width: 400, margin: 50};\n\nconst handleStyle = {\n  position: 'absolute',\n  transform: 'translate(-50%, -50%)',\n  cursor: 'pointer',\n  padding: '2px',\n  border: '2px solid #abe2fb',\n  borderRadius: '3px',\n  background: '#fff',\n  fontSize: '14px',\n  textAlign: 'center',\n  zIndex: 3,\n};\n\nconst CustomHandle = props => {\n  const style = Object.assign({left: props.offset + '%'}, handleStyle);\n  return (\n    <div style={style}>val: {props.value}</div>\n  );\n};\nCustomHandle.propTypes = {\n  value: React.PropTypes.any,\n  offset: React.PropTypes.number,\n};\n\nReactDOM.render(\n  <div>\n    <div style={wrapperStyle}>\n      <p>Default slider</p>\n      <Slider min={0} max={20} defaultValue={3} />\n    </div>\n    <div style={wrapperStyle}>\n      <p>Slider with custom handle</p>\n      <Slider min={0} max={20} defaultValue={3} handle={<CustomHandle />} />\n    </div>\n  </div>\n  , document.getElementById('__react-content'));\n\n\n\n/** WEBPACK FOOTER **\n ** ./examples/custom-handles.js\n **/"],"sourceRoot":""}

examples/marks.html

@@ -2,7 +2,7 @@
 <html>
 
 <head>
-  <title>marks.js - example - rc-slider@3.6.2</title>
+  <title>marks.js - example - rc-slider@3.7.0</title>
   <meta name="viewport"
         content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
   <meta charset="utf-8"/>
@@ -257,7 +257,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
 <body>
 <div class="container">
   <div class="header">
-    <h1>rc-slider@3.6.2</h1>
+    <h1>rc-slider@3.7.0</h1>
 
     <p>slider ui component for react</p>
   </div>

examples/marks.js

@@ -1,12 +1,14 @@
-webpackJsonp([0],[
-/* 0 */
+webpackJsonp([1],{
+
+/***/ 0:
 /***/ function(module, exports, __webpack_require__) {
 
-	module.exports = __webpack_require__(1);
+	module.exports = __webpack_require__(220);
 
 
 /***/ },
-/* 1 */
+
+/***/ 220:
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -110,5 +112,6 @@ webpackJsonp([0],[
 	), document.getElementById('__react-content'));
 
 /***/ }
-]);
+
+});
 //# sourceMappingURL=marks.js.map

examples/marks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["webpack:///./examples/marks.js"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,oBAAO,CAAC,CAA6B,CAAC,CAAC;;AAEvC,KAAM,KAAK,GAAG,mBAAO,CAAC,CAAO,CAAC,CAAC;AAC/B,KAAM,QAAQ,GAAG,mBAAO,CAAC,GAAW,CAAC,CAAC;AACtC,KAAM,MAAM,GAAG,mBAAO,CAAC,GAAW,CAAC,CAAC;;AAEpC,KAAM,KAAK,GAAG,EAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAC,CAAC;AACvC,KAAM,KAAK,GAAG;AACZ,QAAK,EAAE,OAAO;AACd,IAAC,EAAE;;;;IAAoB;AACvB,KAAE,EAAE,MAAM;AACV,KAAE,EAAE,MAAM;AACV,KAAE,EAAE,MAAM;AACV,MAAG,EAAE;AACH,UAAK,EAAE;AACL,YAAK,EAAE,KAAK;MACb;AACD,UAAK,EAAE;;;;MAAsB;IAC9B;EACF,CAAC;;AAEF,UAAS,GAAG,CAAC,KAAK,EAAE;AAClB,UAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;EACpB;;AAED,SAAQ,CAAC,MAAM,CACb;;;GACE;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAqC;KACrC,oBAAC,MAAM,IAAC,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,EAAE,KAAM,EAAC,IAAI,EAAE,IAAK,EAAC,QAAQ,EAAE,GAAI,EAAC,YAAY,EAAE,EAAG,GAAG;IAC3E;GACN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAkC;KAClC,oBAAC,MAAM,IAAC,IAAI,QAAC,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,EAAE,KAAM,EAAC,IAAI,EAAE,EAAG,EAAC,QAAQ,EAAE,GAAI,EAAC,YAAY,EAAE,EAAG,GAAG;IAC9E;GAEN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAA0C;KAC1C,oBAAC,MAAM,IAAC,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,EAAE,KAAM,EAAC,QAAQ,EAAE,KAAM,EAAC,YAAY,EAAE,EAAG,GAAG;IACjE;GACN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAoD;KACpD,oBAAC,MAAM,IAAC,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,EAAE,KAAM,EAAC,IAAI,EAAE,EAAG,EAAC,QAAQ,EAAE,KAAM,EAAC,YAAY,EAAE,EAAG,GAAG;IAC3E;GAEN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAuB;KACvB,oBAAC,MAAM,IAAC,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,QAAC,KAAK,EAAE,KAAM,EAAC,QAAQ,EAAE,GAAI,EAAC,YAAY,EAAE,CAAC,EAAE,EAAE,EAAE,CAAE,GAAG;IAC3E;GACN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAiC;KACjC,oBAAC,MAAM,IAAC,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,QAAC,KAAK,EAAE,KAAM,EAAC,IAAI,EAAE,EAAG,EAAC,QAAQ,EAAE,GAAI,EAAC,YAAY,EAAE,CAAC,EAAE,EAAE,EAAE,CAAE,GAAG;IACrF;EACF,EACJ,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC,C","file":"marks.js","sourcesContent":["require('rc-slider/assets/index.less');\n\nconst React = require('react');\nconst ReactDOM = require('react-dom');\nconst Slider = require('rc-slider');\n\nconst style = {width: 400, margin: 50};\nconst marks = {\n  '-10': '-10°C',\n  0: <strong>0°C</strong>,\n  26: '26°C',\n  37: '37°C',\n  50: '50°C',\n  100: {\n    style: {\n      color: 'red',\n    },\n    label: <strong>100°C</strong>,\n  },\n};\n\nfunction log(value) {\n  console.log(value);\n}\n\nReactDOM.render(\n  <div>\n    <div style={style}>\n      <p>Slider with marks, `step=null`</p>\n      <Slider min={-10} marks={marks} step={null} onChange={log} defaultValue={20} />\n    </div>\n    <div style={style}>\n      <p>Slider with marks and steps</p>\n      <Slider dots min={-10} marks={marks} step={10} onChange={log} defaultValue={20} />\n    </div>\n\n    <div style={style}>\n      <p>Slider with marks, `included=false`</p>\n      <Slider min={-10} marks={marks} included={false} defaultValue={20} />\n    </div>\n    <div style={style}>\n      <p>Slider with marks and steps, `included=false`</p>\n      <Slider min={-10} marks={marks} step={10} included={false} defaultValue={20} />\n    </div>\n\n    <div style={style}>\n      <p>Range with marks</p>\n      <Slider min={-10} range marks={marks} onChange={log} defaultValue={[20, 40]} />\n    </div>\n    <div style={style}>\n      <p>Range with marks and steps</p>\n      <Slider min={-10} range marks={marks} step={10} onChange={log} defaultValue={[20, 40]} />\n    </div>\n  </div>\n  , document.getElementById('__react-content'));\n\n\n\n/** WEBPACK FOOTER **\n ** ./examples/marks.js\n **/"],"sourceRoot":""}
+{"version":3,"sources":["webpack:///./examples/marks.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,oBAAO,CAAC,CAA6B,CAAC,CAAC;;AAEvC,KAAM,KAAK,GAAG,mBAAO,CAAC,CAAO,CAAC,CAAC;AAC/B,KAAM,QAAQ,GAAG,mBAAO,CAAC,GAAW,CAAC,CAAC;AACtC,KAAM,MAAM,GAAG,mBAAO,CAAC,GAAW,CAAC,CAAC;;AAEpC,KAAM,KAAK,GAAG,EAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAC,CAAC;AACvC,KAAM,KAAK,GAAG;AACZ,QAAK,EAAE,OAAO;AACd,IAAC,EAAE;;;;IAAoB;AACvB,KAAE,EAAE,MAAM;AACV,KAAE,EAAE,MAAM;AACV,KAAE,EAAE,MAAM;AACV,MAAG,EAAE;AACH,UAAK,EAAE;AACL,YAAK,EAAE,KAAK;MACb;AACD,UAAK,EAAE;;;;MAAsB;IAC9B;EACF,CAAC;;AAEF,UAAS,GAAG,CAAC,KAAK,EAAE;AAClB,UAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;EACpB;;AAED,SAAQ,CAAC,MAAM,CACb;;;GACE;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAqC;KACrC,oBAAC,MAAM,IAAC,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,EAAE,KAAM,EAAC,IAAI,EAAE,IAAK,EAAC,QAAQ,EAAE,GAAI,EAAC,YAAY,EAAE,EAAG,GAAG;IAC3E;GACN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAkC;KAClC,oBAAC,MAAM,IAAC,IAAI,QAAC,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,EAAE,KAAM,EAAC,IAAI,EAAE,EAAG,EAAC,QAAQ,EAAE,GAAI,EAAC,YAAY,EAAE,EAAG,GAAG;IAC9E;GAEN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAA0C;KAC1C,oBAAC,MAAM,IAAC,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,EAAE,KAAM,EAAC,QAAQ,EAAE,KAAM,EAAC,YAAY,EAAE,EAAG,GAAG;IACjE;GACN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAoD;KACpD,oBAAC,MAAM,IAAC,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,EAAE,KAAM,EAAC,IAAI,EAAE,EAAG,EAAC,QAAQ,EAAE,KAAM,EAAC,YAAY,EAAE,EAAG,GAAG;IAC3E;GAEN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAuB;KACvB,oBAAC,MAAM,IAAC,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,QAAC,KAAK,EAAE,KAAM,EAAC,QAAQ,EAAE,GAAI,EAAC,YAAY,EAAE,CAAC,EAAE,EAAE,EAAE,CAAE,GAAG;IAC3E;GACN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAiC;KACjC,oBAAC,MAAM,IAAC,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,QAAC,KAAK,EAAE,KAAM,EAAC,IAAI,EAAE,EAAG,EAAC,QAAQ,EAAE,GAAI,EAAC,YAAY,EAAE,CAAC,EAAE,EAAE,EAAE,CAAE,GAAG;IACrF;EACF,EACJ,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC,C","file":"marks.js","sourcesContent":["require('rc-slider/assets/index.less');\n\nconst React = require('react');\nconst ReactDOM = require('react-dom');\nconst Slider = require('rc-slider');\n\nconst style = {width: 400, margin: 50};\nconst marks = {\n  '-10': '-10°C',\n  0: <strong>0°C</strong>,\n  26: '26°C',\n  37: '37°C',\n  50: '50°C',\n  100: {\n    style: {\n      color: 'red',\n    },\n    label: <strong>100°C</strong>,\n  },\n};\n\nfunction log(value) {\n  console.log(value);\n}\n\nReactDOM.render(\n  <div>\n    <div style={style}>\n      <p>Slider with marks, `step=null`</p>\n      <Slider min={-10} marks={marks} step={null} onChange={log} defaultValue={20} />\n    </div>\n    <div style={style}>\n      <p>Slider with marks and steps</p>\n      <Slider dots min={-10} marks={marks} step={10} onChange={log} defaultValue={20} />\n    </div>\n\n    <div style={style}>\n      <p>Slider with marks, `included=false`</p>\n      <Slider min={-10} marks={marks} included={false} defaultValue={20} />\n    </div>\n    <div style={style}>\n      <p>Slider with marks and steps, `included=false`</p>\n      <Slider min={-10} marks={marks} step={10} included={false} defaultValue={20} />\n    </div>\n\n    <div style={style}>\n      <p>Range with marks</p>\n      <Slider min={-10} range marks={marks} onChange={log} defaultValue={[20, 40]} />\n    </div>\n    <div style={style}>\n      <p>Range with marks and steps</p>\n      <Slider min={-10} range marks={marks} step={10} onChange={log} defaultValue={[20, 40]} />\n    </div>\n  </div>\n  , document.getElementById('__react-content'));\n\n\n\n/** WEBPACK FOOTER **\n ** ./examples/marks.js\n **/"],"sourceRoot":""}

examples/range.html

@@ -2,7 +2,7 @@
 <html>
 
 <head>
-  <title>range.js - example - rc-slider@3.6.2</title>
+  <title>range.js - example - rc-slider@3.7.0</title>
   <meta name="viewport"
         content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
   <meta charset="utf-8"/>
@@ -257,7 +257,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
 <body>
 <div class="container">
   <div class="header">
-    <h1>rc-slider@3.6.2</h1>
+    <h1>rc-slider@3.7.0</h1>
 
     <p>slider ui component for react</p>
   </div>
@@ -273,35 +273,35 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
 
 <span class="hljs-keyword">const</span> style = {width: <span class="hljs-number">400</span>, margin: <span class="hljs-number">50</span>};
 
-<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">log</span>(<span class="hljs-params">value</span>) </span>{
+<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">log</span><span class="hljs-params">(value)</span> </span>{
   <span class="hljs-built_in">console</span>.log(value);
 }
 
 <span class="hljs-keyword">const</span> CustomizedRange = React.createClass({
-  getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
+  getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
     <span class="hljs-keyword">return</span> {
       lowerBound: <span class="hljs-number">20</span>,
       upperBound: <span class="hljs-number">40</span>,
       value: [<span class="hljs-number">20</span>, <span class="hljs-number">40</span>],
     };
   },
-  onLowerBoundChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
+  onLowerBoundChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
     <span class="hljs-keyword">this</span>.setState({ lowerBound: +e.target.value });
   },
-  onUpperBoundChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
+  onUpperBoundChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
     <span class="hljs-keyword">this</span>.setState({ upperBound: +e.target.value });
   },
-  onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">value</span>) </span>{
+  onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(value)</span> </span>{
     log(value);
     <span class="hljs-keyword">this</span>.setState({
       value: value,
     });
   },
-  handleApply: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
+  handleApply: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
     <span class="hljs-keyword">const</span> { lowerBound, upperBound } = <span class="hljs-keyword">this</span>.state;
     <span class="hljs-keyword">this</span>.setState({ value: [lowerBound, upperBound]});
   },
-  render: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
+  render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
     <span class="hljs-keyword">return</span> (
       <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
         <span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>LowerBound: <span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
@@ -314,33 +314,33 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
         <span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span>
         <span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">allowCross</span>=<span class="hljs-value">{false}</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.value}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onSliderChange}</span> /&gt;</span>
       <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
-    )</span>;
+    );
   },
 });
 
-<span class="hljs-keyword">const</span> DynamicBounds = React.createClass({
+const DynamicBounds = React.createClass({
   getInitialState() {
-    <span class="hljs-keyword">return</span> {
-      min: <span class="hljs-number">0</span>,
-      max: <span class="hljs-number">100</span>,
+    return {
+      min: 0,
+      max: 100,
     };
   },
-  onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">value</span>) </span>{
+  onSliderChange: function(value) {
     log(value);
   },
-  onMinChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
-    <span class="hljs-keyword">this</span>.setState({
-      min: +e.target.value || <span class="hljs-number">0</span>,
+  onMinChange: function(e) {
+    this.setState({
+      min: +e.target.value || 0,
     });
   },
-  onMaxChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
-    <span class="hljs-keyword">this</span>.setState({
-      max: +e.target.value || <span class="hljs-number">100</span>,
+  onMaxChange: function(e) {
+    this.setState({
+      max: +e.target.value || 100,
     });
   },
-  render: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
-    <span class="hljs-keyword">return</span> (
-      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
+  render: function() {
+    return (
+      <span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
         <span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>Min: <span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
         <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"number"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.min}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onMinChange}</span> /&gt;</span>
         <span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span>
@@ -349,12 +349,12 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
         <span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span>
         <span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">50</span>]} <span class="hljs-attribute">min</span>=<span class="hljs-value">{this.state.min}</span> <span class="hljs-attribute">max</span>=<span class="hljs-value">{this.state.max}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onSliderChange}</span> /&gt;</span>
       <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
-    )</span>;
+    );
   },
 });
 
 ReactDOM.render(
-  <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
     <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>
       <span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Basic Range，`allowCross=false`<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
       <span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">allowCross</span>=<span class="hljs-value">{false}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[0,</span> <span class="hljs-attribute">20</span>]} <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span> /&gt;</span>

examples/range.js

@@ -1,14 +1,14 @@
-webpackJsonp([1],{
+webpackJsonp([2],{
 
 /***/ 0:
 /***/ function(module, exports, __webpack_require__) {
 
-	module.exports = __webpack_require__(220);
+	module.exports = __webpack_require__(221);
 
 
 /***/ },
 
-/***/ 220:
+/***/ 221:
 /***/ function(module, exports, __webpack_require__) {
 
 	/* eslint react/no-multi-comp: 0 */

examples/slider.html

@@ -2,7 +2,7 @@
 <html>
 
 <head>
-  <title>slider.js - example - rc-slider@3.6.2</title>
+  <title>slider.js - example - rc-slider@3.7.0</title>
   <meta name="viewport"
         content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
   <meta charset="utf-8"/>
@@ -257,7 +257,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
 <body>
 <div class="container">
   <div class="header">
-    <h1>rc-slider@3.6.2</h1>
+    <h1>rc-slider@3.7.0</h1>
 
     <p>slider ui component for react</p>
   </div>
@@ -273,53 +273,53 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
 
 <span class="hljs-keyword">const</span> style = {width: <span class="hljs-number">400</span>, margin: <span class="hljs-number">50</span>};
 
-<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">log</span>(<span class="hljs-params">value</span>) </span>{
+<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">log</span><span class="hljs-params">(value)</span> </span>{
   <span class="hljs-built_in">console</span>.log(value);
 }
 
 
-<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">percentFormatter</span>(<span class="hljs-params">v</span>) </span>{
+<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">percentFormatter</span><span class="hljs-params">(v)</span> </span>{
   <span class="hljs-keyword">return</span> v + <span class="hljs-string">' %'</span>;
 }
 
 <span class="hljs-keyword">const</span> CustomizedSlider = React.createClass({
-  getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
+  getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
     <span class="hljs-keyword">return</span> {
       value: <span class="hljs-number">50</span>,
     };
   },
-  onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">value</span>) </span>{
+  onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(value)</span> </span>{
     log(value);
     <span class="hljs-keyword">this</span>.setState({
       value: value,
     });
   },
-  render: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
+  render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
     <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.value}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onSliderChange}</span> /&gt;</span>;</span>
   },
 });
 
 <span class="hljs-keyword">const</span> DynamicBounds = React.createClass({
-  getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
+  getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
     <span class="hljs-keyword">return</span> {
       min: <span class="hljs-number">0</span>,
       max: <span class="hljs-number">100</span>,
     };
   },
-  onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">value</span>) </span>{
+  onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(value)</span> </span>{
     log(value);
   },
-  onMinChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
+  onMinChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
     <span class="hljs-keyword">this</span>.setState({
       min: +e.target.value || <span class="hljs-number">0</span>,
     });
   },
-  onMaxChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
+  onMaxChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
     <span class="hljs-keyword">this</span>.setState({
       max: +e.target.value || <span class="hljs-number">100</span>,
     });
   },
-  render: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
+  render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
     <span class="hljs-keyword">return</span> (
       <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
         <span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>Min: <span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
@@ -330,12 +330,12 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
         <span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span>
         <span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{50}</span> <span class="hljs-attribute">min</span>=<span class="hljs-value">{this.state.min}</span> <span class="hljs-attribute">max</span>=<span class="hljs-value">{this.state.max}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onSliderChange}</span> /&gt;</span>
       <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
-    )</span>;
+    );
   },
 });
 
 ReactDOM.render(
-  <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
     <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>
       <span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Basic Slider<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
       <span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">tipTransitionName</span>=<span class="hljs-value">"rc-slider-tooltip-zoom-down"</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span> /&gt;</span>

examples/slider.js

@@ -1,14 +1,14 @@
-webpackJsonp([2],{
+webpackJsonp([3],{
 
 /***/ 0:
 /***/ function(module, exports, __webpack_require__) {
 
-	module.exports = __webpack_require__(221);
+	module.exports = __webpack_require__(222);
 
 
 /***/ },
 
-/***/ 221:
+/***/ 222:
 /***/ function(module, exports, __webpack_require__) {
 
 	/* eslint react/no-multi-comp: 0 */

examples/v-marks.html

@@ -2,7 +2,7 @@
 <html>
 
 <head>
-  <title>v-marks.js - example - rc-slider@3.6.2</title>
+  <title>v-marks.js - example - rc-slider@3.7.0</title>
   <meta name="viewport"
         content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
   <meta charset="utf-8"/>
@@ -257,7 +257,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
 <body>
 <div class="container">
   <div class="header">
-    <h1>rc-slider@3.6.2</h1>
+    <h1>rc-slider@3.7.0</h1>
 
     <p>slider ui component for react</p>
   </div>

examples/v-marks.js

@@ -1,14 +1,14 @@
-webpackJsonp([3],{
+webpackJsonp([4],{
 
 /***/ 0:
 /***/ function(module, exports, __webpack_require__) {
 
-	module.exports = __webpack_require__(222);
+	module.exports = __webpack_require__(223);
 
 
 /***/ },
 
-/***/ 222:
+/***/ 223:
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';

examples/v-range.html

@@ -2,7 +2,7 @@
 <html>
 
 <head>
-  <title>v-range.js - example - rc-slider@3.6.2</title>
+  <title>v-range.js - example - rc-slider@3.7.0</title>
   <meta name="viewport"
         content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
   <meta charset="utf-8"/>
@@ -257,7 +257,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
 <body>
 <div class="container">
   <div class="header">
-    <h1>rc-slider@3.6.2</h1>
+    <h1>rc-slider@3.7.0</h1>
 
     <p>slider ui component for react</p>
   </div>
@@ -274,35 +274,35 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
 <span class="hljs-keyword">const</span> style = {float: <span class="hljs-string">'left'</span>, width: <span class="hljs-number">180</span>, height: <span class="hljs-number">400</span>, marginBottom: <span class="hljs-number">160</span>, marginLeft: <span class="hljs-number">50</span>};
 <span class="hljs-keyword">const</span> parentStyle = {overflow: <span class="hljs-string">'hidden'</span>};
 
-<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">log</span>(<span class="hljs-params">value</span>) </span>{
+<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">log</span><span class="hljs-params">(value)</span> </span>{
   <span class="hljs-built_in">console</span>.log(value);
 }
 
 <span class="hljs-keyword">const</span> CustomizedRange = React.createClass({
-  getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
+  getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
     <span class="hljs-keyword">return</span> {
       lowerBound: <span class="hljs-number">20</span>,
       upperBound: <span class="hljs-number">40</span>,
       value: [<span class="hljs-number">20</span>, <span class="hljs-number">40</span>],
     };
   },
-  onLowerBoundChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
+  onLowerBoundChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
     <span class="hljs-keyword">this</span>.setState({ lowerBound: +e.target.value });
   },
-  onUpperBoundChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
+  onUpperBoundChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
     <span class="hljs-keyword">this</span>.setState({ upperBound: +e.target.value });
   },
-  onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">value</span>) </span>{
+  onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(value)</span> </span>{
     log(value);
     <span class="hljs-keyword">this</span>.setState({
       value: value,
     });
   },
-  handleApply: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
+  handleApply: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
     <span class="hljs-keyword">const</span> { lowerBound, upperBound } = <span class="hljs-keyword">this</span>.state;
     <span class="hljs-keyword">this</span>.setState({ value: [lowerBound, upperBound]});
   },
-  render: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
+  render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
     <span class="hljs-keyword">return</span> (
       <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>
         <span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">vertical</span> <span class="hljs-attribute">allowCross</span>=<span class="hljs-value">{false}</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.value}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onSliderChange}</span> /&gt;</span>
@@ -314,33 +314,33 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
         <span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span>
         <span class="hljs-tag">&lt;<span class="hljs-title">button</span> <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{this.handleApply}</span>&gt;</span>Apply<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span>
       <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
-    )</span>;
+    );
   },
 });
 
-<span class="hljs-keyword">const</span> DynamicBounds = React.createClass({
+const DynamicBounds = React.createClass({
   getInitialState() {
-    <span class="hljs-keyword">return</span> {
-      min: <span class="hljs-number">0</span>,
-      max: <span class="hljs-number">100</span>,
+    return {
+      min: 0,
+      max: 100,
     };
   },
-  onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">value</span>) </span>{
+  onSliderChange: function(value) {
     log(value);
   },
-  onMinChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
-    <span class="hljs-keyword">this</span>.setState({
-      min: +e.target.value || <span class="hljs-number">0</span>,
+  onMinChange: function(e) {
+    this.setState({
+      min: +e.target.value || 0,
     });
   },
-  onMaxChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
-    <span class="hljs-keyword">this</span>.setState({
-      max: +e.target.value || <span class="hljs-number">100</span>,
+  onMaxChange: function(e) {
+    this.setState({
+      max: +e.target.value || 100,
     });
   },
-  render: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
-    <span class="hljs-keyword">return</span> (
-      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>
+  render: function() {
+    return (
+      <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>
         <span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">vertical</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">50</span>]} <span class="hljs-attribute">min</span>=<span class="hljs-value">{this.state.min}</span> <span class="hljs-attribute">max</span>=<span class="hljs-value">{this.state.max}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onSliderChange}</span> /&gt;</span>
         <span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>Min: <span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
         <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"number"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.min}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onMinChange}</span> /&gt;</span>
@@ -348,12 +348,12 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
         <span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>Max: <span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
         <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"number"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.max}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onMaxChange}</span> /&gt;</span>
       <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
-    )</span>;
+    );
   },
 });
 
 ReactDOM.render(
-  <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{parentStyle}</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{parentStyle}</span>&gt;</span>
     <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>
       <span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Basic Range，`allowCross=false`<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
       <span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">vertical</span> <span class="hljs-attribute">allowCross</span>=<span class="hljs-value">{false}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[0,</span> <span class="hljs-attribute">20</span>]} <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span> /&gt;</span>

examples/v-range.js

@@ -1,14 +1,14 @@
-webpackJsonp([4],{
+webpackJsonp([5],{
 
 /***/ 0:
 /***/ function(module, exports, __webpack_require__) {
 
-	module.exports = __webpack_require__(223);
+	module.exports = __webpack_require__(224);
 
 
 /***/ },
 
-/***/ 223:
+/***/ 224:
 /***/ function(module, exports, __webpack_require__) {
 
 	/* eslint react/no-multi-comp: 0 */

examples/v-slider.html

@@ -2,7 +2,7 @@
 <html>
 
 <head>
-  <title>v-slider.js - example - rc-slider@3.6.2</title>
+  <title>v-slider.js - example - rc-slider@3.7.0</title>
   <meta name="viewport"
         content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
   <meta charset="utf-8"/>
@@ -257,7 +257,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
 <body>
 <div class="container">
   <div class="header">
-    <h1>rc-slider@3.6.2</h1>
+    <h1>rc-slider@3.7.0</h1>
 
     <p>slider ui component for react</p>
   </div>
@@ -274,53 +274,53 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
 <span class="hljs-keyword">const</span> style = {float: <span class="hljs-string">'left'</span>, width: <span class="hljs-number">200</span>, height: <span class="hljs-number">400</span>, marginBottom: <span class="hljs-number">160</span>, marginLeft: <span class="hljs-number">50</span>};
 <span class="hljs-keyword">const</span> parentStyle = {overflow: <span class="hljs-string">'hidden'</span>};
 
-<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">log</span>(<span class="hljs-params">value</span>) </span>{
+<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">log</span><span class="hljs-params">(value)</span> </span>{
   <span class="hljs-built_in">console</span>.log(value);
 }
 
 
-<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">percentFormatter</span>(<span class="hljs-params">v</span>) </span>{
+<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">percentFormatter</span><span class="hljs-params">(v)</span> </span>{
   <span class="hljs-keyword">return</span> v + <span class="hljs-string">' %'</span>;
 }
 
 <span class="hljs-keyword">const</span> CustomizedSlider = React.createClass({
-  getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
+  getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
     <span class="hljs-keyword">return</span> {
       value: <span class="hljs-number">50</span>,
     };
   },
-  onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">value</span>) </span>{
+  onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(value)</span> </span>{
     log(value);
     <span class="hljs-keyword">this</span>.setState({
       value: value,
     });
   },
-  render: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
+  render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
     <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">vertical</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.value}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onSliderChange}</span> /&gt;</span>;</span>
   },
 });
 
 <span class="hljs-keyword">const</span> DynamicBounds = React.createClass({
-  getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
+  getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
     <span class="hljs-keyword">return</span> {
       min: <span class="hljs-number">0</span>,
       max: <span class="hljs-number">100</span>,
     };
   },
-  onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">value</span>) </span>{
+  onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(value)</span> </span>{
     log(value);
   },
-  onMinChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
+  onMinChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
     <span class="hljs-keyword">this</span>.setState({
       min: +e.target.value || <span class="hljs-number">0</span>,
     });
   },
-  onMaxChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
+  onMaxChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
     <span class="hljs-keyword">this</span>.setState({
       max: +e.target.value || <span class="hljs-number">100</span>,
     });
   },
-  render: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
+  render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
     <span class="hljs-keyword">return</span> (
       <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>
         <span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Slider with dynamic `min` `max`<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
@@ -331,12 +331,12 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
         <span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>Max: <span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
         <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"number"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.max}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onMaxChange}</span> /&gt;</span>
       <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
-    )</span>;
+    );
   },
 });
 
 ReactDOM.render(
-  <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{parentStyle}</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{parentStyle}</span>&gt;</span>
     <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>
       <span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Basic Slider<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
       <span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">vertical</span> <span class="hljs-attribute">tipTransitionName</span>=<span class="hljs-value">"rc-slider-tooltip-zoom-down"</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span> /&gt;</span>

examples/v-slider.js

@@ -1,14 +1,14 @@
-webpackJsonp([5],{
+webpackJsonp([6],{
 
 /***/ 0:
 /***/ function(module, exports, __webpack_require__) {
 
-	module.exports = __webpack_require__(224);
+	module.exports = __webpack_require__(225);
 
 
 /***/ },
 
-/***/ 224:
+/***/ 225:
 /***/ function(module, exports, __webpack_require__) {
 
 	/* eslint react/no-multi-comp: 0 */

index.html

@@ -7,7 +7,7 @@
   <meta charset="utf-8"/>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
-  <title>rc-slider@3.6.2 - slider ui component for react</title>
+  <title>rc-slider@3.7.0 - slider ui component for react</title>
   <style>
     @font-face {
       font-family: octicons-anchor;
@@ -737,13 +737,15 @@
 
 <body>
 <div class="header">
-  <h1>rc-slider@3.6.2</h1>
+  <h1>rc-slider@3.7.0</h1>
 </div>
 <div class="examples">
   <h3>EXAMPLES</h3>
   <div class="examples-body">
     <ul>
       
+      <li><a href="examples/custom-handles.html">custom-handles</a></li>
+      
       <li><a href="examples/marks.html">marks</a></li>
       
       <li><a href="examples/range.html">range</a></li>
@@ -852,6 +854,12 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-t
           <td></td>
           <td>Set current positions of handles. If range is <code>false</code>, the type of <code>defaultValue</code> should be <code>number</code>. Otherwise, <code>[number, number]</code></td>
         </tr>
+        <tr>
+          <td>handle</td>
+          <td>Component</td>
+          <td></td>
+          <td>Provide a custom Handle to use in the slider by passing a component. This component will have a <code>value</code> and <code>offset</code> props used to define custom styling/content.</td>
+        </tr>
         <tr>
           <td>included</td>
           <td>boolean</td>