bump 5.4.0

* Adjust handle drag position to account for the difference between handle origin and mouse or touch event origin.

* Add slider dragOffset tests.

.editorconfig

@@ -0,0 +1,9 @@
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*.{js,css}]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2

.gitignore

@@ -0,0 +1,27 @@
+*.iml
+*.log
+.idea/
+.ipr
+.iws
+*~
+~*
+*.diff
+*.patch
+*.bak
+.DS_Store
+Thumbs.db
+.project
+.*proj
+.svn/
+*.swp
+*.swo
+*.pyc
+*.pyo
+.build
+node_modules
+.cache
+dist
+assets/**/*.css
+build
+lib
+/coverage

.travis.yml

@@ -0,0 +1,42 @@
+language: node_js
+
+sudo: false
+
+notifications:
+  email:
+  - yiminghe@gmail.com
+
+node_js:
+- 4.0.0
+
+before_install:
+- |
+    if ! git diff --name-only $TRAVIS_COMMIT_RANGE | grep -qvE '(\.md$)|(^(docs|examples))/'
+    then
+      echo "Only docs were updated, stopping build process."
+      exit
+    fi
+    phantomjs --version
+
+script:
+- |
+    if [ "$TEST_TYPE" = test ]; then
+      npm test
+    else
+      npm run $TEST_TYPE
+    fi
+
+env:
+  matrix:
+  - TEST_TYPE=lint
+  - TEST_TYPE=test
+  - TEST_TYPE=coverage
+  - TEST_TYPE=saucelabs
+  global:
+  - secure: S1VwbaPzLnSH/IUT/wlJulxAX5VHRIDmSt53h/ycHcZsszUpWcLCJRQAe0fTVB2dAx5MdBbSZ+o+tr3tRwVB5TRAYm0oTCsYAkOZaWOB28RuUQtdGt3wf9xxTG1UiPiaLLUW3waX9zAaf3yqKBcJGf1op0RD8dksxbCFw/7xVbU=
+  - secure: EBEDg8k///IlEsnx0AE8X3mbFl0QE5+xGKbG4AxXlGZda12uTIPUSMKJzdZQ2hVbZXduTzf1cQl9rcu9nGoSnkL/DWnIax9cvHi+1orx5+YPlxPHNWAwWByTnHosBn2MJhfy1s5paJfHC9cUzmmEL6x4fYthWxjsPUo+irEZH6E=
+
+
+matrix:
+  allow_failures:
+  - env: "TEST_TYPE=saucelabs"

HISTORY.md

@@ -0,0 +1,23 @@
+# History
+----
+
+## 5.0.0 / 2016-09-12
+
+[#147](https://github.com/react-component/slider/issues/147) fix style conflicts with rc-tooltip [@benjycui](https://github.com/benjycui)
+[#145](https://github.com/react-component/slider/pull/145) fix `onChange` will be triggered while mousemove [@Fuzzyma](https://github.com/Fuzzyma)
+
+## 4.0.0 / 2016-08-12
+
+[#133](https://github.com/react-component/slider/pull/133) support multi-range ([@sosz](https://github.com/sosz))
+
+## 3.6.0 / 2016-04-01
+
+[#18](https://github.com/react-component/slider/issues/18) add `vertical` props ([@wnlee](https://github.com/WNLee))
+
+...
+
+## 1.2.5 / 2015-07-13
+
+[#8](https://github.com/react-component/slider/issues/8) add `isIncluded` props   ([@simaQ](https://github.com/simaQ))
+
+[#7](https://github.com/react-component/slider/issues/7) add tooltip for handler when slider has no `marks` props   ([@simaQ](https://github.com/simaQ))

LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+Copyright (c) 2015-present Alipay.com, https://www.alipay.com/
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS 
+OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,217 @@
+# rc-slider
+---
+
+slider ui component for react
+
+[![NPM version][npm-image]][npm-url]
+[![build status][travis-image]][travis-url]
+[![Test coverage][coveralls-image]][coveralls-url]
+[![gemnasium deps][gemnasium-image]][gemnasium-url]
+[![node version][node-image]][node-url]
+[![npm download][download-image]][download-url]
+[![Sauce Test Status](https://saucelabs.com/buildstatus/rc-slider)](https://saucelabs.com/u/rc-slider)
+
+[![Sauce Test Status](https://saucelabs.com/browser-matrix/rc-slider.svg)](https://saucelabs.com/u/rc-slider)
+
+[npm-image]: http://img.shields.io/npm/v/rc-slider.svg?style=flat-square
+[npm-url]: http://npmjs.org/package/rc-slider
+[travis-image]: https://img.shields.io/travis/react-component/slider.svg?style=flat-square
+[travis-url]: https://travis-ci.org/react-component/slider
+[coveralls-image]: https://img.shields.io/coveralls/react-component/slider.svg?style=flat-square
+[coveralls-url]: https://coveralls.io/r/react-component/slider?branch=master
+[gemnasium-image]: http://img.shields.io/gemnasium/react-component/slider.svg?style=flat-square
+[gemnasium-url]: https://gemnasium.com/react-component/slider
+[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
+[node-url]: http://nodejs.org/download/
+[download-image]: https://img.shields.io/npm/dm/rc-slider.svg?style=flat-square
+[download-url]: https://npmjs.org/package/rc-slider
+
+## Screenshots
+
+<img src="https://t.alipayobjects.com/images/T1ki8fXeprXXXXXXXX.png" width="550"/>
+
+<img src="https://t.alipayobjects.com/images/T1pPhfXhBqXXXXXXXX.png" width="550"/>
+
+<img src="https://t.alipayobjects.com/images/T1wO8fXd4rXXXXXXXX.png" width="550"/>
+
+<img src="http://i.giphy.com/l46Cs36c9HrHMExoc.gif"/>
+
+
+## Feature
+
+* support ie8,ie8+,chrome,firefox,safari
+
+### Keyboard
+
+
+
+## install
+
+[![rc-slider](https://nodei.co/npm/rc-slider.png)](https://npmjs.org/package/rc-slider)
+
+## Usage
+
+```js
+require('rc-slider/assets/index.css');
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+var Slider = require('rc-slider');
+ReactDOM.render(<Slider />, container);
+```
+
+## API
+
+### props
+
+<table class="table table-bordered table-striped">
+    <thead>
+    <tr>
+        <th style="width: 100px;">name</th>
+        <th style="width: 50px;">type</th>
+        <th style="width: 50px;">default</th>
+        <th>description</th>
+    </tr>
+    </thead>
+    <tbody>
+        <tr>
+          <td>className</td>
+          <td>String</td>
+          <td>rc-slider</td>
+          <td>Additional css class for the root dom node</td>
+        </tr>
+        <tr>
+          <td>min</td>
+          <td>number</td>
+          <td>0</td>
+          <td>The minimum value of the slider</td>
+        </tr>
+        <tr>
+          <td>max</td>
+          <td>number</td>
+          <td>100</td>
+          <td>The maximum value of the slider</td>
+        </tr>
+        <tr>
+          <td>marks</td>
+          <td>object{number: string} or object{number: object{ style, label }}</td>
+          <td>{}</td>
+          <td>Mark on the slider. The key determines the position, and the value determines what will show. If you want to set the style of a specific mark point, the value should be an object which contains `style` and `label` properties.</td>
+        </tr>
+        <tr>
+          <td>step</td>
+          <td>number or `null`</td>
+          <td>1</td>
+          <td>Value to be added or subtracted on each step the slider makes. Must be greater than zero. max - min should be evenly divisible by the step value. When `marks` is not an empty object, `step` can be set to `null`, to make marks as steps.</td>
+        </tr>
+        <tr>
+          <td>range</td>
+          <td>boolean or number</td>
+          <td>false</td>
+          <td>Determines the type of slider. If range is `true`, two handles will be rendered in order to select a range. If range is a number, multiple handles will be rendered (number + 1). Using `range={true}` is equivalent to `range={1}`.</td>
+        </tr>
+        <tr>
+          <td>allowCross</td>
+          <td>boolean</td>
+          <td>true</td>
+          <td>When `range` is `true`, `allowCross` could be set as `true` to allow those handles to cross.</td>
+        </tr>
+        <tr>
+          <td>pushable</td>
+          <td>boolean or number</td>
+          <td>true</td>
+          <td>When `range` is `true`, `pushable` could be set as `true` to allow pushing of surrounding handles when moving an handle. When set to a number, the number will be the minimum ensured distance between handles. Example: <img src="http://i.giphy.com/l46Cs36c9HrHMExoc.gif"/></td>
+        </tr>
+        <tr>
+          <td>vertical</td>
+          <td>boolean</td>
+          <td>false</td>
+          <td>If vertical is `true`, the slider will be vertical.</td>
+        </tr>
+        <tr>
+          <td>defaultValue</td>
+          <td>number or [number, number, ...]</td>
+          <td>0 or [0, 0]</td>
+          <td>Set initial positions of handles. If range is `false`, the type of `defaultValue` should be `number`. Otherwise, `[number, number, ...]`</td>
+        </tr>
+        <tr>
+          <td>value</td>
+          <td>number or [number, number, ...]</td>
+          <td></td>
+          <td>Set current positions of handles. If range is `false`, the type of `defaultValue` should be `number`. Otherwise, `[number, number, ...]`</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 `value` and `offset` props used to define custom styling/content.</td>
+        </tr>
+        <tr>
+          <td>included</td>
+          <td>boolean</td>
+          <td>true</td>
+          <td>If the value is `true`, it means a continuous value interval, otherwise, it is a independent value.</td>
+        </tr>
+        <tr>
+          <td>disabled</td>
+          <td>boolean</td>
+          <td>false</td>
+          <td>If `true`, handles can't be moved.</td>
+        </tr>
+        <tr>
+          <td>tipTransitionName</td>
+          <td>string</td>
+          <td>''</td>
+          <td>Set the animation for tooltip if it shows.</td>
+        </tr>
+        <tr>
+          <td>tipFormatter</td>
+          <td>function or `null`</td>
+          <td></td>
+          <td>Format the value of the tooltip if it shows. If `null` the tooltip will always be hidden. When given a function, the first argument will be the value and the second will be the index of the slider handle.</td>
+        </tr>
+        <tr>
+          <td>dots</td>
+          <td>bool</td>
+          <td>false</td>
+          <td>When the `step` value is greater than 1, you can set the `dots` to  `true` if you want to render the slider with dots.</td>
+        </tr>
+        <tr>
+          <td>onChange</td>
+          <td>function</td>
+          <td>NOOP</td>
+          <td>`onChange` will be triggered while the value of Slider changing.</td>
+        </tr>
+        <tr>
+          <td>onAfterChange</td>
+          <td>function</td>
+          <td>NOOP</td>
+          <td>`onAfterChange` will be triggered when `ontouchend` or `onmouseup` is triggered.</td>
+        </tr>
+    </tbody>
+</table>
+
+## Development
+
+```
+npm install
+npm start
+```
+
+## Example
+
+http://localhost:8005/examples/
+
+online example: http://react-component.github.io/slider/
+
+## Test Case
+
+http://localhost:8005/tests/runner.html?coverage
+
+## Coverage
+
+http://localhost:8005/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8088/tests/runner.html?coverage
+
+## License
+
+rc-slider is released under the MIT license.

assets/index.less

@@ -0,0 +1,289 @@
+@prefixClass: rc-slider;
+
+@disabledColor: #ccc;
+@border-radius-base: 6px;
+@primary-color: #2db7f5;
+@tooltip-color: #fff;
+@tooltip-bg: tint(#666, 4%);
+@tooltip-arrow-width: 4px;
+@tooltip-distance: @tooltip-arrow-width+4;
+@tooltip-arrow-color: @tooltip-bg;
+@ease-out-quint      : cubic-bezier(0.23, 1, 0.32, 1);
+@ease-in-quint       : cubic-bezier(0.755, 0.05, 0.855, 0.06);
+
+.borderBox() {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
+
+  * {
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
+  }
+}
+
+.@{prefixClass} {
+  position: relative;
+  height: 14px;
+  padding: 5px 0;
+  width: 100%;
+  border-radius: @border-radius-base;
+  .borderBox();
+
+  &-rail {
+    position: absolute;
+    width: 100%;
+    background-color: #e9e9e9;
+    height: 4px;
+  }
+
+  &-track {
+    position: absolute;
+    left: 0;
+    height: 4px;
+    border-radius: @border-radius-base;
+    background-color: tint(@primary-color, 60%);
+  }
+
+  &-handle {
+    position: absolute;
+    margin-left: -7px;
+    margin-top: -5px;
+    width: 14px;
+    height: 14px;
+    cursor: pointer;
+    border-radius: 50%;
+    border: solid 2px tint(@primary-color, 50%);
+    background-color: #fff;
+
+    &:hover {
+      border-color: tint(@primary-color, 20%);
+    }
+    &-active {
+      &:active {
+        border-color: tint(@primary-color, 20%);
+        box-shadow: 0 0 5px tint(@primary-color, 20%);
+      }
+    }
+  }
+
+  &-mark {
+    position: absolute;
+    top: 18px;
+    left: 0;
+    width: 100%;
+    font-size: 12px;
+  }
+
+  &-mark-text {
+    position: absolute;
+    display: inline-block;
+    vertical-align: middle;
+    text-align: center;
+    cursor: pointer;
+    color: #999;
+
+    &-active {
+      color: #666;
+    }
+  }
+
+  &-step {
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    background: transparent;
+  }
+
+  &-dot {
+    position: absolute;
+    bottom: -2px;
+    margin-left: -4px;
+    width: 8px;
+    height: 8px;
+    border: 2px solid #e9e9e9;
+    background-color: #fff;
+    cursor: pointer;
+    border-radius: 50%;
+    vertical-align: middle;
+    &:first-child {
+      margin-left: -4px;
+    }
+    &:last-child {
+      margin-left: -4px;
+    }
+    &-active {
+      border-color: tint(@primary-color, 50%);
+    }
+  }
+
+  &-disabled {
+    background-color: #e9e9e9;
+
+    .@{prefixClass}-track {
+      background-color: @disabledColor;
+    }
+
+    .@{prefixClass}-handle, .@{prefixClass}-dot {
+      border-color: @disabledColor;
+      background-color: #fff;
+      cursor: not-allowed;
+    }
+
+    .@{prefixClass}-mark-text, .@{prefixClass}-dot {
+      cursor: not-allowed!important;
+    }
+  }
+}
+
+.@{prefixClass}-vertical {
+  width: 14px;
+  height: 100%;
+  padding: 0 5px;
+
+  .@{prefixClass} {
+    &-rail {
+      height: 100%;
+      width: 4px;
+    }
+
+    &-track {
+      left: 5px;
+      bottom: 0;
+      width: 4px;
+    }
+
+    &-handle {
+      margin-left: -5px;
+      margin-bottom: -7px;
+    }
+
+    &-mark {
+      top: 0;
+      left: 18px;
+      height: 100%;
+    }
+
+    &-step {
+      height: 100%;
+      width: 4px;
+    }
+
+    &-dot {
+      left: 2px;
+      margin-bottom: -4px;
+      &:first-child {
+        margin-bottom: -4px;
+      }
+      &:last-child {
+        margin-bottom: -4px;
+      }
+    }
+  }
+}
+
+.motion-common() {
+  animation-duration: .3s;
+  animation-fill-mode: both;
+  display: block !important;
+}
+
+.make-motion(@className, @keyframeName) {
+  .@{className}-enter, .@{className}-appear {
+    .motion-common();
+    animation-play-state: paused;
+  }
+  .@{className}-leave {
+    .motion-common();
+    animation-play-state: paused;
+  }
+  .@{className}-enter.@{className}-enter-active, .@{className}-appear.@{className}-appear-active {
+    animation-name: ~"@{keyframeName}In";
+    animation-play-state: running;
+  }
+  .@{className}-leave.@{className}-leave-active {
+    animation-name: ~"@{keyframeName}Out";
+    animation-play-state: running;
+  }
+}
+.zoom-motion(@className, @keyframeName) {
+  .make-motion(@className, @keyframeName);
+  .@{className}-enter, .@{className}-appear {
+    transform: scale(0, 0); // need this by yiminghe
+    animation-timing-function: @ease-out-quint;
+  }
+  .@{className}-leave {
+    animation-timing-function: @ease-in-quint;
+  }
+}
+.zoom-motion(rc-slider-tooltip-zoom-down, rcSliderTooltipZoomDown);
+
+@keyframes rcSliderTooltipZoomDownIn {
+  0% {
+    opacity: 0;
+    transform-origin: 50% 100%;
+    transform: scale(0, 0);
+  }
+  100% {
+    transform-origin: 50% 100%;
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes rcSliderTooltipZoomDownOut {
+  0% {
+    transform-origin: 50% 100%;
+    transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 50% 100%;
+    transform: scale(0, 0);
+  }
+}
+
+.@{prefixClass}-tooltip {
+  position: absolute;
+  left: -9999px;
+  top: -9999px;
+  visibility: visible;
+
+  .borderBox();
+
+  &-hidden {
+    display: none;
+  }
+
+  &-placement-top {
+    padding: @tooltip-arrow-width 0 @tooltip-distance 0;
+  }
+
+  &-inner {
+    padding: 6px 2px;
+    min-width: 24px;
+    height: 24px;
+    font-size: 12px;
+    line-height: 1;
+    color: @tooltip-color;
+    text-align: center;
+    text-decoration: none;
+    background-color: @tooltip-bg;
+    border-radius: @border-radius-base;
+    box-shadow: 0 0 4px #d9d9d9;
+  }
+
+  &-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+  }
+
+  &-placement-top &-arrow {
+    bottom: @tooltip-distance - @tooltip-arrow-width;
+    left: 50%;
+    margin-left: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-top-color: @tooltip-arrow-color;
+  }
+}

examples/common.css

@@ -1,292 +0,0 @@
-.rc-slider {
-  position: relative;
-  height: 14px;
-  padding: 5px 0;
-  width: 100%;
-  border-radius: 6px;
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-.rc-slider * {
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-.rc-slider-rail {
-  position: absolute;
-  width: 100%;
-  background-color: #e9e9e9;
-  height: 4px;
-}
-.rc-slider-track {
-  position: absolute;
-  left: 0;
-  height: 4px;
-  border-radius: 6px;
-  background-color: #abe2fb;
-}
-.rc-slider-handle {
-  position: absolute;
-  margin-left: -7px;
-  margin-top: -5px;
-  width: 14px;
-  height: 14px;
-  cursor: pointer;
-  border-radius: 50%;
-  border: solid 2px #96dbfa;
-  background-color: #fff;
-}
-.rc-slider-handle:hover {
-  border-color: #57c5f7;
-}
-.rc-slider-handle-active:active {
-  border-color: #57c5f7;
-  box-shadow: 0 0 5px #57c5f7;
-}
-.rc-slider-mark {
-  position: absolute;
-  top: 18px;
-  left: 0;
-  width: 100%;
-  font-size: 12px;
-}
-.rc-slider-mark-text {
-  position: absolute;
-  display: inline-block;
-  vertical-align: middle;
-  text-align: center;
-  cursor: pointer;
-  color: #999;
-}
-.rc-slider-mark-text-active {
-  color: #666;
-}
-.rc-slider-step {
-  position: absolute;
-  width: 100%;
-  height: 4px;
-  background: transparent;
-}
-.rc-slider-dot {
-  position: absolute;
-  bottom: -2px;
-  margin-left: -4px;
-  width: 8px;
-  height: 8px;
-  border: 2px solid #e9e9e9;
-  background-color: #fff;
-  cursor: pointer;
-  border-radius: 50%;
-  vertical-align: middle;
-}
-.rc-slider-dot:first-child {
-  margin-left: -4px;
-}
-.rc-slider-dot:last-child {
-  margin-left: -4px;
-}
-.rc-slider-dot-active {
-  border-color: #96dbfa;
-}
-.rc-slider-disabled {
-  background-color: #e9e9e9;
-}
-.rc-slider-disabled .rc-slider-track {
-  background-color: #ccc;
-}
-.rc-slider-disabled .rc-slider-handle,
-.rc-slider-disabled .rc-slider-dot {
-  border-color: #ccc;
-  background-color: #fff;
-  cursor: not-allowed;
-}
-.rc-slider-disabled .rc-slider-mark-text,
-.rc-slider-disabled .rc-slider-dot {
-  cursor: not-allowed !important;
-}
-.rc-slider-vertical {
-  width: 14px;
-  height: 100%;
-  padding: 0 5px;
-}
-.rc-slider-vertical .rc-slider-rail {
-  height: 100%;
-  width: 4px;
-}
-.rc-slider-vertical .rc-slider-track {
-  left: 5px;
-  bottom: 0;
-  width: 4px;
-}
-.rc-slider-vertical .rc-slider-handle {
-  margin-left: -5px;
-  margin-bottom: -7px;
-}
-.rc-slider-vertical .rc-slider-mark {
-  top: 0;
-  left: 18px;
-  height: 100%;
-}
-.rc-slider-vertical .rc-slider-step {
-  height: 100%;
-  width: 4px;
-}
-.rc-slider-vertical .rc-slider-dot {
-  left: 2px;
-  margin-bottom: -4px;
-}
-.rc-slider-vertical .rc-slider-dot:first-child {
-  margin-bottom: -4px;
-}
-.rc-slider-vertical .rc-slider-dot:last-child {
-  margin-bottom: -4px;
-}
-.rc-slider-tooltip-zoom-down-enter,
-.rc-slider-tooltip-zoom-down-appear {
-  -webkit-animation-duration: .3s;
-          animation-duration: .3s;
-  -webkit-animation-fill-mode: both;
-          animation-fill-mode: both;
-  display: block !important;
-  -webkit-animation-play-state: paused;
-          animation-play-state: paused;
-}
-.rc-slider-tooltip-zoom-down-leave {
-  -webkit-animation-duration: .3s;
-          animation-duration: .3s;
-  -webkit-animation-fill-mode: both;
-          animation-fill-mode: both;
-  display: block !important;
-  -webkit-animation-play-state: paused;
-          animation-play-state: paused;
-}
-.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
-.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
-  -webkit-animation-name: rcSliderTooltipZoomDownIn;
-          animation-name: rcSliderTooltipZoomDownIn;
-  -webkit-animation-play-state: running;
-          animation-play-state: running;
-}
-.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
-  -webkit-animation-name: rcSliderTooltipZoomDownOut;
-          animation-name: rcSliderTooltipZoomDownOut;
-  -webkit-animation-play-state: running;
-          animation-play-state: running;
-}
-.rc-slider-tooltip-zoom-down-enter,
-.rc-slider-tooltip-zoom-down-appear {
-  -webkit-transform: scale(0, 0);
-          transform: scale(0, 0);
-  -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-          animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-}
-.rc-slider-tooltip-zoom-down-leave {
-  -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-          animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-}
-@-webkit-keyframes rcSliderTooltipZoomDownIn {
-  0% {
-    opacity: 0;
-    -webkit-transform-origin: 50% 100%;
-            transform-origin: 50% 100%;
-    -webkit-transform: scale(0, 0);
-            transform: scale(0, 0);
-  }
-  100% {
-    -webkit-transform-origin: 50% 100%;
-            transform-origin: 50% 100%;
-    -webkit-transform: scale(1, 1);
-            transform: scale(1, 1);
-  }
-}
-@keyframes rcSliderTooltipZoomDownIn {
-  0% {
-    opacity: 0;
-    -webkit-transform-origin: 50% 100%;
-            transform-origin: 50% 100%;
-    -webkit-transform: scale(0, 0);
-            transform: scale(0, 0);
-  }
-  100% {
-    -webkit-transform-origin: 50% 100%;
-            transform-origin: 50% 100%;
-    -webkit-transform: scale(1, 1);
-            transform: scale(1, 1);
-  }
-}
-@-webkit-keyframes rcSliderTooltipZoomDownOut {
-  0% {
-    -webkit-transform-origin: 50% 100%;
-            transform-origin: 50% 100%;
-    -webkit-transform: scale(1, 1);
-            transform: scale(1, 1);
-  }
-  100% {
-    opacity: 0;
-    -webkit-transform-origin: 50% 100%;
-            transform-origin: 50% 100%;
-    -webkit-transform: scale(0, 0);
-            transform: scale(0, 0);
-  }
-}
-@keyframes rcSliderTooltipZoomDownOut {
-  0% {
-    -webkit-transform-origin: 50% 100%;
-            transform-origin: 50% 100%;
-    -webkit-transform: scale(1, 1);
-            transform: scale(1, 1);
-  }
-  100% {
-    opacity: 0;
-    -webkit-transform-origin: 50% 100%;
-            transform-origin: 50% 100%;
-    -webkit-transform: scale(0, 0);
-            transform: scale(0, 0);
-  }
-}
-.rc-slider-tooltip {
-  position: absolute;
-  left: -9999px;
-  top: -9999px;
-  visibility: visible;
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-.rc-slider-tooltip * {
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-.rc-slider-tooltip-hidden {
-  display: none;
-}
-.rc-slider-tooltip-placement-top {
-  padding: 4px 0 8px 0;
-}
-.rc-slider-tooltip-inner {
-  padding: 6px 2px;
-  min-width: 24px;
-  height: 24px;
-  font-size: 12px;
-  line-height: 1;
-  color: #fff;
-  text-align: center;
-  text-decoration: none;
-  background-color: #6c6c6c;
-  border-radius: 6px;
-  box-shadow: 0 0 4px #d9d9d9;
-}
-.rc-slider-tooltip-arrow {
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
-}
-.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
-  bottom: 4px;
-  left: 50%;
-  margin-left: -4px;
-  border-width: 4px 4px 0;
-  border-top-color: #6c6c6c;
-}
-
-/*# sourceMappingURL=common.css.map*/

examples/custom-handles.html

@@ -1,332 +1 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <title>custom-handles.js - example - rc-slider@5.4.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="https://a.alipayobjects.com/normalize.css/3.0.1/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]-->
-  <script src="https://as.alipayobjects.com/g/component/??modernizr/2.8.3/modernizr.js,fastclick/1.0.6/fastclick.js"></script>
-  <script>
-  if(!window.Promise) {
-    document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
-  }
-  </script>
-  <link rel="stylesheet" href="common.css" />
-</head>
-
-<body>
-  <div class="container">
-    <div class="header">
-      <h1>rc-slider@5.4.0</h1>
-
-      <p>slider ui component for react</p>
-    </div>
-    <div class="example" id="__react-content"></div>
-
-    <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>,
-};
-
-<span class="hljs-keyword">const</span> CustomHandle = React.createClass({
-  propTypes: {
-    value: React.PropTypes.any,
-    offset: React.PropTypes.number,
-  },
-  render() {
-    <span class="hljs-keyword">const</span> props = <span class="hljs-keyword">this</span>.props;
-    <span class="hljs-keyword">const</span> style = <span class="hljs-built_in">Object</span>.assign({ left: <span class="hljs-string">`<span class="hljs-subst">${props.offset}</span>%`</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>
-    )</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> <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>
-  <script>FastClick.attach(document.body);</script>
-  <script src="common.js?nowrap"></script>
-  <script src="custom-handles.js?nowrap"></script>
-</body>
-
-</html>
+placeholder

examples/custom-handles.js

@@ -1,80 +1,47 @@
-webpackJsonp([0],[
-/* 0 */
-/***/ function(module, exports, __webpack_require__) {
+require('rc-slider/assets/index.less');
 
-	module.exports = __webpack_require__(1);
+const React = require('react');
+const ReactDOM = require('react-dom');
+const Slider = require('rc-slider');
 
+const wrapperStyle = { width: 400, margin: 50 };
 
-/***/ },
-/* 1 */
-/***/ function(module, exports, __webpack_require__) {
+const handleStyle = {
+  position: 'absolute',
+  transform: 'translate(-50%, -50%)',
+  cursor: 'pointer',
+  padding: '2px',
+  border: '2px solid #abe2fb',
+  borderRadius: '3px',
+  background: '#fff',
+  fontSize: '14px',
+  textAlign: 'center',
+};
 
-	'use strict';
-	
-	__webpack_require__(2);
-	
-	var React = __webpack_require__(3);
-	var ReactDOM = __webpack_require__(34);
-	var Slider = __webpack_require__(180);
-	
-	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'
-	};
-	
-	var CustomHandle = React.createClass({
-	  displayName: 'CustomHandle',
-	
-	  propTypes: {
-	    value: React.PropTypes.any,
-	    offset: React.PropTypes.number
-	  },
-	  render: function render() {
-	    var props = this.props;
-	    var style = Object.assign({ left: props.offset + '%' }, handleStyle);
-	    return React.createElement(
-	      'div',
-	      { style: style },
-	      'val: ',
-	      props.value
-	    );
-	  }
-	});
-	
-	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'));
+const CustomHandle = React.createClass({
+  propTypes: {
+    value: React.PropTypes.any,
+    offset: React.PropTypes.number,
+  },
+  render() {
+    const props = this.props;
+    const style = Object.assign({ left: `${props.offset}%` }, handleStyle);
+    return (
+        <div style={style}>val: {props.value}</div>
+    );
+  },
+});
 
-/***/ }
-]);
-//# sourceMappingURL=custom-handles.js.map
+ReactDOM.render(
+  <div>
+    <div style={wrapperStyle}>
+      <p>Default slider</p>
+      <Slider min={0} max={20} defaultValue={3} />
+    </div>
+    <div style={wrapperStyle}>
+      <p>Slider with custom handle</p>
+      <Slider min={0} max={20} defaultValue={3} handle={<CustomHandle />} />
+    </div>
+  </div>,
+  document.getElementById('__react-content')
+);

examples/custom-handles.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["webpack:///./examples/custom-handles.js"],"names":["require","React","ReactDOM","Slider","wrapperStyle","width","margin","handleStyle","position","transform","cursor","padding","border","borderRadius","background","fontSize","textAlign","CustomHandle","createClass","propTypes","value","PropTypes","any","offset","number","render","props","style","Object","assign","left","document","getElementById"],"mappings":";;;;;;;;;;;;;AAAA,oBAAAA,CAAQ,CAAR;;AAEA,KAAMC,QAAQ,mBAAAD,CAAQ,CAAR,CAAd;AACA,KAAME,WAAW,mBAAAF,CAAQ,EAAR,CAAjB;AACA,KAAMG,SAAS,mBAAAH,CAAQ,GAAR,CAAf;;AAEA,KAAMI,eAAe,EAAEC,OAAO,GAAT,EAAcC,QAAQ,EAAtB,EAArB;;AAEA,KAAMC,cAAc;AAClBC,aAAU,UADQ;AAElBC,cAAW,uBAFO;AAGlBC,WAAQ,SAHU;AAIlBC,YAAS,KAJS;AAKlBC,WAAQ,mBALU;AAMlBC,iBAAc,KANI;AAOlBC,eAAY,MAPM;AAQlBC,aAAU,MARQ;AASlBC,cAAW;AATO,EAApB;;AAYA,KAAMC,eAAehB,MAAMiB,WAAN,CAAkB;AAAA;;AACrCC,cAAW;AACTC,YAAOnB,MAAMoB,SAAN,CAAgBC,GADd;AAETC,aAAQtB,MAAMoB,SAAN,CAAgBG;AAFf,IAD0B;AAKrCC,SALqC,oBAK5B;AACP,SAAMC,QAAQ,KAAKA,KAAnB;AACA,SAAMC,QAAQC,OAAOC,MAAP,CAAc,EAAEC,MAASJ,MAAMH,MAAf,MAAF,EAAd,EAA4ChB,WAA5C,CAAd;AACA,YACI;AAAA;AAAA,SAAK,OAAOoB,KAAZ;AAAA;AAAyBD,aAAMN;AAA/B,MADJ;AAGD;AAXoC,EAAlB,CAArB;;AAcAlB,UAASuB,MAAT,CACE;AAAA;AAAA;AACE;AAAA;AAAA,OAAK,OAAOrB,YAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,KAAK,CAAb,EAAgB,KAAK,EAArB,EAAyB,cAAc,CAAvC;AAFF,IADF;AAKE;AAAA;AAAA,OAAK,OAAOA,YAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,KAAK,CAAb,EAAgB,KAAK,EAArB,EAAyB,cAAc,CAAvC,EAA0C,QAAQ,oBAAC,YAAD,OAAlD;AAFF;AALF,EADF,EAWE2B,SAASC,cAAT,CAAwB,iBAAxB,CAXF,E","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};\n\nconst CustomHandle = React.createClass({\n  propTypes: {\n    value: React.PropTypes.any,\n    offset: React.PropTypes.number,\n  },\n  render() {\n    const props = this.props;\n    const style = Object.assign({ left: `${props.offset}%` }, handleStyle);\n    return (\n        <div style={style}>val: {props.value}</div>\n    );\n  },\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\n// WEBPACK FOOTER //\n// ./examples/custom-handles.js"],"sourceRoot":""}

examples/index.html

@@ -1 +0,0 @@
-<script>location.href="../";</script>

examples/marks.html

@@ -1,340 +1 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <title>marks.js - example - rc-slider@5.4.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="https://a.alipayobjects.com/normalize.css/3.0.1/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]-->
-  <script src="https://as.alipayobjects.com/g/component/??modernizr/2.8.3/modernizr.js,fastclick/1.0.6/fastclick.js"></script>
-  <script>
-  if(!window.Promise) {
-    document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
-  }
-  </script>
-  <link rel="stylesheet" href="common.css" />
-</head>
-
-<body>
-  <div class="container">
-    <div class="header">
-      <h1>rc-slider@5.4.0</h1>
-
-      <p>slider ui component for react</p>
-    </div>
-    <div class="example" id="__react-content"></div>
-
-    <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> style = { width: <span class="hljs-number">400</span>, margin: <span class="hljs-number">50</span> };
-<span class="hljs-keyword">const</span> marks = {
-  <span class="hljs-string">'-10'</span>: <span class="hljs-string">'-10°C'</span>,
-  <span class="hljs-number">0</span>: <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">strong</span>&gt;</span>0°C<span class="hljs-tag">&lt;/<span class="hljs-title">strong</span>&gt;</span>,
-  26: '26°C',
-  37: '37°C',
-  50: '50°C',
-  100: {
-    style: {
-      color: 'red',
-    },
-    label: <span class="hljs-tag">&lt;<span class="hljs-title">strong</span>&gt;</span>100°C<span class="hljs-tag">&lt;/<span class="hljs-title">strong</span>&gt;</span>,
-  },
-};
-
-function log(value) {
-  console.log(value);
-}
-
-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">{style}</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Slider with marks, `step=null`<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">{-10}</span> <span class="hljs-attribute">marks</span>=<span class="hljs-value">{marks}</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">{null}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{20}</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>Slider with marks and steps<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">dots</span> <span class="hljs-attribute">min</span>=<span class="hljs-value">{-10}</span> <span class="hljs-attribute">marks</span>=<span class="hljs-value">{marks}</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">{10}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{20}</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>Slider with marks, `included=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">min</span>=<span class="hljs-value">{-10}</span> <span class="hljs-attribute">marks</span>=<span class="hljs-value">{marks}</span> <span class="hljs-attribute">included</span>=<span class="hljs-value">{false}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{20}</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>Slider with marks and steps, `included=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">min</span>=<span class="hljs-value">{-10}</span> <span class="hljs-attribute">marks</span>=<span class="hljs-value">{marks}</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">{10}</span> <span class="hljs-attribute">included</span>=<span class="hljs-value">{false}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{20}</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>Range with marks<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">{-10}</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">marks</span>=<span class="hljs-value">{marks}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">40</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>Range with marks and steps<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">{-10}</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">marks</span>=<span class="hljs-value">{marks}</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">{10}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">40</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>&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>
-  <script>FastClick.attach(document.body);</script>
-  <script src="common.js?nowrap"></script>
-  <script src="marks.js?nowrap"></script>
-</body>
-
-</html>
+placeholder

examples/marks.js

@@ -1,117 +1,55 @@
-webpackJsonp([1],{
+require('rc-slider/assets/index.less');
 
-/***/ 0:
-/***/ function(module, exports, __webpack_require__) {
+const React = require('react');
+const ReactDOM = require('react-dom');
+const Slider = require('rc-slider');
 
-	module.exports = __webpack_require__(323);
+const style = { width: 400, margin: 50 };
+const marks = {
+  '-10': '-10°C',
+  0: <strong>0°C</strong>,
+  26: '26°C',
+  37: '37°C',
+  50: '50°C',
+  100: {
+    style: {
+      color: 'red',
+    },
+    label: <strong>100°C</strong>,
+  },
+};
 
+function log(value) {
+  console.log(value);
+}
 
-/***/ },
+ReactDOM.render(
+  <div>
+    <div style={style}>
+      <p>Slider with marks, `step=null`</p>
+      <Slider min={-10} marks={marks} step={null} onChange={log} defaultValue={20} />
+    </div>
+    <div style={style}>
+      <p>Slider with marks and steps</p>
+      <Slider dots min={-10} marks={marks} step={10} onChange={log} defaultValue={20} />
+    </div>
 
-/***/ 323:
-/***/ function(module, exports, __webpack_require__) {
+    <div style={style}>
+      <p>Slider with marks, `included=false`</p>
+      <Slider min={-10} marks={marks} included={false} defaultValue={20} />
+    </div>
+    <div style={style}>
+      <p>Slider with marks and steps, `included=false`</p>
+      <Slider min={-10} marks={marks} step={10} included={false} defaultValue={20} />
+    </div>
 
-	'use strict';
-	
-	__webpack_require__(2);
-	
-	var React = __webpack_require__(3);
-	var ReactDOM = __webpack_require__(34);
-	var Slider = __webpack_require__(180);
-	
-	var style = { width: 400, margin: 50 };
-	var marks = {
-	  '-10': '-10°C',
-	  0: React.createElement(
-	    'strong',
-	    null,
-	    '0\xB0C'
-	  ),
-	  26: '26°C',
-	  37: '37°C',
-	  50: '50°C',
-	  100: {
-	    style: {
-	      color: 'red'
-	    },
-	    label: React.createElement(
-	      'strong',
-	      null,
-	      '100\xB0C'
-	    )
-	  }
-	};
-	
-	function log(value) {
-	  console.log(value);
-	}
-	
-	ReactDOM.render(React.createElement(
-	  'div',
-	  null,
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Slider with marks, `step=null`'
-	    ),
-	    React.createElement(Slider, { min: -10, marks: marks, step: null, onChange: log, defaultValue: 20 })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Slider with marks and steps'
-	    ),
-	    React.createElement(Slider, { dots: true, min: -10, marks: marks, step: 10, onChange: log, defaultValue: 20 })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Slider with marks, `included=false`'
-	    ),
-	    React.createElement(Slider, { min: -10, marks: marks, included: false, defaultValue: 20 })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Slider with marks and steps, `included=false`'
-	    ),
-	    React.createElement(Slider, { min: -10, marks: marks, step: 10, included: false, defaultValue: 20 })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Range with marks'
-	    ),
-	    React.createElement(Slider, { min: -10, range: true, marks: marks, onChange: log, defaultValue: [20, 40] })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Range with marks and steps'
-	    ),
-	    React.createElement(Slider, { min: -10, range: true, marks: marks, step: 10, onChange: log, defaultValue: [20, 40] })
-	  )
-	), document.getElementById('__react-content'));
-
-/***/ }
-
-});
-//# sourceMappingURL=marks.js.map
+    <div style={style}>
+      <p>Range with marks</p>
+      <Slider min={-10} range marks={marks} onChange={log} defaultValue={[20, 40]} />
+    </div>
+    <div style={style}>
+      <p>Range with marks and steps</p>
+      <Slider min={-10} range marks={marks} step={10} onChange={log} defaultValue={[20, 40]} />
+    </div>
+  </div>
+  , document.getElementById('__react-content'));

examples/marks.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["webpack:///./examples/marks.js"],"names":["require","React","ReactDOM","Slider","style","width","margin","marks","color","label","log","value","console","render","document","getElementById"],"mappings":";;;;;;;;;;;;;;;AAAA,oBAAAA,CAAQ,CAAR;;AAEA,KAAMC,QAAQ,mBAAAD,CAAQ,CAAR,CAAd;AACA,KAAME,WAAW,mBAAAF,CAAQ,EAAR,CAAjB;AACA,KAAMG,SAAS,mBAAAH,CAAQ,GAAR,CAAf;;AAEA,KAAMI,QAAQ,EAAEC,OAAO,GAAT,EAAcC,QAAQ,EAAtB,EAAd;AACA,KAAMC,QAAQ;AACZ,UAAO,OADK;AAEZ,MAAG;AAAA;AAAA;AAAA;AAAA,IAFS;AAGZ,OAAI,MAHQ;AAIZ,OAAI,MAJQ;AAKZ,OAAI,MALQ;AAMZ,QAAK;AACHH,YAAO;AACLI,cAAO;AADF,MADJ;AAIHC,YAAO;AAAA;AAAA;AAAA;AAAA;AAJJ;AANO,EAAd;;AAcA,UAASC,GAAT,CAAaC,KAAb,EAAoB;AAClBC,WAAQF,GAAR,CAAYC,KAAZ;AACD;;AAEDT,UAASW,MAAT,CACE;AAAA;AAAA;AACE;AAAA;AAAA,OAAK,OAAOT,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,KAAK,CAAC,EAAd,EAAkB,OAAOG,KAAzB,EAAgC,MAAM,IAAtC,EAA4C,UAAUG,GAAtD,EAA2D,cAAc,EAAzE;AAFF,IADF;AAKE;AAAA;AAAA,OAAK,OAAON,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,UAAR,EAAa,KAAK,CAAC,EAAnB,EAAuB,OAAOG,KAA9B,EAAqC,MAAM,EAA3C,EAA+C,UAAUG,GAAzD,EAA8D,cAAc,EAA5E;AAFF,IALF;AAUE;AAAA;AAAA,OAAK,OAAON,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,KAAK,CAAC,EAAd,EAAkB,OAAOG,KAAzB,EAAgC,UAAU,KAA1C,EAAiD,cAAc,EAA/D;AAFF,IAVF;AAcE;AAAA;AAAA,OAAK,OAAOH,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,KAAK,CAAC,EAAd,EAAkB,OAAOG,KAAzB,EAAgC,MAAM,EAAtC,EAA0C,UAAU,KAApD,EAA2D,cAAc,EAAzE;AAFF,IAdF;AAmBE;AAAA;AAAA,OAAK,OAAOH,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,KAAK,CAAC,EAAd,EAAkB,WAAlB,EAAwB,OAAOG,KAA/B,EAAsC,UAAUG,GAAhD,EAAqD,cAAc,CAAC,EAAD,EAAK,EAAL,CAAnE;AAFF,IAnBF;AAuBE;AAAA;AAAA,OAAK,OAAON,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,KAAK,CAAC,EAAd,EAAkB,WAAlB,EAAwB,OAAOG,KAA/B,EAAsC,MAAM,EAA5C,EAAgD,UAAUG,GAA1D,EAA+D,cAAc,CAAC,EAAD,EAAK,EAAL,CAA7E;AAFF;AAvBF,EADF,EA6BII,SAASC,cAAT,CAAwB,iBAAxB,CA7BJ,E","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"],"sourceRoot":""}

examples/range.html

@@ -1,408 +1 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <title>range.js - example - rc-slider@5.4.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="https://a.alipayobjects.com/normalize.css/3.0.1/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]-->
-  <script src="https://as.alipayobjects.com/g/component/??modernizr/2.8.3/modernizr.js,fastclick/1.0.6/fastclick.js"></script>
-  <script>
-  if(!window.Promise) {
-    document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
-  }
-  </script>
-  <link rel="stylesheet" href="common.css" />
-</head>
-
-<body>
-  <div class="container">
-    <div class="header">
-      <h1>rc-slider@5.4.0</h1>
-
-      <p>slider ui component for react</p>
-    </div>
-    <div class="example" id="__react-content"></div>
-
-    <div class="highlight"><pre><code language="js"><span class="hljs-comment">/* eslint react/no-multi-comp: 0 */</span>
-<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> 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-built_in">console</span>.log(value);
-}
-
-<span class="hljs-keyword">const</span> CustomizedRange = React.createClass({
-  getInitialState() {
-    <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(e) {
-    <span class="hljs-keyword">this</span>.setState({ lowerBound: +e.target.value });
-  },
-  onUpperBoundChange(e) {
-    <span class="hljs-keyword">this</span>.setState({ upperBound: +e.target.value });
-  },
-  onSliderChange(value) {
-    log(value);
-    <span class="hljs-keyword">this</span>.setState({
-      value,
-    });
-  },
-  handleApply() {
-    <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-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>
-        <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.lowerBound}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onLowerBoundChange}</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">label</span>&gt;</span>UpperBound: <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.upperBound}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onUpperBoundChange}</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">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">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({
-  getInitialState() {
-    <span class="hljs-keyword">return</span> {
-      min: <span class="hljs-number">0</span>,
-      max: <span class="hljs-number">100</span>,
-    };
-  },
-  onSliderChange(value) {
-    log(value);
-  },
-  onMinChange(e) {
-    <span class="hljs-keyword">this</span>.setState({
-      min: +e.target.value || <span class="hljs-number">0</span>,
-    });
-  },
-  onMaxChange(e) {
-    <span class="hljs-keyword">this</span>.setState({
-      max: +e.target.value || <span class="hljs-number">100</span>,
-    });
-  },
-  render() {
-    <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>
-        <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>
-        <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">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> <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>
-    <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，`step=20` <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">step</span>=<span class="hljs-value">{20}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">20</span>]} <span class="hljs-attribute">onBeforeChange</span>=<span class="hljs-value">{log}</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，`step=20, dots` <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">dots</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">{20}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">40</span>]} <span class="hljs-attribute">onAfterChange</span>=<span class="hljs-value">{log}</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>Controlled Range<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">value</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">40</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>Multi Range<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-value">{3}</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">40</span>, <span class="hljs-attribute">60</span>, <span class="hljs-attribute">80</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>Customized Range<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-title">CustomizedRange</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>Range with dynamic `max` `min`<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-title">DynamicBounds</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>&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>
-  <script>FastClick.attach(document.body);</script>
-  <script src="common.js?nowrap"></script>
-  <script src="range.js?nowrap"></script>
-</body>
-
-</html>
+placeholder

examples/range.js

@@ -1,212 +1,123 @@
-webpackJsonp([2],{
+/* eslint react/no-multi-comp: 0 */
+require('rc-slider/assets/index.less');
 
-/***/ 0:
-/***/ function(module, exports, __webpack_require__) {
+const React = require('react');
+const ReactDOM = require('react-dom');
+const Slider = require('rc-slider');
 
-	module.exports = __webpack_require__(324);
+const style = { width: 400, margin: 50 };
 
+function log(value) {
+  console.log(value);
+}
 
-/***/ },
-
-/***/ 324:
-/***/ function(module, exports, __webpack_require__) {
-
-	'use strict';
-	
-	/* eslint react/no-multi-comp: 0 */
-	__webpack_require__(2);
-	
-	var React = __webpack_require__(3);
-	var ReactDOM = __webpack_require__(34);
-	var Slider = __webpack_require__(180);
-	
-	var style = { width: 400, margin: 50 };
-	
-	function log(value) {
-	  console.log(value);
-	}
-	
-	var CustomizedRange = React.createClass({
-	  displayName: 'CustomizedRange',
-	  getInitialState: function getInitialState() {
-	    return {
-	      lowerBound: 20,
-	      upperBound: 40,
-	      value: [20, 40]
-	    };
-	  },
-	  onLowerBoundChange: function onLowerBoundChange(e) {
-	    this.setState({ lowerBound: +e.target.value });
-	  },
-	  onUpperBoundChange: function onUpperBoundChange(e) {
-	    this.setState({ upperBound: +e.target.value });
-	  },
-	  onSliderChange: function onSliderChange(value) {
-	    log(value);
-	    this.setState({
-	      value: value
-	    });
-	  },
-	  handleApply: function handleApply() {
-	    var _state = this.state,
-	        lowerBound = _state.lowerBound,
-	        upperBound = _state.upperBound;
-	
-	    this.setState({ value: [lowerBound, upperBound] });
-	  },
-	  render: function render() {
-	    return React.createElement(
-	      'div',
-	      null,
-	      React.createElement(
-	        'label',
-	        null,
-	        'LowerBound: '
-	      ),
-	      React.createElement('input', { type: 'number', value: this.state.lowerBound, onChange: this.onLowerBoundChange }),
-	      React.createElement('br', null),
-	      React.createElement(
-	        'label',
-	        null,
-	        'UpperBound: '
-	      ),
-	      React.createElement('input', { type: 'number', value: this.state.upperBound, onChange: this.onUpperBoundChange }),
-	      React.createElement('br', null),
-	      React.createElement(
-	        'button',
-	        { onClick: this.handleApply },
-	        'Apply'
-	      ),
-	      React.createElement('br', null),
-	      React.createElement('br', null),
-	      React.createElement(Slider, { range: true, allowCross: false, value: this.state.value, onChange: this.onSliderChange })
-	    );
-	  }
-	});
-	
-	var DynamicBounds = React.createClass({
-	  displayName: 'DynamicBounds',
-	  getInitialState: function getInitialState() {
-	    return {
-	      min: 0,
-	      max: 100
-	    };
-	  },
-	  onSliderChange: function onSliderChange(value) {
-	    log(value);
-	  },
-	  onMinChange: function onMinChange(e) {
-	    this.setState({
-	      min: +e.target.value || 0
-	    });
-	  },
-	  onMaxChange: function onMaxChange(e) {
-	    this.setState({
-	      max: +e.target.value || 100
-	    });
-	  },
-	  render: function render() {
-	    return React.createElement(
-	      'div',
-	      null,
-	      React.createElement(
-	        'label',
-	        null,
-	        'Min: '
-	      ),
-	      React.createElement('input', { type: 'number', value: this.state.min, onChange: this.onMinChange }),
-	      React.createElement('br', null),
-	      React.createElement(
-	        'label',
-	        null,
-	        'Max: '
-	      ),
-	      React.createElement('input', { type: 'number', value: this.state.max, onChange: this.onMaxChange }),
-	      React.createElement('br', null),
-	      React.createElement('br', null),
-	      React.createElement(Slider, { range: true, defaultValue: [20, 50], min: this.state.min, max: this.state.max,
-	        onChange: this.onSliderChange
-	      })
-	    );
-	  }
-	});
-	
-	ReactDOM.render(React.createElement(
-	  'div',
-	  null,
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Basic Range\uFF0C`allowCross=false`'
-	    ),
-	    React.createElement(Slider, { range: true, allowCross: false, defaultValue: [0, 20], onChange: log })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Basic Range\uFF0C`step=20` '
-	    ),
-	    React.createElement(Slider, { range: true, step: 20, defaultValue: [20, 20], onBeforeChange: log })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Basic Range\uFF0C`step=20, dots` '
-	    ),
-	    React.createElement(Slider, { range: true, dots: true, step: 20, defaultValue: [20, 40], onAfterChange: log })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Controlled Range'
-	    ),
-	    React.createElement(Slider, { range: true, value: [20, 40] })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Multi Range'
-	    ),
-	    React.createElement(Slider, { range: 3, value: [20, 40, 60, 80] })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Customized Range'
-	    ),
-	    React.createElement(CustomizedRange, null)
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Range with dynamic `max` `min`'
-	    ),
-	    React.createElement(DynamicBounds, null)
-	  )
-	), document.getElementById('__react-content'));
-
-/***/ }
-
+const CustomizedRange = React.createClass({
+  getInitialState() {
+    return {
+      lowerBound: 20,
+      upperBound: 40,
+      value: [20, 40],
+    };
+  },
+  onLowerBoundChange(e) {
+    this.setState({ lowerBound: +e.target.value });
+  },
+  onUpperBoundChange(e) {
+    this.setState({ upperBound: +e.target.value });
+  },
+  onSliderChange(value) {
+    log(value);
+    this.setState({
+      value,
+    });
+  },
+  handleApply() {
+    const { lowerBound, upperBound } = this.state;
+    this.setState({ value: [lowerBound, upperBound] });
+  },
+  render() {
+    return (
+      <div>
+        <label>LowerBound: </label>
+        <input type="number" value={this.state.lowerBound} onChange={this.onLowerBoundChange} />
+        <br />
+        <label>UpperBound: </label>
+        <input type="number" value={this.state.upperBound} onChange={this.onUpperBoundChange} />
+        <br />
+        <button onClick={this.handleApply}>Apply</button>
+        <br /><br />
+        <Slider range allowCross={false} value={this.state.value} onChange={this.onSliderChange} />
+      </div>
+    );
+  },
 });
-//# sourceMappingURL=range.js.map
+
+const DynamicBounds = React.createClass({
+  getInitialState() {
+    return {
+      min: 0,
+      max: 100,
+    };
+  },
+  onSliderChange(value) {
+    log(value);
+  },
+  onMinChange(e) {
+    this.setState({
+      min: +e.target.value || 0,
+    });
+  },
+  onMaxChange(e) {
+    this.setState({
+      max: +e.target.value || 100,
+    });
+  },
+  render() {
+    return (
+      <div>
+        <label>Min: </label>
+        <input type="number" value={this.state.min} onChange={this.onMinChange} />
+        <br />
+        <label>Max: </label>
+        <input type="number" value={this.state.max} onChange={this.onMaxChange} />
+        <br /><br />
+        <Slider range defaultValue={[20, 50]} min={this.state.min} max={this.state.max}
+          onChange={this.onSliderChange}
+        />
+      </div>
+    );
+  },
+});
+
+ReactDOM.render(
+  <div>
+    <div style={style}>
+      <p>Basic Range，`allowCross=false`</p>
+      <Slider range allowCross={false} defaultValue={[0, 20]} onChange={log} />
+    </div>
+    <div style={style}>
+      <p>Basic Range，`step=20` </p>
+      <Slider range step={20} defaultValue={[20, 20]} onBeforeChange={log} />
+    </div>
+    <div style={style}>
+      <p>Basic Range，`step=20, dots` </p>
+      <Slider range dots step={20} defaultValue={[20, 40]} onAfterChange={log} />
+    </div>
+    <div style={style}>
+      <p>Controlled Range</p>
+      <Slider range value={[20, 40]} />
+    </div>
+    <div style={style}>
+      <p>Multi Range</p>
+      <Slider range={3} value={[20, 40, 60, 80]} />
+    </div>
+    <div style={style}>
+      <p>Customized Range</p>
+      <CustomizedRange />
+    </div>
+    <div style={style}>
+      <p>Range with dynamic `max` `min`</p>
+      <DynamicBounds />
+    </div>
+  </div>
+  , document.getElementById('__react-content'));

examples/slider.html

@@ -1,402 +1 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <title>slider.js - example - rc-slider@5.4.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="https://a.alipayobjects.com/normalize.css/3.0.1/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]-->
-  <script src="https://as.alipayobjects.com/g/component/??modernizr/2.8.3/modernizr.js,fastclick/1.0.6/fastclick.js"></script>
-  <script>
-  if(!window.Promise) {
-    document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
-  }
-  </script>
-  <link rel="stylesheet" href="common.css" />
-</head>
-
-<body>
-  <div class="container">
-    <div class="header">
-      <h1>rc-slider@5.4.0</h1>
-
-      <p>slider ui component for react</p>
-    </div>
-    <div class="example" id="__react-content"></div>
-
-    <div class="highlight"><pre><code language="js"><span class="hljs-comment">/* eslint react/no-multi-comp: 0 */</span>
-<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> 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-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-keyword">return</span> <span class="hljs-string">`<span class="hljs-subst">${v}</span> %`</span>;
-}
-
-<span class="hljs-keyword">const</span> CustomizedSlider = React.createClass({
-  getInitialState() {
-    <span class="hljs-keyword">return</span> {
-      value: <span class="hljs-number">50</span>,
-    };
-  },
-  onSliderChange(value) {
-    log(value);
-    <span class="hljs-keyword">this</span>.setState({
-      value,
-    });
-  },
-  onAfterChange(value) {
-    <span class="hljs-built_in">console</span>.log(value);
-  },
-  render() {
-    <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> <span class="hljs-attribute">onAfterChange</span>=<span class="hljs-value">{this.onAfterChange}</span>
-      /&gt;</span>
-    )</span>;
-  },
-});
-
-<span class="hljs-keyword">const</span> DynamicBounds = React.createClass({
-  getInitialState() {
-    <span class="hljs-keyword">return</span> {
-      min: <span class="hljs-number">0</span>,
-      max: <span class="hljs-number">100</span>,
-    };
-  },
-  onSliderChange(value) {
-    log(value);
-  },
-  onMinChange(e) {
-    <span class="hljs-keyword">this</span>.setState({
-      min: +e.target.value || <span class="hljs-number">0</span>,
-    });
-  },
-  onMaxChange(e) {
-    <span class="hljs-keyword">this</span>.setState({
-      max: +e.target.value || <span class="hljs-number">100</span>,
-    });
-  },
-  render() {
-    <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>
-        <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>
-        <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">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> <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>
-    <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，`step=20`<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">step</span>=<span class="hljs-value">{20}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{50}</span> <span class="hljs-attribute">onBeforeChange</span>=<span class="hljs-value">{log}</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，`step=20, dots`<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">dots</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">{20}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{100}</span> <span class="hljs-attribute">onAfterChange</span>=<span class="hljs-value">{log}</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 with `tipFormatter`<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">tipFormatter</span>=<span class="hljs-value">{percentFormatter}</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>
-    <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 without tooltip<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">tipFormatter</span>=<span class="hljs-value">{null}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</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>Controlled 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">value</span>=<span class="hljs-value">{50}</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>Customized Slider<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-title">CustomizedSlider</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>Slider with dynamic `min` `max`<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-title">DynamicBounds</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>&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>
-  <script>FastClick.attach(document.body);</script>
-  <script src="common.js?nowrap"></script>
-  <script src="slider.js?nowrap"></script>
-</body>
-
-</html>
+placeholder

examples/slider.js

@@ -1,193 +1,117 @@
-webpackJsonp([3],{
+/* eslint react/no-multi-comp: 0 */
+require('rc-slider/assets/index.less');
 
-/***/ 0:
-/***/ function(module, exports, __webpack_require__) {
+const React = require('react');
+const ReactDOM = require('react-dom');
+const Slider = require('rc-slider');
 
-	module.exports = __webpack_require__(325);
+const style = { width: 400, margin: 50 };
+
+function log(value) {
+  console.log(value);
+}
 
 
-/***/ },
-
-/***/ 325:
-/***/ function(module, exports, __webpack_require__) {
-
-	'use strict';
-	
-	/* eslint react/no-multi-comp: 0 */
-	__webpack_require__(2);
-	
-	var React = __webpack_require__(3);
-	var ReactDOM = __webpack_require__(34);
-	var Slider = __webpack_require__(180);
-	
-	var style = { width: 400, margin: 50 };
-	
-	function log(value) {
-	  console.log(value);
-	}
-	
-	function percentFormatter(v) {
-	  return v + ' %';
-	}
-	
-	var CustomizedSlider = React.createClass({
-	  displayName: 'CustomizedSlider',
-	  getInitialState: function getInitialState() {
-	    return {
-	      value: 50
-	    };
-	  },
-	  onSliderChange: function onSliderChange(value) {
-	    log(value);
-	    this.setState({
-	      value: value
-	    });
-	  },
-	  onAfterChange: function onAfterChange(value) {
-	    console.log(value);
-	  },
-	  render: function render() {
-	    return React.createElement(Slider, { value: this.state.value,
-	      onChange: this.onSliderChange, onAfterChange: this.onAfterChange
-	    });
-	  }
-	});
-	
-	var DynamicBounds = React.createClass({
-	  displayName: 'DynamicBounds',
-	  getInitialState: function getInitialState() {
-	    return {
-	      min: 0,
-	      max: 100
-	    };
-	  },
-	  onSliderChange: function onSliderChange(value) {
-	    log(value);
-	  },
-	  onMinChange: function onMinChange(e) {
-	    this.setState({
-	      min: +e.target.value || 0
-	    });
-	  },
-	  onMaxChange: function onMaxChange(e) {
-	    this.setState({
-	      max: +e.target.value || 100
-	    });
-	  },
-	  render: function render() {
-	    return React.createElement(
-	      'div',
-	      null,
-	      React.createElement(
-	        'label',
-	        null,
-	        'Min: '
-	      ),
-	      React.createElement('input', { type: 'number', value: this.state.min, onChange: this.onMinChange }),
-	      React.createElement('br', null),
-	      React.createElement(
-	        'label',
-	        null,
-	        'Max: '
-	      ),
-	      React.createElement('input', { type: 'number', value: this.state.max, onChange: this.onMaxChange }),
-	      React.createElement('br', null),
-	      React.createElement('br', null),
-	      React.createElement(Slider, { defaultValue: 50, min: this.state.min, max: this.state.max,
-	        onChange: this.onSliderChange
-	      })
-	    );
-	  }
-	});
-	
-	ReactDOM.render(React.createElement(
-	  'div',
-	  null,
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Basic Slider'
-	    ),
-	    React.createElement(Slider, { tipTransitionName: 'rc-slider-tooltip-zoom-down', onChange: log })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Basic Slider\uFF0C`step=20`'
-	    ),
-	    React.createElement(Slider, { step: 20, defaultValue: 50, onBeforeChange: log })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Basic Slider\uFF0C`step=20, dots`'
-	    ),
-	    React.createElement(Slider, { dots: true, step: 20, defaultValue: 100, onAfterChange: log })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Basic Slider with `tipFormatter`'
-	    ),
-	    React.createElement(Slider, { tipFormatter: percentFormatter,
-	      tipTransitionName: 'rc-slider-tooltip-zoom-down', onChange: log
-	    })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Basic Slider without tooltip'
-	    ),
-	    React.createElement(Slider, { tipFormatter: null, onChange: log })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Controlled Slider'
-	    ),
-	    React.createElement(Slider, { value: 50 })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Customized Slider'
-	    ),
-	    React.createElement(CustomizedSlider, null)
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Slider with dynamic `min` `max`'
-	    ),
-	    React.createElement(DynamicBounds, null)
-	  )
-	), document.getElementById('__react-content'));
-
-/***/ }
+function percentFormatter(v) {
+  return `${v} %`;
+}
 
+const CustomizedSlider = React.createClass({
+  getInitialState() {
+    return {
+      value: 50,
+    };
+  },
+  onSliderChange(value) {
+    log(value);
+    this.setState({
+      value,
+    });
+  },
+  onAfterChange(value) {
+    console.log(value);
+  },
+  render() {
+    return (
+      <Slider value={this.state.value}
+        onChange={this.onSliderChange} onAfterChange={this.onAfterChange}
+      />
+    );
+  },
 });
-//# sourceMappingURL=slider.js.map
+
+const DynamicBounds = React.createClass({
+  getInitialState() {
+    return {
+      min: 0,
+      max: 100,
+    };
+  },
+  onSliderChange(value) {
+    log(value);
+  },
+  onMinChange(e) {
+    this.setState({
+      min: +e.target.value || 0,
+    });
+  },
+  onMaxChange(e) {
+    this.setState({
+      max: +e.target.value || 100,
+    });
+  },
+  render() {
+    return (
+      <div>
+        <label>Min: </label>
+        <input type="number" value={this.state.min} onChange={this.onMinChange} />
+        <br />
+        <label>Max: </label>
+        <input type="number" value={this.state.max} onChange={this.onMaxChange} />
+        <br /><br />
+        <Slider defaultValue={50} min={this.state.min} max={this.state.max}
+          onChange={this.onSliderChange}
+        />
+      </div>
+    );
+  },
+});
+
+ReactDOM.render(
+  <div>
+    <div style={style}>
+      <p>Basic Slider</p>
+      <Slider tipTransitionName="rc-slider-tooltip-zoom-down" onChange={log} />
+    </div>
+    <div style={style}>
+      <p>Basic Slider，`step=20`</p>
+      <Slider step={20} defaultValue={50} onBeforeChange={log} />
+    </div>
+    <div style={style}>
+      <p>Basic Slider，`step=20, dots`</p>
+      <Slider dots step={20} defaultValue={100} onAfterChange={log} />
+    </div>
+    <div style={style}>
+      <p>Basic Slider with `tipFormatter`</p>
+      <Slider tipFormatter={percentFormatter}
+        tipTransitionName="rc-slider-tooltip-zoom-down" onChange={log}
+      />
+    </div>
+    <div style={style}>
+      <p>Basic Slider without tooltip</p>
+      <Slider tipFormatter={null} onChange={log} />
+    </div>
+    <div style={style}>
+      <p>Controlled Slider</p>
+      <Slider value={50} />
+    </div>
+    <div style={style}>
+      <p>Customized Slider</p>
+      <CustomizedSlider />
+    </div>
+    <div style={style}>
+      <p>Slider with dynamic `min` `max`</p>
+      <DynamicBounds />
+    </div>
+  </div>
+  , document.getElementById('__react-content'));

examples/v-marks.html

@@ -1,342 +1 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <title>v-marks.js - example - rc-slider@5.4.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="https://a.alipayobjects.com/normalize.css/3.0.1/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]-->
-  <script src="https://as.alipayobjects.com/g/component/??modernizr/2.8.3/modernizr.js,fastclick/1.0.6/fastclick.js"></script>
-  <script>
-  if(!window.Promise) {
-    document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
-  }
-  </script>
-  <link rel="stylesheet" href="common.css" />
-</head>
-
-<body>
-  <div class="container">
-    <div class="header">
-      <h1>rc-slider@5.4.0</h1>
-
-      <p>slider ui component for react</p>
-    </div>
-    <div class="example" id="__react-content"></div>
-
-    <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> style = { float: <span class="hljs-string">'left'</span>, width: <span class="hljs-number">160</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-keyword">const</span> marks = {
-  <span class="hljs-string">'-10'</span>: <span class="hljs-string">'-10°C'</span>,
-  <span class="hljs-number">0</span>: <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">strong</span>&gt;</span>0°C<span class="hljs-tag">&lt;/<span class="hljs-title">strong</span>&gt;</span>,
-  26: '26°C',
-  37: '37°C',
-  50: '50°C',
-  100: {
-    style: {
-      color: 'red',
-    },
-    label: <span class="hljs-tag">&lt;<span class="hljs-title">strong</span>&gt;</span>100°C<span class="hljs-tag">&lt;/<span class="hljs-title">strong</span>&gt;</span>,
-  },
-};
-
-function log(value) {
-  console.log(value);
-}
-
-ReactDOM.render(
-  <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>Slider with marks, `step=null`<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">min</span>=<span class="hljs-value">{-10}</span> <span class="hljs-attribute">marks</span>=<span class="hljs-value">{marks}</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">{null}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{20}</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>Slider with marks and steps<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">dots</span> <span class="hljs-attribute">min</span>=<span class="hljs-value">{-10}</span> <span class="hljs-attribute">marks</span>=<span class="hljs-value">{marks}</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">{10}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{20}</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>Slider with marks, `included=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">vertical</span> <span class="hljs-attribute">min</span>=<span class="hljs-value">{-10}</span> <span class="hljs-attribute">marks</span>=<span class="hljs-value">{marks}</span> <span class="hljs-attribute">included</span>=<span class="hljs-value">{false}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{20}</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>Slider with marks and steps, `included=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">vertical</span> <span class="hljs-attribute">min</span>=<span class="hljs-value">{-10}</span> <span class="hljs-attribute">marks</span>=<span class="hljs-value">{marks}</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">{10}</span> <span class="hljs-attribute">included</span>=<span class="hljs-value">{false}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{20}</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>Range with marks<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">min</span>=<span class="hljs-value">{-10}</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">marks</span>=<span class="hljs-value">{marks}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">40</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>Range with marks and steps<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">min</span>=<span class="hljs-value">{-10}</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">marks</span>=<span class="hljs-value">{marks}</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">{10}</span>
-        <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">40</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>&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>
-  <script>FastClick.attach(document.body);</script>
-  <script src="common.js?nowrap"></script>
-  <script src="v-marks.js?nowrap"></script>
-</body>
-
-</html>
+placeholder

examples/v-marks.js

@@ -1,121 +1,57 @@
-webpackJsonp([4],{
+require('rc-slider/assets/index.less');
 
-/***/ 0:
-/***/ function(module, exports, __webpack_require__) {
+const React = require('react');
+const ReactDOM = require('react-dom');
+const Slider = require('rc-slider');
 
-	module.exports = __webpack_require__(326);
+const style = { float: 'left', width: 160, height: 400, marginBottom: 160, marginLeft: 50 };
+const parentStyle = { overflow: 'hidden' };
 
+const marks = {
+  '-10': '-10°C',
+  0: <strong>0°C</strong>,
+  26: '26°C',
+  37: '37°C',
+  50: '50°C',
+  100: {
+    style: {
+      color: 'red',
+    },
+    label: <strong>100°C</strong>,
+  },
+};
 
-/***/ },
+function log(value) {
+  console.log(value);
+}
 
-/***/ 326:
-/***/ function(module, exports, __webpack_require__) {
-
-	'use strict';
-	
-	__webpack_require__(2);
-	
-	var React = __webpack_require__(3);
-	var ReactDOM = __webpack_require__(34);
-	var Slider = __webpack_require__(180);
-	
-	var style = { float: 'left', width: 160, height: 400, marginBottom: 160, marginLeft: 50 };
-	var parentStyle = { overflow: 'hidden' };
-	
-	var marks = {
-	  '-10': '-10°C',
-	  0: React.createElement(
-	    'strong',
-	    null,
-	    '0\xB0C'
-	  ),
-	  26: '26°C',
-	  37: '37°C',
-	  50: '50°C',
-	  100: {
-	    style: {
-	      color: 'red'
-	    },
-	    label: React.createElement(
-	      'strong',
-	      null,
-	      '100\xB0C'
-	    )
-	  }
-	};
-	
-	function log(value) {
-	  console.log(value);
-	}
-	
-	ReactDOM.render(React.createElement(
-	  'div',
-	  { style: parentStyle },
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Slider with marks, `step=null`'
-	    ),
-	    React.createElement(Slider, { vertical: true, min: -10, marks: marks, step: null, onChange: log, defaultValue: 20 })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Slider with marks and steps'
-	    ),
-	    React.createElement(Slider, { vertical: true, dots: true, min: -10, marks: marks, step: 10, onChange: log, defaultValue: 20 })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Slider with marks, `included=false`'
-	    ),
-	    React.createElement(Slider, { vertical: true, min: -10, marks: marks, included: false, defaultValue: 20 })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Slider with marks and steps, `included=false`'
-	    ),
-	    React.createElement(Slider, { vertical: true, min: -10, marks: marks, step: 10, included: false, defaultValue: 20 })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Range with marks'
-	    ),
-	    React.createElement(Slider, { vertical: true, min: -10, range: true, marks: marks, onChange: log, defaultValue: [20, 40] })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Range with marks and steps'
-	    ),
-	    React.createElement(Slider, { vertical: true, min: -10, range: true, marks: marks, step: 10,
-	      onChange: log, defaultValue: [20, 40]
-	    })
-	  )
-	), document.getElementById('__react-content'));
-
-/***/ }
-
-});
-//# sourceMappingURL=v-marks.js.map
+ReactDOM.render(
+  <div style={parentStyle}>
+    <div style={style}>
+      <p>Slider with marks, `step=null`</p>
+      <Slider vertical min={-10} marks={marks} step={null} onChange={log} defaultValue={20} />
+    </div>
+    <div style={style}>
+       <p>Slider with marks and steps</p>
+      <Slider vertical dots min={-10} marks={marks} step={10} onChange={log} defaultValue={20} />
+    </div>
+    <div style={style}>
+      <p>Slider with marks, `included=false`</p>
+      <Slider vertical min={-10} marks={marks} included={false} defaultValue={20} />
+    </div>
+    <div style={style}>
+      <p>Slider with marks and steps, `included=false`</p>
+      <Slider vertical min={-10} marks={marks} step={10} included={false} defaultValue={20} />
+    </div>
+    <div style={style}>
+      <p>Range with marks</p>
+      <Slider vertical min={-10} range marks={marks} onChange={log} defaultValue={[20, 40]} />
+    </div>
+    <div style={style}>
+      <p>Range with marks and steps</p>
+      <Slider vertical min={-10} range marks={marks} step={10}
+        onChange={log} defaultValue={[20, 40]}
+      />
+    </div>
+  </div>
+  , document.getElementById('__react-content'));

examples/v-marks.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["webpack:///./examples/v-marks.js"],"names":["require","React","ReactDOM","Slider","style","float","width","height","marginBottom","marginLeft","parentStyle","overflow","marks","color","label","log","value","console","render","document","getElementById"],"mappings":";;;;;;;;;;;;;;;AAAA,oBAAAA,CAAQ,CAAR;;AAEA,KAAMC,QAAQ,mBAAAD,CAAQ,CAAR,CAAd;AACA,KAAME,WAAW,mBAAAF,CAAQ,EAAR,CAAjB;AACA,KAAMG,SAAS,mBAAAH,CAAQ,GAAR,CAAf;;AAEA,KAAMI,QAAQ,EAAEC,OAAO,MAAT,EAAiBC,OAAO,GAAxB,EAA6BC,QAAQ,GAArC,EAA0CC,cAAc,GAAxD,EAA6DC,YAAY,EAAzE,EAAd;AACA,KAAMC,cAAc,EAAEC,UAAU,QAAZ,EAApB;;AAEA,KAAMC,QAAQ;AACZ,UAAO,OADK;AAEZ,MAAG;AAAA;AAAA;AAAA;AAAA,IAFS;AAGZ,OAAI,MAHQ;AAIZ,OAAI,MAJQ;AAKZ,OAAI,MALQ;AAMZ,QAAK;AACHR,YAAO;AACLS,cAAO;AADF,MADJ;AAIHC,YAAO;AAAA;AAAA;AAAA;AAAA;AAJJ;AANO,EAAd;;AAcA,UAASC,GAAT,CAAaC,KAAb,EAAoB;AAClBC,WAAQF,GAAR,CAAYC,KAAZ;AACD;;AAEDd,UAASgB,MAAT,CACE;AAAA;AAAA,KAAK,OAAOR,WAAZ;AACE;AAAA;AAAA,OAAK,OAAON,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,cAAR,EAAiB,KAAK,CAAC,EAAvB,EAA2B,OAAOQ,KAAlC,EAAyC,MAAM,IAA/C,EAAqD,UAAUG,GAA/D,EAAoE,cAAc,EAAlF;AAFF,IADF;AAKE;AAAA;AAAA,OAAK,OAAOX,KAAZ;AACG;AAAA;AAAA;AAAA;AAAA,MADH;AAEE,yBAAC,MAAD,IAAQ,cAAR,EAAiB,UAAjB,EAAsB,KAAK,CAAC,EAA5B,EAAgC,OAAOQ,KAAvC,EAA8C,MAAM,EAApD,EAAwD,UAAUG,GAAlE,EAAuE,cAAc,EAArF;AAFF,IALF;AASE;AAAA;AAAA,OAAK,OAAOX,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,cAAR,EAAiB,KAAK,CAAC,EAAvB,EAA2B,OAAOQ,KAAlC,EAAyC,UAAU,KAAnD,EAA0D,cAAc,EAAxE;AAFF,IATF;AAaE;AAAA;AAAA,OAAK,OAAOR,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,cAAR,EAAiB,KAAK,CAAC,EAAvB,EAA2B,OAAOQ,KAAlC,EAAyC,MAAM,EAA/C,EAAmD,UAAU,KAA7D,EAAoE,cAAc,EAAlF;AAFF,IAbF;AAiBE;AAAA;AAAA,OAAK,OAAOR,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,cAAR,EAAiB,KAAK,CAAC,EAAvB,EAA2B,WAA3B,EAAiC,OAAOQ,KAAxC,EAA+C,UAAUG,GAAzD,EAA8D,cAAc,CAAC,EAAD,EAAK,EAAL,CAA5E;AAFF,IAjBF;AAqBE;AAAA;AAAA,OAAK,OAAOX,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,cAAR,EAAiB,KAAK,CAAC,EAAvB,EAA2B,WAA3B,EAAiC,OAAOQ,KAAxC,EAA+C,MAAM,EAArD;AACE,iBAAUG,GADZ,EACiB,cAAc,CAAC,EAAD,EAAK,EAAL;AAD/B;AAFF;AArBF,EADF,EA6BII,SAASC,cAAT,CAAwB,iBAAxB,CA7BJ,E","file":"v-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 = { float: 'left', width: 160, height: 400, marginBottom: 160, marginLeft: 50 };\nconst parentStyle = { overflow: 'hidden' };\n\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 style={parentStyle}>\n    <div style={style}>\n      <p>Slider with marks, `step=null`</p>\n      <Slider vertical 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 vertical dots min={-10} marks={marks} step={10} onChange={log} defaultValue={20} />\n    </div>\n    <div style={style}>\n      <p>Slider with marks, `included=false`</p>\n      <Slider vertical 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 vertical min={-10} marks={marks} step={10} included={false} defaultValue={20} />\n    </div>\n    <div style={style}>\n      <p>Range with marks</p>\n      <Slider vertical 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 vertical min={-10} range marks={marks} step={10}\n        onChange={log} defaultValue={[20, 40]}\n      />\n    </div>\n  </div>\n  , document.getElementById('__react-content'));\n\n\n\n// WEBPACK FOOTER //\n// ./examples/v-marks.js"],"sourceRoot":""}

examples/v-range.html

@@ -1,405 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <title>v-range.js - example - rc-slider@5.4.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="https://a.alipayobjects.com/normalize.css/3.0.1/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]-->
-  <script src="https://as.alipayobjects.com/g/component/??modernizr/2.8.3/modernizr.js,fastclick/1.0.6/fastclick.js"></script>
-  <script>
-  if(!window.Promise) {
-    document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
-  }
-  </script>
-  <link rel="stylesheet" href="common.css" />
-</head>
-
-<body>
-  <div class="container">
-    <div class="header">
-      <h1>rc-slider@5.4.0</h1>
-
-      <p>slider ui component for react</p>
-    </div>
-    <div class="example" id="__react-content"></div>
-
-    <div class="highlight"><pre><code language="js"><span class="hljs-comment">/* eslint react/no-multi-comp: 0 */</span>
-<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> 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-built_in">console</span>.log(value);
-}
-
-<span class="hljs-keyword">const</span> CustomizedRange = React.createClass({
-  getInitialState() {
-    <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(e) {
-    <span class="hljs-keyword">this</span>.setState({ lowerBound: +e.target.value });
-  },
-  onUpperBoundChange(e) {
-    <span class="hljs-keyword">this</span>.setState({ upperBound: +e.target.value });
-  },
-  onSliderChange(value) {
-    log(value);
-    <span class="hljs-keyword">this</span>.setState({
-      value,
-    });
-  },
-  handleApply() {
-    <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-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>
-        <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>
-        <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.lowerBound}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onLowerBoundChange}</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">label</span>&gt;</span>UpperBound: <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.upperBound}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onUpperBoundChange}</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">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({
-  getInitialState() {
-    <span class="hljs-keyword">return</span> {
-      min: <span class="hljs-number">0</span>,
-      max: <span class="hljs-number">100</span>,
-    };
-  },
-  onSliderChange(value) {
-    log(value);
-  },
-  onMinChange(e) {
-    <span class="hljs-keyword">this</span>.setState({
-      min: +e.target.value || <span class="hljs-number">0</span>,
-    });
-  },
-  onMaxChange(e) {
-    <span class="hljs-keyword">this</span>.setState({
-      max: +e.target.value || <span class="hljs-number">100</span>,
-    });
-  },
-  render() {
-    <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">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>
-        <span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span>
-        <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">{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>
-    <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，`step=20` <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">step</span>=<span class="hljs-value">{20}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">40</span>]} <span class="hljs-attribute">onBeforeChange</span>=<span class="hljs-value">{log}</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，`step=20, dots` <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">dots</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">{20}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">40</span>]} <span class="hljs-attribute">onAfterChange</span>=<span class="hljs-value">{log}</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>Controlled Range<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">value</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">40</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>Customized Range<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-title">CustomizedRange</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>Range with dynamic `max` `min`<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-title">DynamicBounds</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>&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>
-  <script>FastClick.attach(document.body);</script>
-  <script src="common.js?nowrap"></script>
-  <script src="v-range.js?nowrap"></script>
-</body>
-
-</html>

examples/v-range.js

@@ -1,201 +1,120 @@
-webpackJsonp([5],{
+/* eslint react/no-multi-comp: 0 */
+require('rc-slider/assets/index.less');
 
-/***/ 0:
-/***/ function(module, exports, __webpack_require__) {
+const React = require('react');
+const ReactDOM = require('react-dom');
+const Slider = require('rc-slider');
 
-	module.exports = __webpack_require__(327);
+const style = { float: 'left', width: 180, height: 400, marginBottom: 160, marginLeft: 50 };
+const parentStyle = { overflow: 'hidden' };
 
+function log(value) {
+  console.log(value);
+}
 
-/***/ },
-
-/***/ 327:
-/***/ function(module, exports, __webpack_require__) {
-
-	'use strict';
-	
-	/* eslint react/no-multi-comp: 0 */
-	__webpack_require__(2);
-	
-	var React = __webpack_require__(3);
-	var ReactDOM = __webpack_require__(34);
-	var Slider = __webpack_require__(180);
-	
-	var style = { float: 'left', width: 180, height: 400, marginBottom: 160, marginLeft: 50 };
-	var parentStyle = { overflow: 'hidden' };
-	
-	function log(value) {
-	  console.log(value);
-	}
-	
-	var CustomizedRange = React.createClass({
-	  displayName: 'CustomizedRange',
-	  getInitialState: function getInitialState() {
-	    return {
-	      lowerBound: 20,
-	      upperBound: 40,
-	      value: [20, 40]
-	    };
-	  },
-	  onLowerBoundChange: function onLowerBoundChange(e) {
-	    this.setState({ lowerBound: +e.target.value });
-	  },
-	  onUpperBoundChange: function onUpperBoundChange(e) {
-	    this.setState({ upperBound: +e.target.value });
-	  },
-	  onSliderChange: function onSliderChange(value) {
-	    log(value);
-	    this.setState({
-	      value: value
-	    });
-	  },
-	  handleApply: function handleApply() {
-	    var _state = this.state,
-	        lowerBound = _state.lowerBound,
-	        upperBound = _state.upperBound;
-	
-	    this.setState({ value: [lowerBound, upperBound] });
-	  },
-	  render: function render() {
-	    return React.createElement(
-	      'div',
-	      { style: style },
-	      React.createElement(Slider, { range: true, vertical: true, allowCross: false, value: this.state.value,
-	        onChange: this.onSliderChange
-	      }),
-	      React.createElement(
-	        'label',
-	        null,
-	        'LowerBound: '
-	      ),
-	      React.createElement('input', { type: 'number', value: this.state.lowerBound, onChange: this.onLowerBoundChange }),
-	      React.createElement('br', null),
-	      React.createElement(
-	        'label',
-	        null,
-	        'UpperBound: '
-	      ),
-	      React.createElement('input', { type: 'number', value: this.state.upperBound, onChange: this.onUpperBoundChange }),
-	      React.createElement('br', null),
-	      React.createElement(
-	        'button',
-	        { onClick: this.handleApply },
-	        'Apply'
-	      )
-	    );
-	  }
-	});
-	
-	var DynamicBounds = React.createClass({
-	  displayName: 'DynamicBounds',
-	  getInitialState: function getInitialState() {
-	    return {
-	      min: 0,
-	      max: 100
-	    };
-	  },
-	  onSliderChange: function onSliderChange(value) {
-	    log(value);
-	  },
-	  onMinChange: function onMinChange(e) {
-	    this.setState({
-	      min: +e.target.value || 0
-	    });
-	  },
-	  onMaxChange: function onMaxChange(e) {
-	    this.setState({
-	      max: +e.target.value || 100
-	    });
-	  },
-	  render: function render() {
-	    return React.createElement(
-	      'div',
-	      { style: style },
-	      React.createElement(Slider, { range: true, vertical: true, defaultValue: [20, 50], min: this.state.min, max: this.state.max,
-	        onChange: this.onSliderChange
-	      }),
-	      React.createElement(
-	        'label',
-	        null,
-	        'Min: '
-	      ),
-	      React.createElement('input', { type: 'number', value: this.state.min, onChange: this.onMinChange }),
-	      React.createElement('br', null),
-	      React.createElement(
-	        'label',
-	        null,
-	        'Max: '
-	      ),
-	      React.createElement('input', { type: 'number', value: this.state.max, onChange: this.onMaxChange })
-	    );
-	  }
-	});
-	
-	ReactDOM.render(React.createElement(
-	  'div',
-	  { style: parentStyle },
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Basic Range\uFF0C`allowCross=false`'
-	    ),
-	    React.createElement(Slider, { range: true, vertical: true, allowCross: false, defaultValue: [0, 20], onChange: log })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Basic Range\uFF0C`step=20` '
-	    ),
-	    React.createElement(Slider, { range: true, vertical: true, step: 20, defaultValue: [20, 40], onBeforeChange: log })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Basic Range\uFF0C`step=20, dots` '
-	    ),
-	    React.createElement(Slider, { range: true, vertical: true, dots: true, step: 20, defaultValue: [20, 40], onAfterChange: log })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Controlled Range'
-	    ),
-	    React.createElement(Slider, { range: true, vertical: true, value: [20, 40] })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Customized Range'
-	    ),
-	    React.createElement(CustomizedRange, null)
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Range with dynamic `max` `min`'
-	    ),
-	    React.createElement(DynamicBounds, null)
-	  )
-	), document.getElementById('__react-content'));
-
-/***/ }
-
+const CustomizedRange = React.createClass({
+  getInitialState() {
+    return {
+      lowerBound: 20,
+      upperBound: 40,
+      value: [20, 40],
+    };
+  },
+  onLowerBoundChange(e) {
+    this.setState({ lowerBound: +e.target.value });
+  },
+  onUpperBoundChange(e) {
+    this.setState({ upperBound: +e.target.value });
+  },
+  onSliderChange(value) {
+    log(value);
+    this.setState({
+      value,
+    });
+  },
+  handleApply() {
+    const { lowerBound, upperBound } = this.state;
+    this.setState({ value: [lowerBound, upperBound] });
+  },
+  render() {
+    return (
+      <div style={style}>
+        <Slider range vertical allowCross={false} value={this.state.value}
+          onChange={this.onSliderChange}
+        />
+        <label>LowerBound: </label>
+        <input type="number" value={this.state.lowerBound} onChange={this.onLowerBoundChange} />
+        <br />
+        <label>UpperBound: </label>
+        <input type="number" value={this.state.upperBound} onChange={this.onUpperBoundChange} />
+        <br />
+        <button onClick={this.handleApply}>Apply</button>
+      </div>
+    );
+  },
 });
-//# sourceMappingURL=v-range.js.map
+
+const DynamicBounds = React.createClass({
+  getInitialState() {
+    return {
+      min: 0,
+      max: 100,
+    };
+  },
+  onSliderChange(value) {
+    log(value);
+  },
+  onMinChange(e) {
+    this.setState({
+      min: +e.target.value || 0,
+    });
+  },
+  onMaxChange(e) {
+    this.setState({
+      max: +e.target.value || 100,
+    });
+  },
+  render() {
+    return (
+      <div style={style}>
+        <Slider range vertical defaultValue={[20, 50]} min={this.state.min} max={this.state.max}
+          onChange={this.onSliderChange}
+        />
+        <label>Min: </label>
+        <input type="number" value={this.state.min} onChange={this.onMinChange} />
+        <br />
+        <label>Max: </label>
+        <input type="number" value={this.state.max} onChange={this.onMaxChange} />
+      </div>
+    );
+  },
+});
+
+ReactDOM.render(
+  <div style={parentStyle}>
+    <div style={style}>
+      <p>Basic Range，`allowCross=false`</p>
+      <Slider range vertical allowCross={false} defaultValue={[0, 20]} onChange={log} />
+    </div>
+    <div style={style}>
+      <p>Basic Range，`step=20` </p>
+      <Slider range vertical step={20} defaultValue={[20, 40]} onBeforeChange={log} />
+    </div>
+    <div style={style}>
+      <p>Basic Range，`step=20, dots` </p>
+      <Slider range vertical dots step={20} defaultValue={[20, 40]} onAfterChange={log} />
+    </div>
+    <div style={style}>
+      <p>Controlled Range</p>
+      <Slider range vertical value={[20, 40]} />
+    </div>
+    <div style={style}>
+      <p>Customized Range</p>
+      <CustomizedRange />
+    </div>
+    <div style={style}>
+      <p>Range with dynamic `max` `min`</p>
+      <DynamicBounds />
+    </div>
+  </div>
+  , document.getElementById('__react-content'));

examples/v-slider.html

@@ -1,395 +1 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <title>v-slider.js - example - rc-slider@5.4.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="https://a.alipayobjects.com/normalize.css/3.0.1/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]-->
-  <script src="https://as.alipayobjects.com/g/component/??modernizr/2.8.3/modernizr.js,fastclick/1.0.6/fastclick.js"></script>
-  <script>
-  if(!window.Promise) {
-    document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
-  }
-  </script>
-  <link rel="stylesheet" href="common.css" />
-</head>
-
-<body>
-  <div class="container">
-    <div class="header">
-      <h1>rc-slider@5.4.0</h1>
-
-      <p>slider ui component for react</p>
-    </div>
-    <div class="example" id="__react-content"></div>
-
-    <div class="highlight"><pre><code language="js"><span class="hljs-comment">/* eslint react/no-multi-comp: 0 */</span>
-<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> 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-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-keyword">return</span> <span class="hljs-string">`<span class="hljs-subst">${v}</span> %`</span>;
-}
-
-<span class="hljs-keyword">const</span> CustomizedSlider = React.createClass({
-  getInitialState() {
-    <span class="hljs-keyword">return</span> {
-      value: <span class="hljs-number">50</span>,
-    };
-  },
-  onSliderChange(value) {
-    log(value);
-    <span class="hljs-keyword">this</span>.setState({
-      value,
-    });
-  },
-  render() {
-    <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-keyword">return</span> {
-      min: <span class="hljs-number">0</span>,
-      max: <span class="hljs-number">100</span>,
-    };
-  },
-  onSliderChange(value) {
-    log(value);
-  },
-  onMinChange(e) {
-    <span class="hljs-keyword">this</span>.setState({
-      min: +e.target.value || <span class="hljs-number">0</span>,
-    });
-  },
-  onMaxChange(e) {
-    <span class="hljs-keyword">this</span>.setState({
-      max: +e.target.value || <span class="hljs-number">100</span>,
-    });
-  },
-  render() {
-    <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>
-        <span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">vertical</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">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>
-        <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">{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>
-    <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，`step=20`<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">step</span>=<span class="hljs-value">{20}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{50}</span> <span class="hljs-attribute">onBeforeChange</span>=<span class="hljs-value">{log}</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，`step=20, dots`<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">dots</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">{20}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{100}</span> <span class="hljs-attribute">onAfterChange</span>=<span class="hljs-value">{log}</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 with `tipFormatter`<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">tipFormatter</span>=<span class="hljs-value">{percentFormatter}</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>
-    <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 without tooltip<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">tipFormatter</span>=<span class="hljs-value">{null}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</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>Controlled 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">value</span>=<span class="hljs-value">{50}</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>Customized Slider<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-title">CustomizedSlider</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>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-title">DynamicBounds</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>&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>
-  <script>FastClick.attach(document.body);</script>
-  <script src="common.js?nowrap"></script>
-  <script src="v-slider.js?nowrap"></script>
-</body>
-
-</html>
+placeholder

examples/v-slider.js

@@ -1,187 +1,110 @@
-webpackJsonp([6],{
+/* eslint react/no-multi-comp: 0 */
+require('rc-slider/assets/index.less');
 
-/***/ 0:
-/***/ function(module, exports, __webpack_require__) {
+const React = require('react');
+const ReactDOM = require('react-dom');
+const Slider = require('rc-slider');
 
-	module.exports = __webpack_require__(328);
+const style = { float: 'left', width: 200, height: 400, marginBottom: 160, marginLeft: 50 };
+const parentStyle = { overflow: 'hidden' };
+
+function log(value) {
+  console.log(value);
+}
 
 
-/***/ },
-
-/***/ 328:
-/***/ function(module, exports, __webpack_require__) {
-
-	'use strict';
-	
-	/* eslint react/no-multi-comp: 0 */
-	__webpack_require__(2);
-	
-	var React = __webpack_require__(3);
-	var ReactDOM = __webpack_require__(34);
-	var Slider = __webpack_require__(180);
-	
-	var style = { float: 'left', width: 200, height: 400, marginBottom: 160, marginLeft: 50 };
-	var parentStyle = { overflow: 'hidden' };
-	
-	function log(value) {
-	  console.log(value);
-	}
-	
-	function percentFormatter(v) {
-	  return v + ' %';
-	}
-	
-	var CustomizedSlider = React.createClass({
-	  displayName: 'CustomizedSlider',
-	  getInitialState: function getInitialState() {
-	    return {
-	      value: 50
-	    };
-	  },
-	  onSliderChange: function onSliderChange(value) {
-	    log(value);
-	    this.setState({
-	      value: value
-	    });
-	  },
-	  render: function render() {
-	    return React.createElement(Slider, { vertical: true, value: this.state.value, onChange: this.onSliderChange });
-	  }
-	});
-	
-	var DynamicBounds = React.createClass({
-	  displayName: 'DynamicBounds',
-	  getInitialState: function getInitialState() {
-	    return {
-	      min: 0,
-	      max: 100
-	    };
-	  },
-	  onSliderChange: function onSliderChange(value) {
-	    log(value);
-	  },
-	  onMinChange: function onMinChange(e) {
-	    this.setState({
-	      min: +e.target.value || 0
-	    });
-	  },
-	  onMaxChange: function onMaxChange(e) {
-	    this.setState({
-	      max: +e.target.value || 100
-	    });
-	  },
-	  render: function render() {
-	    return React.createElement(
-	      'div',
-	      { style: style },
-	      React.createElement(
-	        'p',
-	        null,
-	        'Slider with dynamic `min` `max`'
-	      ),
-	      React.createElement(Slider, { vertical: true, defaultValue: 50, min: this.state.min, max: this.state.max,
-	        onChange: this.onSliderChange
-	      }),
-	      React.createElement(
-	        'label',
-	        null,
-	        'Min: '
-	      ),
-	      React.createElement('input', { type: 'number', value: this.state.min, onChange: this.onMinChange }),
-	      React.createElement('br', null),
-	      React.createElement(
-	        'label',
-	        null,
-	        'Max: '
-	      ),
-	      React.createElement('input', { type: 'number', value: this.state.max, onChange: this.onMaxChange })
-	    );
-	  }
-	});
-	
-	ReactDOM.render(React.createElement(
-	  'div',
-	  { style: parentStyle },
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Basic Slider'
-	    ),
-	    React.createElement(Slider, { vertical: true, tipTransitionName: 'rc-slider-tooltip-zoom-down', onChange: log })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Basic Slider\uFF0C`step=20`'
-	    ),
-	    React.createElement(Slider, { vertical: true, step: 20, defaultValue: 50, onBeforeChange: log })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Basic Slider\uFF0C`step=20, dots`'
-	    ),
-	    React.createElement(Slider, { vertical: true, dots: true, step: 20, defaultValue: 100, onAfterChange: log })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Basic Slider with `tipFormatter`'
-	    ),
-	    React.createElement(Slider, { vertical: true, tipFormatter: percentFormatter,
-	      tipTransitionName: 'rc-slider-tooltip-zoom-down', onChange: log
-	    })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Basic Slider without tooltip'
-	    ),
-	    React.createElement(Slider, { vertical: true, tipFormatter: null, onChange: log })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Controlled Slider'
-	    ),
-	    React.createElement(Slider, { vertical: true, value: 50 })
-	  ),
-	  React.createElement(
-	    'div',
-	    { style: style },
-	    React.createElement(
-	      'p',
-	      null,
-	      'Customized Slider'
-	    ),
-	    React.createElement(CustomizedSlider, null)
-	  ),
-	  React.createElement(
-	    'div',
-	    null,
-	    React.createElement(DynamicBounds, null)
-	  )
-	), document.getElementById('__react-content'));
-
-/***/ }
+function percentFormatter(v) {
+  return `${v} %`;
+}
 
+const CustomizedSlider = React.createClass({
+  getInitialState() {
+    return {
+      value: 50,
+    };
+  },
+  onSliderChange(value) {
+    log(value);
+    this.setState({
+      value,
+    });
+  },
+  render() {
+    return <Slider vertical value={this.state.value} onChange={this.onSliderChange} />;
+  },
 });
-//# sourceMappingURL=v-slider.js.map
+
+const DynamicBounds = React.createClass({
+  getInitialState() {
+    return {
+      min: 0,
+      max: 100,
+    };
+  },
+  onSliderChange(value) {
+    log(value);
+  },
+  onMinChange(e) {
+    this.setState({
+      min: +e.target.value || 0,
+    });
+  },
+  onMaxChange(e) {
+    this.setState({
+      max: +e.target.value || 100,
+    });
+  },
+  render() {
+    return (
+      <div style={style}>
+        <p>Slider with dynamic `min` `max`</p>
+        <Slider vertical defaultValue={50} min={this.state.min} max={this.state.max}
+          onChange={this.onSliderChange}
+        />
+        <label>Min: </label>
+        <input type="number" value={this.state.min} onChange={this.onMinChange} />
+        <br />
+        <label>Max: </label>
+        <input type="number" value={this.state.max} onChange={this.onMaxChange} />
+      </div>
+    );
+  },
+});
+
+ReactDOM.render(
+  <div style={parentStyle}>
+    <div style={style}>
+      <p>Basic Slider</p>
+      <Slider vertical tipTransitionName="rc-slider-tooltip-zoom-down" onChange={log} />
+    </div>
+    <div style={style}>
+      <p>Basic Slider，`step=20`</p>
+      <Slider vertical step={20} defaultValue={50} onBeforeChange={log} />
+    </div>
+    <div style={style}>
+      <p>Basic Slider，`step=20, dots`</p>
+      <Slider vertical dots step={20} defaultValue={100} onAfterChange={log} />
+    </div>
+    <div style={style}>
+      <p>Basic Slider with `tipFormatter`</p>
+      <Slider vertical tipFormatter={percentFormatter}
+        tipTransitionName="rc-slider-tooltip-zoom-down" onChange={log}
+      />
+    </div>
+    <div style={style}>
+      <p>Basic Slider without tooltip</p>
+      <Slider vertical tipFormatter={null} onChange={log} />
+    </div>
+    <div style={style}>
+      <p>Controlled Slider</p>
+      <Slider vertical value={50} />
+    </div>
+    <div style={style}>
+      <p>Customized Slider</p>
+      <CustomizedSlider />
+    </div>
+    <div>
+      <DynamicBounds />
+    </div>
+  </div>
+  , document.getElementById('__react-content'));

index.html

@@ -1,932 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <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"/>
-  <title>rc-slider@5.4.0 - slider ui component for react</title>
-  <style>
-    @font-face {
-      font-family: octicons-anchor;
-      src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAYcAA0AAAAACjQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABMAAAABwAAAAca8vGTk9TLzIAAAFMAAAARAAAAFZG1VHVY21hcAAAAZAAAAA+AAABQgAP9AdjdnQgAAAB0AAAAAQAAAAEACICiGdhc3AAAAHUAAAACAAAAAj//wADZ2x5ZgAAAdwAAADRAAABEKyikaNoZWFkAAACsAAAAC0AAAA2AtXoA2hoZWEAAALgAAAAHAAAACQHngNFaG10eAAAAvwAAAAQAAAAEAwAACJsb2NhAAADDAAAAAoAAAAKALIAVG1heHAAAAMYAAAAHwAAACABEAB2bmFtZQAAAzgAAALBAAAFu3I9x/Nwb3N0AAAF/AAAAB0AAAAvaoFvbwAAAAEAAAAAzBdyYwAAAADP2IQvAAAAAM/bz7t4nGNgZGFgnMDAysDB1Ml0hoGBoR9CM75mMGLkYGBgYmBlZsAKAtJcUxgcPsR8iGF2+O/AEMPsznAYKMwIkgMA5REMOXicY2BgYGaAYBkGRgYQsAHyGMF8FgYFIM0ChED+h5j//yEk/3KoSgZGNgYYk4GRCUgwMaACRoZhDwCs7QgGAAAAIgKIAAAAAf//AAJ4nHWMMQrCQBBF/0zWrCCIKUQsTDCL2EXMohYGSSmorScInsRGL2DOYJe0Ntp7BK+gJ1BxF1stZvjz/v8DRghQzEc4kIgKwiAppcA9LtzKLSkdNhKFY3HF4lK69ExKslx7Xa+vPRVS43G98vG1DnkDMIBUgFN0MDXflU8tbaZOUkXUH0+U27RoRpOIyCKjbMCVejwypzJJG4jIwb43rfl6wbwanocrJm9XFYfskuVC5K/TPyczNU7b84CXcbxks1Un6H6tLH9vf2LRnn8Ax7A5WQAAAHicY2BkYGAA4teL1+yI57f5ysDNwgAC529f0kOmWRiYVgEpDgYmEA8AUzEKsQAAAHicY2BkYGB2+O/AEMPCAAJAkpEBFbAAADgKAe0EAAAiAAAAAAQAAAAEAAAAAAAAKgAqACoAiAAAeJxjYGRgYGBhsGFgYgABEMkFhAwM/xn0QAIAD6YBhwB4nI1Ty07cMBS9QwKlQapQW3VXySvEqDCZGbGaHULiIQ1FKgjWMxknMfLEke2A+IJu+wntrt/QbVf9gG75jK577Lg8K1qQPCfnnnt8fX1NRC/pmjrk/zprC+8D7tBy9DHgBXoWfQ44Av8t4Bj4Z8CLtBL9CniJluPXASf0Lm4CXqFX8Q84dOLnMB17N4c7tBo1AS/Qi+hTwBH4rwHHwN8DXqQ30XXAS7QaLwSc0Gn8NuAVWou/gFmnjLrEaEh9GmDdDGgL3B4JsrRPDU2hTOiMSuJUIdKQQayiAth69r6akSSFqIJuA19TrzCIaY8sIoxyrNIrL//pw7A2iMygkX5vDj+G+kuoLdX4GlGK/8Lnlz6/h9MpmoO9rafrz7ILXEHHaAx95s9lsI7AHNMBWEZHULnfAXwG9/ZqdzLI08iuwRloXE8kfhXYAvE23+23DU3t626rbs8/8adv+9DWknsHp3E17oCf+Z48rvEQNZ78paYM38qfk3v/u3l3u3GXN2Dmvmvpf1Srwk3pB/VSsp512bA/GG5i2WJ7wu430yQ5K3nFGiOqgtmSB5pJVSizwaacmUZzZhXLlZTq8qGGFY2YcSkqbth6aW1tRmlaCFs2016m5qn36SbJrqosG4uMV4aP2PHBmB3tjtmgN2izkGQyLWprekbIntJFing32a5rKWCN/SdSoga45EJykyQ7asZvHQ8PTm6cslIpwyeyjbVltNikc2HTR7YKh9LBl9DADC0U/jLcBZDKrMhUBfQBvXRzLtFtjU9eNHKin0x5InTqb8lNpfKv1s1xHzTXRqgKzek/mb7nB8RZTCDhGEX3kK/8Q75AmUM/eLkfA+0Hi908Kx4eNsMgudg5GLdRD7a84npi+YxNr5i5KIbW5izXas7cHXIMAau1OueZhfj+cOcP3P8MNIWLyYOBuxL6DRylJ4cAAAB4nGNgYoAALjDJyIAOWMCiTIxMLDmZedkABtIBygAAAA==) format('woff');
-    }
-
-    .markdown-body, .examples, #readme {
-      -webkit-text-size-adjust: 100%;
-      -ms-text-size-adjust: 100%;
-      text-size-adjust: 100%;
-      color: #333;
-      overflow: hidden;
-      font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
-      font-size: 16px;
-      line-height: 1.6;
-      word-wrap: break-word;
-    }
-
-    .markdown-body a, .examples a {
-      background-color: transparent;
-    }
-
-    .markdown-body a:active,
-    .markdown-body a:hover {
-      outline: 0;
-    }
-
-    .markdown-body strong {
-      font-weight: bold;
-    }
-
-    .markdown-body h1 {
-      font-size: 2em;
-      margin: 0.67em 0;
-    }
-
-    .markdown-body img {
-      border: 0;
-    }
-
-    .markdown-body hr {
-      box-sizing: content-box;
-      height: 0;
-    }
-
-    .markdown-body pre {
-      overflow: auto;
-    }
-
-    .markdown-body code,
-    .markdown-body kbd,
-    .markdown-body pre {
-      font-family: monospace, monospace;
-      font-size: 1em;
-    }
-
-    .markdown-body input {
-      color: inherit;
-      font: inherit;
-      margin: 0;
-    }
-
-    .markdown-body html input[disabled] {
-      cursor: default;
-    }
-
-    .markdown-body input {
-      line-height: normal;
-    }
-
-    .markdown-body input[type="checkbox"] {
-      box-sizing: border-box;
-      padding: 0;
-    }
-
-    .markdown-body table {
-      border-collapse: collapse;
-      border-spacing: 0;
-    }
-
-    .markdown-body td,
-    .markdown-body th {
-      padding: 0;
-    }
-
-    .markdown-body * {
-      box-sizing: border-box;
-    }
-
-    .markdown-body input {
-      font: 13px/1.4 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
-    }
-
-    .markdown-body a {
-      color: #4078c0;
-      text-decoration: none;
-    }
-
-    .markdown-body a:hover,
-    .markdown-body a:active {
-      text-decoration: underline;
-    }
-
-    .markdown-body hr {
-      height: 0;
-      margin: 15px 0;
-      overflow: hidden;
-      background: transparent;
-      border: 0;
-      border-bottom: 1px solid #ddd;
-    }
-
-    .markdown-body hr:before {
-      display: table;
-      content: "";
-    }
-
-    .markdown-body hr:after {
-      display: table;
-      clear: both;
-      content: "";
-    }
-
-    .markdown-body h1,
-    .markdown-body h2,
-    .markdown-body h3,
-    .markdown-body h4,
-    .markdown-body h5,
-    .markdown-body h6 {
-      margin-top: 15px;
-      margin-bottom: 15px;
-      line-height: 1.1;
-    }
-
-    .markdown-body h1 {
-      font-size: 30px;
-    }
-
-    .markdown-body h2 {
-      font-size: 21px;
-    }
-
-    .markdown-body h3 {
-      font-size: 16px;
-    }
-
-    .markdown-body h4 {
-      font-size: 14px;
-    }
-
-    .markdown-body h5 {
-      font-size: 12px;
-    }
-
-    .markdown-body h6 {
-      font-size: 11px;
-    }
-
-    .markdown-body blockquote {
-      margin: 0;
-    }
-
-    .markdown-body ul,
-    .markdown-body ol {
-      padding: 0;
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-
-    .markdown-body ol ol,
-    .markdown-body ul ol {
-      list-style-type: lower-roman;
-    }
-
-    .markdown-body ul ul ol,
-    .markdown-body ul ol ol,
-    .markdown-body ol ul ol,
-    .markdown-body ol ol ol {
-      list-style-type: lower-alpha;
-    }
-
-    .markdown-body dd {
-      margin-left: 0;
-    }
-
-    .markdown-body code {
-      font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
-      font-size: 12px;
-    }
-
-    .markdown-body pre {
-      margin-top: 0;
-      margin-bottom: 0;
-      font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
-    }
-
-    .markdown-body .octicon {
-      font: normal normal normal 16px/1 octicons-anchor;
-      display: inline-block;
-      text-decoration: none;
-      text-rendering: auto;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      -webkit-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
-      user-select: none;
-    }
-
-    .markdown-body .octicon-link:before {
-      content: '\f05c';
-    }
-
-    .markdown-body > *:first-child {
-      margin-top: 0 !important;
-    }
-
-    .markdown-body > *:last-child {
-      margin-bottom: 0 !important;
-    }
-
-    .markdown-body a:not([href]) {
-      color: inherit;
-      text-decoration: none;
-    }
-
-    .markdown-body .anchor {
-      position: absolute;
-      top: 0;
-      left: 0;
-      display: block;
-      padding-right: 6px;
-      padding-left: 30px;
-      margin-left: -30px;
-    }
-
-    .markdown-body .anchor:focus {
-      outline: none;
-    }
-
-    .markdown-body h1,
-    .markdown-body h2,
-    .markdown-body h3,
-    .markdown-body h4,
-    .markdown-body h5,
-    .markdown-body h6 {
-      position: relative;
-      margin-top: 1em;
-      margin-bottom: 16px;
-      font-weight: bold;
-      line-height: 1.4;
-    }
-
-    .markdown-body h1 .octicon-link,
-    .markdown-body h2 .octicon-link,
-    .markdown-body h3 .octicon-link,
-    .markdown-body h4 .octicon-link,
-    .markdown-body h5 .octicon-link,
-    .markdown-body h6 .octicon-link {
-      display: none;
-      color: #000;
-      vertical-align: middle;
-    }
-
-    .markdown-body h1:hover .anchor,
-    .markdown-body h2:hover .anchor,
-    .markdown-body h3:hover .anchor,
-    .markdown-body h4:hover .anchor,
-    .markdown-body h5:hover .anchor,
-    .markdown-body h6:hover .anchor {
-      padding-left: 8px;
-      margin-left: -30px;
-      text-decoration: none;
-    }
-
-    .markdown-body h1:hover .anchor .octicon-link,
-    .markdown-body h2:hover .anchor .octicon-link,
-    .markdown-body h3:hover .anchor .octicon-link,
-    .markdown-body h4:hover .anchor .octicon-link,
-    .markdown-body h5:hover .anchor .octicon-link,
-    .markdown-body h6:hover .anchor .octicon-link {
-      display: inline-block;
-    }
-
-    .markdown-body h1 {
-      padding-bottom: 0.3em;
-      font-size: 2.25em;
-      line-height: 1.2;
-      border-bottom: 1px solid #eee;
-    }
-
-    .markdown-body h1 .anchor {
-      line-height: 1;
-    }
-
-    .markdown-body h2 {
-      padding-bottom: 0.3em;
-      font-size: 1.75em;
-      line-height: 1.225;
-      border-bottom: 1px solid #eee;
-    }
-
-    .markdown-body h2 .anchor {
-      line-height: 1;
-    }
-
-    .markdown-body h3 {
-      font-size: 1.5em;
-      line-height: 1.43;
-    }
-
-    .markdown-body h3 .anchor {
-      line-height: 1.2;
-    }
-
-    .markdown-body h4 {
-      font-size: 1.25em;
-    }
-
-    .markdown-body h4 .anchor {
-      line-height: 1.2;
-    }
-
-    .markdown-body h5 {
-      font-size: 1em;
-    }
-
-    .markdown-body h5 .anchor {
-      line-height: 1.1;
-    }
-
-    .markdown-body h6 {
-      font-size: 1em;
-      color: #777;
-    }
-
-    .markdown-body h6 .anchor {
-      line-height: 1.1;
-    }
-
-    .markdown-body p,
-    .markdown-body blockquote,
-    .markdown-body ul,
-    .markdown-body ol,
-    .markdown-body dl,
-    .markdown-body table,
-    .markdown-body pre {
-      margin-top: 0;
-      margin-bottom: 16px;
-    }
-
-    .markdown-body hr {
-      height: 4px;
-      padding: 0;
-      margin: 16px 0;
-      background-color: #e7e7e7;
-      border: 0 none;
-    }
-
-    .markdown-body ul,
-    .markdown-body ol {
-      padding-left: 2em;
-    }
-
-    .markdown-body ul ul,
-    .markdown-body ul ol,
-    .markdown-body ol ol,
-    .markdown-body ol ul {
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-
-    .markdown-body li > p {
-      margin-top: 16px;
-    }
-
-    .markdown-body dl {
-      padding: 0;
-    }
-
-    .markdown-body dl dt {
-      padding: 0;
-      margin-top: 16px;
-      font-size: 1em;
-      font-style: italic;
-      font-weight: bold;
-    }
-
-    .markdown-body dl dd {
-      padding: 0 16px;
-      margin-bottom: 16px;
-    }
-
-    .markdown-body blockquote {
-      padding: 0 15px;
-      color: #777;
-      border-left: 4px solid #ddd;
-    }
-
-    .markdown-body blockquote > :first-child {
-      margin-top: 0;
-    }
-
-    .markdown-body blockquote > :last-child {
-      margin-bottom: 0;
-    }
-
-    .markdown-body table {
-      display: block;
-      width: 100%;
-      overflow: auto;
-      word-break: normal;
-      word-break: keep-all;
-    }
-
-    .markdown-body table th {
-      font-weight: bold;
-    }
-
-    .markdown-body table th,
-    .markdown-body table td {
-      padding: 6px 13px;
-      border: 1px solid #ddd;
-    }
-
-    .markdown-body table tr {
-      background-color: #fff;
-      border-top: 1px solid #ccc;
-    }
-
-    .markdown-body table tr:nth-child(2n) {
-      background-color: #f8f8f8;
-    }
-
-    .markdown-body img {
-      max-width: 100%;
-      box-sizing: border-box;
-    }
-
-    .markdown-body code {
-      padding: 0;
-      padding-top: 0.2em;
-      padding-bottom: 0.2em;
-      margin: 0;
-      font-size: 85%;
-      background-color: rgba(0, 0, 0, 0.04);
-      border-radius: 3px;
-    }
-
-    .markdown-body code:before,
-    .markdown-body code:after {
-      letter-spacing: -0.2em;
-      content: "\00a0";
-    }
-
-    .markdown-body pre > code {
-      padding: 0;
-      margin: 0;
-      font-size: 100%;
-      word-break: normal;
-      white-space: pre;
-      background: transparent;
-      border: 0;
-    }
-
-    .markdown-body .highlight {
-      margin-bottom: 16px;
-    }
-
-    .markdown-body .highlight pre,
-    .markdown-body pre {
-      padding: 16px;
-      overflow: auto;
-      font-size: 85%;
-      line-height: 1.45;
-      background-color: #f7f7f7;
-      border-radius: 3px;
-    }
-
-    .markdown-body .highlight pre {
-      margin-bottom: 0;
-      word-break: normal;
-    }
-
-    .markdown-body pre {
-      word-wrap: normal;
-    }
-
-    .markdown-body pre code {
-      display: inline;
-      max-width: initial;
-      padding: 0;
-      margin: 0;
-      overflow: initial;
-      line-height: inherit;
-      word-wrap: normal;
-      background-color: transparent;
-      border: 0;
-    }
-
-    .markdown-body pre code:before,
-    .markdown-body pre code:after {
-      content: normal;
-    }
-
-    .markdown-body kbd {
-      display: inline-block;
-      padding: 3px 5px;
-      font-size: 11px;
-      line-height: 10px;
-      color: #555;
-      vertical-align: middle;
-      background-color: #fcfcfc;
-      border: solid 1px #ccc;
-      border-bottom-color: #bbb;
-      border-radius: 3px;
-      box-shadow: inset 0 -1px 0 #bbb;
-    }
-
-    .markdown-body kbd {
-      display: inline-block;
-      padding: 3px 5px;
-      font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
-      line-height: 10px;
-      color: #555;
-      vertical-align: middle;
-      background-color: #fcfcfc;
-      border: solid 1px #ccc;
-      border-bottom-color: #bbb;
-      border-radius: 3px;
-      box-shadow: inset 0 -1px 0 #bbb;
-    }
-
-    .markdown-body .task-list-item {
-      list-style-type: none;
-    }
-
-    .markdown-body .task-list-item + .task-list-item {
-      margin-top: 3px;
-    }
-
-    .markdown-body .task-list-item input {
-      margin: 0 0.35em 0.25em -1.6em;
-      vertical-align: middle;
-    }
-
-    .markdown-body:checked + .radio-label {
-      z-index: 1;
-      position: relative;
-      border-color: #4078c0;
-    }
-
-    #readme, .examples {
-      min-width: 200px;
-      max-width: 790px;
-      margin: 30px auto;
-      padding: 0 30px;
-    }
-
-    #readme .boxed-group {
-      position: relative;
-      border-radius: 3px;
-      margin-bottom: 30px;
-    }
-
-    #readme .markdown-body,
-    #readme .plain,
-    .examples .examples-body {
-      background-color: #fff;
-      border: 1px solid #ddd;
-      border-bottom-left-radius: 3px;
-      border-bottom-right-radius: 3px;
-      padding: 30px;
-      word-wrap: break-word;
-    }
-
-    .boxed-group > h3,
-    .examples > h3,
-    .boxed-group .heading {
-      background-color: #f5f5f5;
-      margin: 0;
-      border-radius: 3px 3px 0 0;
-      border: 1px solid #d8d8d8;
-      border-bottom: 0;
-      padding: 9px 10px 10px;
-      font-size: 14px;
-      line-height: 17px;
-      display: block;
-    }
-
-    .examples-body ul {
-      margin: 0;
-    }
-  </style>
-  <style type="text/css">
-    /*
-
-    github.com style (c) Vasily Polovnyov <vast@whiteants.net>
-
-    */
-
-    .hljs {
-      display: block;
-      overflow-x: auto;
-      padding: 0.5em;
-      color: #333;
-      background: #f8f8f8;
-      -webkit-text-size-adjust: none;
-    }
-
-    .hljs-comment,
-    .diff .hljs-header {
-      color: #998;
-      font-style: italic;
-    }
-
-    .hljs-keyword,
-    .css .rule .hljs-keyword,
-    .hljs-winutils,
-    .nginx .hljs-title,
-    .hljs-subst,
-    .hljs-request,
-    .hljs-status {
-      color: #333;
-      font-weight: bold;
-    }
-
-    .hljs-number,
-    .hljs-hexcolor,
-    .ruby .hljs-constant {
-      color: #008080;
-    }
-
-    .hljs-string,
-    .hljs-tag .hljs-value,
-    .hljs-doctag,
-    .tex .hljs-formula {
-      color: #d14;
-    }
-
-    .hljs-title,
-    .hljs-id,
-    .scss .hljs-preprocessor {
-      color: #900;
-      font-weight: bold;
-    }
-
-    .hljs-list .hljs-keyword,
-    .hljs-subst {
-      font-weight: normal;
-    }
-
-    .hljs-class .hljs-title,
-    .hljs-type,
-    .vhdl .hljs-literal,
-    .tex .hljs-command {
-      color: #458;
-      font-weight: bold;
-    }
-
-    .hljs-tag,
-    .hljs-tag .hljs-title,
-    .hljs-rule .hljs-property,
-    .django .hljs-tag .hljs-keyword {
-      color: #000080;
-      font-weight: normal;
-    }
-
-    .hljs-attribute,
-    .hljs-variable,
-    .lisp .hljs-body,
-    .hljs-name {
-      color: #008080;
-    }
-
-    .hljs-regexp {
-      color: #009926;
-    }
-
-    .hljs-symbol,
-    .ruby .hljs-symbol .hljs-string,
-    .lisp .hljs-keyword,
-    .clojure .hljs-keyword,
-    .scheme .hljs-keyword,
-    .tex .hljs-special,
-    .hljs-prompt {
-      color: #990073;
-    }
-
-    .hljs-built_in {
-      color: #0086b3;
-    }
-
-    .hljs-preprocessor,
-    .hljs-pragma,
-    .hljs-pi,
-    .hljs-doctype,
-    .hljs-shebang,
-    .hljs-cdata {
-      color: #999;
-      font-weight: bold;
-    }
-
-    .hljs-deletion {
-      background: #fdd;
-    }
-
-    .hljs-addition {
-      background: #dfd;
-    }
-
-    .diff .hljs-change {
-      background: #0086b3;
-    }
-
-    .hljs-chunk {
-      color: #aaa;
-    }
-
-    .header {
-      min-width: 200px;
-      max-width: 790px;
-      margin:0 auto;
-    }
-  </style>
-</head>
-
-<body>
-<div class="header">
-  <h1>rc-slider@5.4.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>
-      
-      <li><a href="examples/slider.html">slider</a></li>
-      
-      <li><a href="examples/v-marks.html">v-marks</a></li>
-      
-      <li><a href="examples/v-range.html">v-range</a></li>
-      
-      <li><a href="examples/v-slider.html">v-slider</a></li>
-      
-    </ul>
-  </div>
-</div>
-<div id="readme" class="boxed-group">
-  <h3>README.md</h3>
-  <div class="markdown-body">
-    <h1>rc-slider<a id="user-content-rc-slider" name="rc-slider" class="anchor" aria-hidden="true" href="#rc-slider"><span class="octicon octicon-link"></span></a></h1><hr>
-<p>slider ui component for react</p>
-<p><a href="http://npmjs.org/package/rc-slider" title="null"><img src="http://img.shields.io/npm/v/rc-slider.svg?style=flat-square" alt="NPM version"></a>
-<a href="https://travis-ci.org/react-component/slider" title="null"><img src="https://img.shields.io/travis/react-component/slider.svg?style=flat-square" alt="build status"></a>
-<a href="https://coveralls.io/r/react-component/slider?branch=master" title="null"><img src="https://img.shields.io/coveralls/react-component/slider.svg?style=flat-square" alt="Test coverage"></a>
-<a href="https://gemnasium.com/react-component/slider" title="null"><img src="http://img.shields.io/gemnasium/react-component/slider.svg?style=flat-square" alt="gemnasium deps"></a>
-<a href="http://nodejs.org/download/" title="null"><img src="https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square" alt="node version"></a>
-<a href="https://npmjs.org/package/rc-slider" title="null"><img src="https://img.shields.io/npm/dm/rc-slider.svg?style=flat-square" alt="npm download"></a>
-<a href="https://saucelabs.com/u/rc-slider" title="null"><img src="https://saucelabs.com/buildstatus/rc-slider" alt="Sauce Test Status"></a></p>
-<p><a href="https://saucelabs.com/u/rc-slider" title="null"><img src="https://saucelabs.com/browser-matrix/rc-slider.svg" alt="Sauce Test Status"></a></p>
-<h2>Screenshots<a id="user-content-screenshots" name="screenshots" class="anchor" aria-hidden="true" href="#screenshots"><span class="octicon octicon-link"></span></a></h2><p><img src="https://t.alipayobjects.com/images/T1ki8fXeprXXXXXXXX.png" width="550"/></p>
-<p><img src="https://t.alipayobjects.com/images/T1pPhfXhBqXXXXXXXX.png" width="550"/></p>
-<p><img src="https://t.alipayobjects.com/images/T1wO8fXd4rXXXXXXXX.png" width="550"/></p>
-<p><img src="http://i.giphy.com/l46Cs36c9HrHMExoc.gif"/></p>
-<h2>Feature<a id="user-content-feature" name="feature" class="anchor" aria-hidden="true" href="#feature"><span class="octicon octicon-link"></span></a></h2><ul>
-<li>support ie8,ie8+,chrome,firefox,safari</li>
-</ul>
-<h3>Keyboard<a id="user-content-keyboard" name="keyboard" class="anchor" aria-hidden="true" href="#keyboard"><span class="octicon octicon-link"></span></a></h3><h2>install<a id="user-content-install" name="install" class="anchor" aria-hidden="true" href="#install"><span class="octicon octicon-link"></span></a></h2><p><a href="https://npmjs.org/package/rc-slider" title="null"><img src="https://nodei.co/npm/rc-slider.png" alt="rc-slider"></a></p>
-<h2>Usage<a id="user-content-usage" name="usage" class="anchor" aria-hidden="true" href="#usage"><span class="octicon octicon-link"></span></a></h2><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">var</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
-<span class="hljs-keyword">var</span> ReactDOM = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-dom'</span>);
-<span class="hljs-keyword">var</span> Slider = <span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider'</span>);
-ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> /&gt;</span>, container);</span></code></pre></div><h2>API<a id="user-content-api" name="api" class="anchor" aria-hidden="true" href="#api"><span class="octicon octicon-link"></span></a></h2><h3>props<a id="user-content-props" name="props" class="anchor" aria-hidden="true" href="#props"><span class="octicon octicon-link"></span></a></h3><table class="table table-bordered table-striped">
-    <thead>
-    <tr>
-        <th style="width: 100px;">name</th>
-        <th style="width: 50px;">type</th>
-        <th style="width: 50px;">default</th>
-        <th>description</th>
-    </tr>
-    </thead>
-    <tbody>
-        <tr>
-          <td>className</td>
-          <td>String</td>
-          <td>rc-slider</td>
-          <td>Additional css class for the root dom node</td>
-        </tr>
-        <tr>
-          <td>min</td>
-          <td>number</td>
-          <td>0</td>
-          <td>The minimum value of the slider</td>
-        </tr>
-        <tr>
-          <td>max</td>
-          <td>number</td>
-          <td>100</td>
-          <td>The maximum value of the slider</td>
-        </tr>
-        <tr>
-          <td>marks</td>
-          <td>object{number: string} or object{number: object{ style, label }}</td>
-          <td>{}</td>
-          <td>Mark on the slider. The key determines the position, and the value determines what will show. If you want to set the style of a specific mark point, the value should be an object which contains <code>style</code> and <code>label</code> properties.</td>
-        </tr>
-        <tr>
-          <td>step</td>
-          <td>number or <code>null</code></td>
-          <td>1</td>
-          <td>Value to be added or subtracted on each step the slider makes. Must be greater than zero. max - min should be evenly divisible by the step value. When <code>marks</code> is not an empty object, <code>step</code> can be set to <code>null</code>, to make marks as steps.</td>
-        </tr>
-        <tr>
-          <td>range</td>
-          <td>boolean or number</td>
-          <td>false</td>
-          <td>Determines the type of slider. If range is <code>true</code>, two handles will be rendered in order to select a range. If range is a number, multiple handles will be rendered (number + 1). Using <code>range={true}</code> is equivalent to <code>range={1}</code>.</td>
-        </tr>
-        <tr>
-          <td>allowCross</td>
-          <td>boolean</td>
-          <td>true</td>
-          <td>When <code>range</code> is <code>true</code>, <code>allowCross</code> could be set as <code>true</code> to allow those handles to cross.</td>
-        </tr>
-        <tr>
-          <td>pushable</td>
-          <td>boolean or number</td>
-          <td>true</td>
-          <td>When <code>range</code> is <code>true</code>, <code>pushable</code> could be set as <code>true</code> to allow pushing of surrounding handles when moving an handle. When set to a number, the number will be the minimum ensured distance between handles. Example: <img src="http://i.giphy.com/l46Cs36c9HrHMExoc.gif"/></td>
-        </tr>
-        <tr>
-          <td>vertical</td>
-          <td>boolean</td>
-          <td>false</td>
-          <td>If vertical is <code>true</code>, the slider will be vertical.</td>
-        </tr>
-        <tr>
-          <td>defaultValue</td>
-          <td>number or [number, number, ...]</td>
-          <td>0 or [0, 0]</td>
-          <td>Set initial 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>value</td>
-          <td>number or [number, number, ...]</td>
-          <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>
-          <td>true</td>
-          <td>If the value is <code>true</code>, it means a continuous value interval, otherwise, it is a independent value.</td>
-        </tr>
-        <tr>
-          <td>disabled</td>
-          <td>boolean</td>
-          <td>false</td>
-          <td>If <code>true</code>, handles can&#39;t be moved.</td>
-        </tr>
-        <tr>
-          <td>tipTransitionName</td>
-          <td>string</td>
-          <td>&#39;&#39;</td>
-          <td>Set the animation for tooltip if it shows.</td>
-        </tr>
-        <tr>
-          <td>tipFormatter</td>
-          <td>function or <code>null</code></td>
-          <td></td>
-          <td>Format the value of the tooltip if it shows. If <code>null</code> the tooltip will always be hidden. When given a function, the first argument will be the value and the second will be the index of the slider handle.</td>
-        </tr>
-        <tr>
-          <td>dots</td>
-          <td>bool</td>
-          <td>false</td>
-          <td>When the <code>step</code> value is greater than 1, you can set the <code>dots</code> to  <code>true</code> if you want to render the slider with dots.</td>
-        </tr>
-        <tr>
-          <td>onChange</td>
-          <td>function</td>
-          <td>NOOP</td>
-          <td><code>onChange</code> will be triggered while the value of Slider changing.</td>
-        </tr>
-        <tr>
-          <td>onAfterChange</td>
-          <td>function</td>
-          <td>NOOP</td>
-          <td><code>onAfterChange</code> will be triggered when <code>ontouchend</code> or <code>onmouseup</code> is triggered.</td>
-        </tr>
-    </tbody>
-</table>
-
-<h2>Development<a id="user-content-development" name="development" class="anchor" aria-hidden="true" href="#development"><span class="octicon octicon-link"></span></a></h2><div class="highlight"><pre><code language="undefined">npm install
-npm start</code></pre></div><h2>Example<a id="user-content-example" name="example" class="anchor" aria-hidden="true" href="#example"><span class="octicon octicon-link"></span></a></h2><p><a href="http://localhost:8005/examples/" title="null">http://localhost:8005/examples/</a></p>
-<p>online example: <a href="http://react-component.github.io/slider/" title="null">http://react-component.github.io/slider/</a></p>
-<h2>Test Case<a id="user-content-test-case" name="test-case" class="anchor" aria-hidden="true" href="#test-case"><span class="octicon octicon-link"></span></a></h2><p><a href="http://localhost:8005/tests/runner.html?coverage" title="null">http://localhost:8005/tests/runner.html?coverage</a></p>
-<h2>Coverage<a id="user-content-coverage" name="coverage" class="anchor" aria-hidden="true" href="#coverage"><span class="octicon octicon-link"></span></a></h2><p><a href="http://localhost:8005/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8088/tests/runner.html?coverage" title="null">http://localhost:8005/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8088/tests/runner.html?coverage</a></p>
-<h2>License<a id="user-content-license" name="license" class="anchor" aria-hidden="true" href="#license"><span class="octicon octicon-link"></span></a></h2><p>rc-slider is released under the MIT license.</p>
-
-  </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>

index.js

@@ -0,0 +1,2 @@
+
+module.exports = require('./src/');

package.json

@@ -0,0 +1,64 @@
+{
+  "name": "rc-slider",
+  "version": "5.4.0",
+  "description": "slider ui component for react",
+  "keywords": [
+    "react",
+    "react-component",
+    "react-slider",
+    "slider"
+  ],
+  "homepage": "http://github.com/react-component/slider",
+  "author": "sima.zhang1990@gmail.com",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:react-component/slider.git"
+  },
+  "bugs": {
+    "url": "http://github.com/react-component/slider/issues"
+  },
+  "files": [
+    "assets/*.css",
+    "lib",
+    "dist"
+  ],
+  "licenses": "MIT",
+  "main": "./lib/index.js",
+  "entry": {
+    "rc-slider": ["./assets/index.less", "./src/index.js"]
+  },
+  "style": "./assets/index.css",
+  "config": {
+    "port": 8005
+  },
+  "scripts": {
+    "build": "rc-tools run build",
+    "gh-pages": "rc-tools run gh-pages",
+    "start": "rc-tools run server",
+    "pub": "rc-tools run pub --babel-runtime",
+    "lint": "rc-tools run lint",
+    "karma": "rc-tools run karma",
+    "saucelabs": "rc-tools run saucelabs",
+    "test": "rc-tools run test",
+    "chrome-test": "rc-tools run chrome-test",
+    "coverage": "rc-tools run coverage"
+  },
+  "devDependencies": {
+    "expect.js": "0.3.x",
+    "pre-commit": "1.x",
+    "rc-tools": "^5.6.8",
+    "react": "^15.2.1",
+    "react-addons-test-utils": "^15.2.1",
+    "react-dom": "^15.2.1"
+  },
+  "pre-commit": [
+    "lint"
+  ],
+  "dependencies": {
+    "babel-runtime": "6.x",
+    "classnames": "^2.2.5",
+    "rc-tooltip": "^3.4.2",
+    "rc-util": "^3.2.1",
+    "warning": "^3.0.0"
+  }
+}

src/Handle.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import Tooltip from 'rc-tooltip';
+
+export default class Handle extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isTooltipVisible: false,
+    };
+  }
+
+  hideTooltip() {
+    this.setState({
+      isTooltipVisible: false,
+    });
+  }
+
+  showTooltip() {
+    this.setState({
+      isTooltipVisible: true,
+    });
+  }
+
+  render() {
+    const {
+      prefixCls,
+      tooltipPrefixCls,
+      className,
+      tipTransitionName,
+      tipFormatter,
+      vertical,
+      offset,
+      value,
+      dragging,
+      noTip,
+      index,
+    } = this.props;
+
+    const style = vertical ? { bottom: `${offset}%` } : { left: `${offset}%` };
+    const handle = (
+      <div className={className} style={style}
+        onMouseUp={this.showTooltip.bind(this)}
+        onMouseEnter={this.showTooltip.bind(this)}
+        onMouseLeave={this.hideTooltip.bind(this)}
+      />
+    );
+
+    if (noTip) {
+      return handle;
+    }
+
+    const isTooltipVisible = dragging || this.state.isTooltipVisible;
+    return (
+      <Tooltip
+        prefixCls={tooltipPrefixCls || `${prefixCls}-tooltip`}
+        placement="top"
+        visible={isTooltipVisible}
+        overlay={<span>{tipFormatter(value, index)}</span>}
+        delay={0}
+        transitionName={tipTransitionName}
+      >
+        {handle}
+      </Tooltip>
+    );
+  }
+}
+
+Handle.propTypes = {
+  prefixCls: React.PropTypes.string,
+  tooltipPrefixCls: React.PropTypes.string,
+  className: React.PropTypes.string,
+  vertical: React.PropTypes.bool,
+  offset: React.PropTypes.number,
+  tipTransitionName: React.PropTypes.string,
+  tipFormatter: React.PropTypes.func,
+  value: React.PropTypes.number,
+  dragging: React.PropTypes.bool,
+  noTip: React.PropTypes.bool,
+  index: React.PropTypes.number,
+};

src/Marks.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import classNames from 'classnames';
+
+const Marks = ({ className, vertical, marks, included, upperBound, lowerBound, max, min }) => {
+  const marksKeys = Object.keys(marks);
+  const marksCount = marksKeys.length;
+  const unit = 100 / (marksCount - 1);
+  const markWidth = unit * 0.9;
+
+  const range = max - min;
+  const elements = marksKeys.map(parseFloat).sort((a, b) => a - b).map((point) => {
+    const isActived = (!included && point === upperBound) ||
+            (included && point <= upperBound && point >= lowerBound);
+    const markClassName = classNames({
+      [`${className}-text`]: true,
+      [`${className}-text-active`]: isActived,
+    });
+
+    const bottomStyle = {
+      // height: markWidth + '%',
+      marginBottom: '-50%',
+      bottom: `${(point - min) / range * 100}%`,
+    };
+
+    const leftStyle = {
+      width: `${markWidth}%`,
+      marginLeft: `${-markWidth / 2}%`,
+      left: `${(point - min) / range * 100}%`,
+    };
+
+    const style = vertical ? bottomStyle : leftStyle;
+
+    const markPoint = marks[point];
+    const markPointIsObject = typeof markPoint === 'object' &&
+            !React.isValidElement(markPoint);
+    const markLabel = markPointIsObject ? markPoint.label : markPoint;
+    const markStyle = markPointIsObject ?
+            { ...style, ...markPoint.style } : style;
+    return (<span className={markClassName} style={markStyle} key={point}>
+             {markLabel}
+            </span>);
+  });
+
+  return <div className={className}>{elements}</div>;
+};
+
+export default Marks;

src/Slider.jsx

@@ -0,0 +1,600 @@
+import { findDOMNode } from 'react-dom';
+import React, { cloneElement } from 'react';
+import addEventListener from 'rc-util/lib/Dom/addEventListener';
+import classNames from 'classnames';
+import Track from './Track';
+import DefaultHandle from './Handle';
+import Steps from './Steps';
+import Marks from './Marks';
+import warning from 'warning';
+
+function noop() {
+}
+
+function isNotTouchEvent(e) {
+  return e.touches.length > 1 || (e.type.toLowerCase() === 'touchend' && e.touches.length > 0);
+}
+
+function getTouchPosition(vertical, e) {
+  return vertical ? e.touches[0].clientY : e.touches[0].pageX;
+}
+
+function getMousePosition(vertical, e) {
+  return vertical ? e.clientY : e.pageX;
+}
+
+function getHandleCenterPosition(vertical, handle) {
+  const coords = handle.getBoundingClientRect();
+  return vertical ?
+    coords.top + (coords.height * 0.5) :
+    coords.left + (coords.width * 0.5);
+}
+
+function pauseEvent(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+class Slider extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const { range, min, max, step } = props;
+    const initialValue = range ? Array.apply(null, Array(range + 1)).map(() => min) : min;
+    const defaultValue = ('defaultValue' in props ? props.defaultValue : initialValue);
+    const value = (props.value !== undefined ? props.value : defaultValue);
+
+    const bounds = (range ? value : [min, value]).map(v => this.trimAlignValue(v));
+
+    let recent;
+    if (range && bounds[0] === bounds[bounds.length - 1] && bounds[0] === max) {
+      recent = 0;
+    } else {
+      recent = bounds.length - 1;
+    }
+
+    if (process.env.NODE_ENV !== 'production' &&
+        step && Math.floor(step) === step &&
+        (max - min) % step !== 0) {
+      warning(
+        false,
+        'Slider[max] - Slider[min] (%s) should be a multiple of Slider[step] (%s)',
+        max - min,
+        step
+      );
+    }
+
+    this.state = {
+      handle: null,
+      recent,
+      bounds,
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (!('value' in nextProps || 'min' in nextProps || 'max' in nextProps)) return;
+
+    const { bounds } = this.state;
+    if (nextProps.range) {
+      const value = nextProps.value || bounds;
+      const nextBounds = value.map(v => this.trimAlignValue(v, nextProps));
+      if (nextBounds.every((v, i) => v === bounds[i])) return;
+
+      this.setState({ bounds: nextBounds });
+      if (bounds.some(v => this.isValueOutOfBounds(v, nextProps))) {
+        this.props.onChange(nextBounds);
+      }
+    } else {
+      const value = nextProps.value !== undefined ? nextProps.value : bounds[1];
+      const nextValue = this.trimAlignValue(value, nextProps);
+      if (nextValue === bounds[1] && bounds[0] === nextProps.min) return;
+
+      this.setState({ bounds: [nextProps.min, nextValue] });
+      if (this.isValueOutOfBounds(bounds[1], nextProps)) {
+        this.props.onChange(nextValue);
+      }
+    }
+  }
+
+  onChange(state) {
+    const props = this.props;
+    const isNotControlled = !('value' in props);
+    if (isNotControlled) {
+      this.setState(state);
+    } else if (state.handle !== undefined) {
+      this.setState({ handle: state.handle });
+    }
+
+    const data = { ...this.state, ...state };
+    const changedValue = props.range ? data.bounds : data.bounds[1];
+    props.onChange(changedValue);
+  }
+
+  onMouseDown(e) {
+    if (e.button !== 0) { return; }
+
+    let position = getMousePosition(this.props.vertical, e);
+    if (!this.isEventFromHandle(e)) {
+      this.dragOffset = 0;
+    } else {
+      const handlePosition = getHandleCenterPosition(this.props.vertical, e.target);
+      this.dragOffset = position - handlePosition;
+      position = handlePosition;
+    }
+    this.onStart(position);
+    this.addDocumentEvents('mouse');
+    pauseEvent(e);
+  }
+
+  onMouseMove(e) {
+    const position = getMousePosition(this.props.vertical, e);
+    this.onMove(e, position - this.dragOffset);
+  }
+
+  onMove(e, position) {
+    pauseEvent(e);
+    const props = this.props;
+    const state = this.state;
+
+    let diffPosition = position - this.startPosition;
+    diffPosition = this.props.vertical ? -diffPosition : diffPosition;
+    const diffValue = diffPosition / this.getSliderLength() * (props.max - props.min);
+
+    const value = this.trimAlignValue(this.startValue + diffValue);
+    const oldValue = state.bounds[state.handle];
+    if (value === oldValue) return;
+
+    const nextBounds = [...state.bounds];
+    nextBounds[state.handle] = value;
+    let nextHandle = state.handle;
+    if (props.pushable !== false) {
+      const originalValue = state.bounds[nextHandle];
+      this.pushSurroundingHandles(nextBounds, nextHandle, originalValue);
+    } else if (props.allowCross) {
+      nextBounds.sort((a, b) => a - b);
+      nextHandle = nextBounds.indexOf(value);
+    }
+    this.onChange({
+      handle: nextHandle,
+      bounds: nextBounds,
+    });
+  }
+
+  onStart(position) {
+    const props = this.props;
+    props.onBeforeChange(this.getValue());
+
+    const value = this.calcValueByPos(position);
+    this.startValue = value;
+    this.startPosition = position;
+
+    const state = this.state;
+    const { bounds } = state;
+
+    let valueNeedChanging = 1;
+    if (this.props.range) {
+      let closestBound = 0;
+      for (let i = 1; i < bounds.length - 1; ++i) {
+        if (value > bounds[i]) { closestBound = i; }
+      }
+      if (Math.abs(bounds[closestBound + 1] - value) < Math.abs(bounds[closestBound] - value)) {
+        closestBound = closestBound + 1;
+      }
+      valueNeedChanging = closestBound;
+
+      const isAtTheSamePoint = (bounds[closestBound + 1] === bounds[closestBound]);
+      if (isAtTheSamePoint) {
+        valueNeedChanging = state.recent;
+      }
+
+      if (isAtTheSamePoint && (value !== bounds[closestBound + 1])) {
+        valueNeedChanging = value < bounds[closestBound + 1] ? closestBound : closestBound + 1;
+      }
+    }
+
+    this.setState({
+      handle: valueNeedChanging,
+      recent: valueNeedChanging,
+    });
+
+    const oldValue = state.bounds[valueNeedChanging];
+    if (value === oldValue) return;
+
+    const nextBounds = [...state.bounds];
+    nextBounds[valueNeedChanging] = value;
+    this.onChange({ bounds: nextBounds });
+  }
+
+  onTouchMove(e) {
+    if (isNotTouchEvent(e)) {
+      this.end('touch');
+      return;
+    }
+
+    const position = getTouchPosition(this.props.vertical, e);
+    this.onMove(e, position - this.dragOffset);
+  }
+
+  onTouchStart(e) {
+    if (isNotTouchEvent(e)) return;
+
+    let position = getTouchPosition(this.props.vertical, e);
+    if (!this.isEventFromHandle(e)) {
+      this.dragOffset = 0;
+    } else {
+      const handlePosition = getHandleCenterPosition(this.props.vertical, e.target);
+      this.dragOffset = position - handlePosition;
+      position = handlePosition;
+    }
+    this.onStart(position);
+    this.addDocumentEvents('touch');
+    pauseEvent(e);
+  }
+
+  /**
+   * Returns an array of possible slider points, taking into account both
+   * `marks` and `step`. The result is cached.
+   */
+  getPoints() {
+    const { marks, step, min, max } = this.props;
+    const cache = this._getPointsCache;
+    if (!cache || cache.marks !== marks || cache.step !== step) {
+      const pointsObject = { ...marks };
+      if (step !== null) {
+        for (let point = min; point <= max; point += step) {
+          pointsObject[point] = point;
+        }
+      }
+      const points = Object.keys(pointsObject).map(parseFloat);
+      points.sort((a, b) => a - b);
+      this._getPointsCache = { marks, step, points };
+    }
+    return this._getPointsCache.points;
+  }
+
+  getPrecision(step) {
+    const stepString = step.toString();
+    let precision = 0;
+    if (stepString.indexOf('.') >= 0) {
+      precision = stepString.length - stepString.indexOf('.') - 1;
+    }
+    return precision;
+  }
+
+  getSliderLength() {
+    const slider = this.refs.slider;
+    if (!slider) {
+      return 0;
+    }
+
+    return this.props.vertical ? slider.clientHeight : slider.clientWidth;
+  }
+
+  getSliderStart() {
+    const slider = this.refs.slider;
+    const rect = slider.getBoundingClientRect();
+
+    return this.props.vertical ? rect.top : rect.left;
+  }
+
+  getValue() {
+    const { bounds } = this.state;
+    return this.props.range ? bounds : bounds[1];
+  }
+
+  addDocumentEvents(type) {
+    if (type === 'touch') {
+      // just work for chrome iOS Safari and Android Browser
+      this.onTouchMoveListener =
+        addEventListener(document, 'touchmove', this.onTouchMove.bind(this));
+      this.onTouchUpListener =
+        addEventListener(document, 'touchend', this.end.bind(this, 'touch'));
+    } else if (type === 'mouse') {
+      this.onMouseMoveListener =
+        addEventListener(document, 'mousemove', this.onMouseMove.bind(this));
+      this.onMouseUpListener =
+        addEventListener(document, 'mouseup', this.end.bind(this, 'mouse'));
+    }
+  }
+
+  calcOffset(value) {
+    const { min, max } = this.props;
+    const ratio = (value - min) / (max - min);
+    return ratio * 100;
+  }
+
+  calcValue(offset) {
+    const { vertical, min, max } = this.props;
+    const ratio = Math.abs(offset / this.getSliderLength());
+    const value = vertical ? (1 - ratio) * (max - min) + min : ratio * (max - min) + min;
+    return value;
+  }
+
+  calcValueByPos(position) {
+    const pixelOffset = position - this.getSliderStart();
+    const nextValue = this.trimAlignValue(this.calcValue(pixelOffset));
+    return nextValue;
+  }
+
+  end(type) {
+    this.removeEvents(type);
+    this.props.onAfterChange(this.getValue());
+    this.setState({ handle: null });
+  }
+
+  isEventFromHandle(e) {
+    return this.state.bounds.some((x, i) => (
+        this.refs[`handle-${i}`] &&
+        e.target === findDOMNode(this.refs[`handle-${i}`])
+    ));
+  }
+
+  isValueOutOfBounds(value, props) {
+    return value < props.min || value > props.max;
+  }
+
+  pushHandle(bounds, handle, direction, amount) {
+    const originalValue = bounds[handle];
+    let currentValue = bounds[handle];
+    while (direction * (currentValue - originalValue) < amount) {
+      if (!this.pushHandleOnePoint(bounds, handle, direction)) {
+        // can't push handle enough to create the needed `amount` gap, so we
+        // revert its position to the original value
+        bounds[handle] = originalValue;
+        return false;
+      }
+      currentValue = bounds[handle];
+    }
+    // the handle was pushed enough to create the needed `amount` gap
+    return true;
+  }
+
+  pushHandleOnePoint(bounds, handle, direction) {
+    const points = this.getPoints();
+    const pointIndex = points.indexOf(bounds[handle]);
+    const nextPointIndex = pointIndex + direction;
+    if (nextPointIndex >= points.length || nextPointIndex < 0) {
+      // reached the minimum or maximum available point, can't push anymore
+      return false;
+    }
+    const nextHandle = handle + direction;
+    const nextValue = points[nextPointIndex];
+    const { pushable: threshold } = this.props;
+    const diffToNext = direction * (bounds[nextHandle] - nextValue);
+    if (!this.pushHandle(bounds, nextHandle, direction, threshold - diffToNext)) {
+      // couldn't push next handle, so we won't push this one either
+      return false;
+    }
+    // push the handle
+    bounds[handle] = nextValue;
+    return true;
+  }
+
+  pushSurroundingHandles(bounds, handle, originalValue) {
+    const { pushable: threshold } = this.props;
+    const value = bounds[handle];
+
+    let direction = 0;
+    if (bounds[handle + 1] - value < threshold) {
+      direction = +1;
+    } else if (value - bounds[handle - 1] < threshold) {
+      direction = -1;
+    }
+
+    if (direction === 0) { return; }
+
+    const nextHandle = handle + direction;
+    const diffToNext = direction * (bounds[nextHandle] - value);
+    if (!this.pushHandle(bounds, nextHandle, direction, threshold - diffToNext)) {
+      // revert to original value if pushing is impossible
+      bounds[handle] = originalValue;
+    }
+  }
+
+  removeEvents(type) {
+    if (type === 'touch') {
+      this.onTouchMoveListener.remove();
+      this.onTouchUpListener.remove();
+    } else if (type === 'mouse') {
+      this.onMouseMoveListener.remove();
+      this.onMouseUpListener.remove();
+    }
+  }
+
+  trimAlignValue(v, nextProps) {
+    const state = this.state || {};
+    const { handle, bounds } = state;
+    const { marks, step, min, max, allowCross } = { ...this.props, ...(nextProps || {}) };
+
+    let val = v;
+    if (val <= min) {
+      val = min;
+    }
+    if (val >= max) {
+      val = max;
+    }
+    /* eslint-disable eqeqeq */
+    if (!allowCross && handle != null && handle > 0 && val <= bounds[handle - 1]) {
+      val = bounds[handle - 1];
+    }
+    if (!allowCross && handle != null && handle < bounds.length - 1 && val >= bounds[handle + 1]) {
+      val = bounds[handle + 1];
+    }
+    /* eslint-enable eqeqeq */
+
+    const points = Object.keys(marks).map(parseFloat);
+    if (step !== null) {
+      const closestStep = (Math.round((val - min) / step) * step) + min;
+      points.push(closestStep);
+    }
+
+    const diffs = points.map((point) => Math.abs(val - point));
+    const closestPoint = points[diffs.indexOf(Math.min.apply(Math, diffs))];
+
+    return step !== null ? parseFloat(closestPoint.toFixed(this.getPrecision(step))) : closestPoint;
+  }
+
+  render() {
+    const {
+        handle,
+        bounds,
+    } = this.state;
+    const {
+        className,
+        prefixCls,
+        tooltipPrefixCls,
+        disabled,
+        vertical,
+        dots,
+        included,
+        range,
+        step,
+        marks,
+        max, min,
+        tipTransitionName,
+        tipFormatter,
+        children,
+    } = this.props;
+
+    const customHandle = this.props.handle;
+
+    const offsets = bounds.map(v => this.calcOffset(v));
+
+    const handleClassName = `${prefixCls}-handle`;
+
+    const handlesClassNames = bounds.map((v, i) => classNames({
+      [handleClassName]: true,
+      [`${handleClassName}-${i + 1}`]: true,
+      [`${handleClassName}-lower`]: i === 0,
+      [`${handleClassName}-upper`]: i === bounds.length - 1,
+    }));
+
+    const isNoTip = (step === null) || (tipFormatter === null);
+
+    const commonHandleProps = {
+      prefixCls,
+      tooltipPrefixCls,
+      noTip: isNoTip,
+      tipTransitionName,
+      tipFormatter,
+      vertical,
+    };
+
+    const handles = bounds.map((v, i) => cloneElement(customHandle, {
+      ...commonHandleProps,
+      className: handlesClassNames[i],
+      value: v,
+      offset: offsets[i],
+      dragging: handle === i,
+      index: i,
+      key: i,
+      ref: `handle-${i}`,
+    }));
+    if (!range) { handles.shift(); }
+
+    const isIncluded = included || range;
+
+    const tracks = [];
+    for (let i = 1; i < bounds.length; ++i) {
+      const trackClassName = classNames({
+        [`${prefixCls}-track`]: true,
+        [`${prefixCls}-track-${i}`]: true,
+      });
+      tracks.push(
+        <Track className={trackClassName} vertical={vertical} included={isIncluded}
+          offset={offsets[i - 1]} length={offsets[i] - offsets[i - 1]} key={i}
+        />
+      );
+    }
+
+    const sliderClassName = classNames({
+      [prefixCls]: true,
+      [`${prefixCls}-with-marks`]: Object.keys(marks).length,
+      [`${prefixCls}-disabled`]: disabled,
+      [`${prefixCls}-vertical`]: this.props.vertical,
+      [className]: !!className,
+    });
+
+    return (
+      <div ref="slider" className={sliderClassName}
+        onTouchStart={disabled ? noop : this.onTouchStart.bind(this)}
+        onMouseDown={disabled ? noop : this.onMouseDown.bind(this)}
+      >
+        <div className={`${prefixCls}-rail`} />
+        {tracks}
+        <Steps prefixCls={prefixCls} vertical = {vertical} marks={marks} dots={dots} step={step}
+          included={isIncluded} lowerBound={bounds[0]}
+          upperBound={bounds[bounds.length - 1]} max={max} min={min}
+        />
+        {handles}
+        <Marks className={`${prefixCls}-mark`} vertical = {vertical} marks={marks}
+          included={isIncluded} lowerBound={bounds[0]}
+          upperBound={bounds[bounds.length - 1]} max={max} min={min}
+        />
+        {children}
+      </div>
+    );
+  }
+}
+
+Slider.propTypes = {
+  min: React.PropTypes.number,
+  max: React.PropTypes.number,
+  step: React.PropTypes.number,
+  defaultValue: React.PropTypes.oneOfType([
+    React.PropTypes.number,
+    React.PropTypes.arrayOf(React.PropTypes.number),
+  ]),
+  value: React.PropTypes.oneOfType([
+    React.PropTypes.number,
+    React.PropTypes.arrayOf(React.PropTypes.number),
+  ]),
+  marks: React.PropTypes.object,
+  included: React.PropTypes.bool,
+  className: React.PropTypes.string,
+  prefixCls: React.PropTypes.string,
+  tooltipPrefixCls: React.PropTypes.string,
+  disabled: React.PropTypes.bool,
+  children: React.PropTypes.any,
+  onBeforeChange: React.PropTypes.func,
+  onChange: React.PropTypes.func,
+  onAfterChange: React.PropTypes.func,
+  handle: React.PropTypes.element,
+  tipTransitionName: React.PropTypes.string,
+  tipFormatter: React.PropTypes.func,
+  dots: React.PropTypes.bool,
+  range: React.PropTypes.oneOfType([
+    React.PropTypes.bool,
+    React.PropTypes.number,
+  ]),
+  vertical: React.PropTypes.bool,
+  allowCross: React.PropTypes.bool,
+  pushable: React.PropTypes.oneOfType([
+    React.PropTypes.bool,
+    React.PropTypes.number,
+  ]),
+};
+
+Slider.defaultProps = {
+  prefixCls: 'rc-slider',
+  className: '',
+  tipTransitionName: '',
+  min: 0,
+  max: 100,
+  step: 1,
+  marks: {},
+  handle: <DefaultHandle />,
+  onBeforeChange: noop,
+  onChange: noop,
+  onAfterChange: noop,
+  tipFormatter: value => value,
+  included: true,
+  disabled: false,
+  dots: false,
+  range: false,
+  vertical: false,
+  allowCross: true,
+  pushable: false,
+};
+
+export default Slider;

src/Steps.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import classNames from 'classnames';
+import warning from 'warning';
+
+function calcPoints(vertical, marks, dots, step, min, max) {
+  warning(
+    dots ? step > 0 : true,
+    '`Slider[step]` should be a positive number in order to make Slider[dots] work.'
+  );
+  const points = Object.keys(marks).map(parseFloat);
+  if (dots) {
+    for (let i = min; i <= max; i = i + step) {
+      if (points.indexOf(i) >= 0) continue;
+      points.push(i);
+    }
+  }
+  return points;
+}
+
+const Steps = ({ prefixCls, vertical, marks, dots, step, included,
+                lowerBound, upperBound, max, min }) => {
+  const range = max - min;
+  const elements = calcPoints(vertical, marks, dots, step, min, max).map((point) => {
+    const offset = `${Math.abs(point - min) / range * 100}%`;
+    const style = vertical ? { bottom: offset } : { left: offset };
+
+    const isActived = (!included && point === upperBound) ||
+            (included && point <= upperBound && point >= lowerBound);
+    const pointClassName = classNames({
+      [`${prefixCls}-dot`]: true,
+      [`${prefixCls}-dot-active`]: isActived,
+    });
+
+    return <span className={pointClassName} style={style} key={point} />;
+  });
+
+  return <div className={`${prefixCls}-step`}>{elements}</div>;
+};
+
+export default Steps;

src/Track.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const Track = ({ className, included, vertical, offset, length }) => {
+  const style = {
+    visibility: included ? 'visible' : 'hidden',
+  };
+  if (vertical) {
+    style.bottom = `${offset}%`;
+    style.height = `${length}%`;
+  } else {
+    style.left = `${offset}%`;
+    style.width = `${length}%`;
+  }
+  return <div className={className} style={style} />;
+};
+
+export default Track;

src/index.js

@@ -0,0 +1,2 @@
+
+module.exports = require('./Slider');

tests/index.js

@@ -0,0 +1,343 @@
+/* eslint-disable max-len */
+const expect = require('expect.js');
+const React = require('react');
+const ReactDOM = require('react-dom');
+const ReactTestUtils = require('react-addons-test-utils');
+const Slider = require('..');
+
+function createSliderWrapperComponent() {
+  return class SliderWrapper extends React.Component {
+    render() {
+      return (
+        <div style={{ position: `absolute`, width: `100px`, height: `10px` }}>
+          <Slider ref="slider"/>
+        </div>
+      );
+    }
+  };
+}
+
+require('../assets/index.less');
+
+describe('rc-slider', function test() {
+  this.timeout(5000);
+  const div = document.createElement('div');
+  document.body.appendChild(div);
+
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(div);
+  });
+
+  it('should render a Slider with correct DOM structure', () => {
+    const slider = ReactDOM.render(<Slider />, div);
+    expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider').length).to.be(1);
+    expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-handle').length).to.be(1);
+    expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-track').length).to.be(1);
+  });
+
+  it('should render a Slider with default value correctly', () => {
+    const sliderWithDefaultValue = ReactDOM.render(<Slider defaultValue={50} />, div);
+    expect(sliderWithDefaultValue.state.bounds[1]).to.be(50);
+    expect(ReactTestUtils
+           .scryRenderedDOMComponentsWithClass(sliderWithDefaultValue, 'rc-slider-handle')[0]
+           .style.cssText)
+      .to.match(/left: 50%;/);
+
+    const trackStyle = ReactTestUtils
+            .scryRenderedDOMComponentsWithClass(sliderWithDefaultValue, 'rc-slider-track')[0]
+            .style.cssText;
+    expect(trackStyle).to.match(/left: 0%;/);
+    expect(trackStyle).to.match(/width: 50%;/);
+    expect(trackStyle).to.match(/visibility: visible;/);
+  });
+
+  it('should render a Slider with value corrently', () => {
+    const sliderWithValue = ReactDOM.render(<Slider value={50} />, div);
+    expect(sliderWithValue.state.bounds[1]).to.be(50);
+    expect(ReactTestUtils
+           .scryRenderedDOMComponentsWithClass(sliderWithValue, 'rc-slider-handle')[0]
+           .style.cssText)
+      .to.match(/left: 50%;/);
+
+    const trackStyle = ReactTestUtils
+            .scryRenderedDOMComponentsWithClass(sliderWithValue, 'rc-slider-track')[0]
+            .style.cssText;
+    expect(trackStyle).to.match(/left: 0%;/);
+    expect(trackStyle).to.match(/width: 50%;/);
+    expect(trackStyle).to.match(/visibility: visible;/);
+  });
+
+  it('should render a Range with correct DOM structure', () => {
+    const range = ReactDOM.render(<Slider range />, div);
+    expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(range, 'rc-slider').length).to.be(1);
+    expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(range, 'rc-slider-handle').length).to.be(2);
+    expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(range, 'rc-slider-track').length).to.be(1);
+  });
+
+  it('should render a Multi-Range with correct DOM structure', () => {
+    const multiRange = ReactDOM.render(<Slider range={3} />, div);
+    expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(multiRange, 'rc-slider').length).to.be(1);
+
+    expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(multiRange, 'rc-slider-handle').length).to.be(4);
+    expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(multiRange, 'rc-slider-handle-1').length).to.be(1);
+    expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(multiRange, 'rc-slider-handle-2').length).to.be(1);
+    expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(multiRange, 'rc-slider-handle-3').length).to.be(1);
+    expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(multiRange, 'rc-slider-handle-4').length).to.be(1);
+
+    expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(multiRange, 'rc-slider-track').length).to.be(3);
+    expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(multiRange, 'rc-slider-track-1').length).to.be(1);
+    expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(multiRange, 'rc-slider-track-2').length).to.be(1);
+    expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(multiRange, 'rc-slider-track-3').length).to.be(1);
+  });
+
+  it('should render a Range with default value correctly', () => {
+    const rangeWithDefaultValue = ReactDOM.render(<Slider range defaultValue={[0, 50]} />, div);
+    expect(rangeWithDefaultValue.state.bounds[0]).to.be(0);
+    expect(rangeWithDefaultValue.state.bounds[1]).to.be(50);
+    expect(ReactTestUtils
+      .scryRenderedDOMComponentsWithClass(rangeWithDefaultValue, 'rc-slider-handle')[0]
+      .style.cssText)
+      .to.match(/left: 0%;/);
+    expect(ReactTestUtils
+      .scryRenderedDOMComponentsWithClass(rangeWithDefaultValue, 'rc-slider-handle')[1]
+      .style.cssText)
+      .to.match(/left: 50%;/);
+
+    const trackStyle = ReactTestUtils
+      .scryRenderedDOMComponentsWithClass(rangeWithDefaultValue, 'rc-slider-track')[0]
+      .style.cssText;
+    expect(trackStyle).to.match(/left: 0%;/);
+    expect(trackStyle).to.match(/width: 50%;/);
+    expect(trackStyle).to.match(/visibility: visible;/);
+  });
+
+  it('should render a Multi-Range with default value correctly', () => {
+    const multiRangeWithDefaultValue = ReactDOM.render(<Slider range={3} defaultValue={[0, 25, 50, 75]} />, div);
+    expect(multiRangeWithDefaultValue.state.bounds[0]).to.be(0);
+    expect(multiRangeWithDefaultValue.state.bounds[1]).to.be(25);
+    expect(multiRangeWithDefaultValue.state.bounds[2]).to.be(50);
+    expect(multiRangeWithDefaultValue.state.bounds[3]).to.be(75);
+    expect(ReactTestUtils
+      .scryRenderedDOMComponentsWithClass(multiRangeWithDefaultValue, 'rc-slider-handle')[0]
+      .style.cssText)
+      .to.match(/left: 0%;/);
+    expect(ReactTestUtils
+      .scryRenderedDOMComponentsWithClass(multiRangeWithDefaultValue, 'rc-slider-handle')[1]
+      .style.cssText)
+      .to.match(/left: 25%;/);
+    expect(ReactTestUtils
+      .scryRenderedDOMComponentsWithClass(multiRangeWithDefaultValue, 'rc-slider-handle')[2]
+      .style.cssText)
+      .to.match(/left: 50%;/);
+    expect(ReactTestUtils
+      .scryRenderedDOMComponentsWithClass(multiRangeWithDefaultValue, 'rc-slider-handle')[3]
+      .style.cssText)
+      .to.match(/left: 75%;/);
+
+    const track1Style = ReactTestUtils
+      .scryRenderedDOMComponentsWithClass(multiRangeWithDefaultValue, 'rc-slider-track-1')[0]
+      .style.cssText;
+    expect(track1Style).to.match(/left: 0%;/);
+    expect(track1Style).to.match(/width: 25%;/);
+    expect(track1Style).to.match(/visibility: visible;/);
+
+    const track2Style = ReactTestUtils
+      .scryRenderedDOMComponentsWithClass(multiRangeWithDefaultValue, 'rc-slider-track-2')[0]
+      .style.cssText;
+    expect(track2Style).to.match(/left: 25%;/);
+    expect(track2Style).to.match(/width: 25%;/);
+    expect(track2Style).to.match(/visibility: visible;/);
+
+    const track3Style = ReactTestUtils
+      .scryRenderedDOMComponentsWithClass(multiRangeWithDefaultValue, 'rc-slider-track-3')[0]
+      .style.cssText;
+    expect(track3Style).to.match(/left: 50%;/);
+    expect(track3Style).to.match(/width: 25%;/);
+    expect(track3Style).to.match(/visibility: visible;/);
+  });
+
+  it('should render a Range with value correctly', () => {
+    const rangeWithValue = ReactDOM.render(<Slider range value={[50, 100]} />, div);
+    expect(rangeWithValue.state.bounds[0]).to.be(50);
+    expect(rangeWithValue.state.bounds[1]).to.be(100);
+    expect(ReactTestUtils
+           .scryRenderedDOMComponentsWithClass(rangeWithValue, 'rc-slider-handle')[0]
+           .style.cssText)
+      .to.match(/left: 50%;/);
+    expect(ReactTestUtils
+           .scryRenderedDOMComponentsWithClass(rangeWithValue, 'rc-slider-handle')[1]
+           .style.cssText)
+      .to.match(/left: 100%;/);
+
+    const trackStyle = ReactTestUtils
+            .scryRenderedDOMComponentsWithClass(rangeWithValue, 'rc-slider-track')[0]
+            .style.cssText;
+    expect(trackStyle).to.match(/left: 50%;/);
+    expect(trackStyle).to.match(/width: 50%;/);
+    expect(trackStyle).to.match(/visibility: visible;/);
+  });
+
+  it('should render dots correctly when `dots=true`', () => {
+    const slider = ReactDOM.render(<Slider value={50} step={10} dots />, div);
+    expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-dot').length).to.be(11);
+    expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-dot-active').length).to.be(6);
+
+    const range = ReactDOM.render(<Slider range value={[20, 50]} step={10} dots />, div);
+    expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(range, 'rc-slider-dot').length).to.be(11);
+    expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(range, 'rc-slider-dot-active').length).to.be(4);
+  });
+
+  it('should render marks correctly when `marks` is not an empty object', () => {
+    const marks = { 0: '0', 30: '30', 100: '100' };
+
+    const slider = ReactDOM.render(<Slider value={30} marks={marks} />, div);
+    expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-mark-text').length).to.be(3);
+    expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-mark-text')[0].innerHTML).to.be('0');
+    expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-mark-text')[1].innerHTML).to.be('30');
+    expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-mark-text')[2].innerHTML).to.be('100');
+
+    const range = ReactDOM.render(<Slider range value={[0, 30]} marks={marks} />, div);
+    expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(range, 'rc-slider-mark-text').length).to.be(3);
+  });
+
+  it('should not set value greater than `max` or smaller `min`', () => {
+    const sliderWithMin = ReactDOM.render(<Slider value={0} min={10} />, div);
+    expect(sliderWithMin.state.bounds[1]).to.be(10);
+    ReactDOM.unmountComponentAtNode(div);
+
+    const sliderWithMax = ReactDOM.render(<Slider value={100} max={90} />, div);
+    expect(sliderWithMax.state.bounds[1]).to.be(90);
+    ReactDOM.unmountComponentAtNode(div);
+
+    const range = ReactDOM.render(<Slider range value={[0, 100]} min={10} max={90} />, div);
+    expect(range.state.bounds[0]).to.be(10);
+    expect(range.state.bounds[1]).to.be(90);
+    ReactDOM.unmountComponentAtNode(div);
+  });
+
+  it('should render a vertical slider, when `vertical` is true', () => {
+    const slider = ReactDOM.render(<Slider vertical />, div);
+    expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-vertical').length).to.be(1);
+  });
+
+  it('should not call onChange when value is the same', () => {
+    const values = [];
+    const handler = (e) => {
+      values.push(e);
+    };
+
+    ReactDOM.render(<Slider onChange={handler}/>, div);
+    const handle = div.querySelector('.rc-slider-handle');
+
+    const down = document.createEvent('MouseEvent');
+    down.initEvent('mousedown', true, true);
+
+    const move = document.createEvent('MouseEvent');
+    move.initEvent('mousemove', true, true);
+
+    const up = document.createEvent('MouseEvent');
+    up.initEvent('mouseup', true, true);
+
+    handle.dispatchEvent(down);
+    handle.dispatchEvent(move);
+    handle.dispatchEvent(up);
+
+    expect(values.length).to.be(0);
+  });
+
+  it('should set `dragOffset` to correct value when the left handle is clicked off-center', () => {
+    const slider = ReactDOM.render(<Slider />, div);
+    const leftHandle = ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-handle')[0];
+    slider.onMouseDown({
+      type: 'mousedown',
+      target: leftHandle,
+      pageX: 5, button: 0,
+      stopPropagation() {},
+      preventDefault() {},
+    });
+    expect(slider.dragOffset).to.be(5);
+  });
+
+  it('should respect `dragOffset` while dragging the handle via MouseEvents', () => {
+    const SliderWrapper = createSliderWrapperComponent();
+    const slider = ReactDOM.render(<SliderWrapper/>, div).refs.slider;
+    const leftHandle = ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-handle')[0];
+    slider.onMouseDown({
+      type: 'mousedown',
+      target: leftHandle,
+      pageX: 5, button: 0,
+      stopPropagation() {},
+      preventDefault() {},
+    });
+    expect(slider.dragOffset).to.be(5);
+    slider.onMouseMove({
+      type: 'mousemove',
+      target: leftHandle,
+      pageX: 14, button: 0,
+      stopPropagation() {},
+      preventDefault() {},
+    });
+    expect(slider.getValue()).to.be(9);
+  });
+
+  it('should set `dragOffset` to 0 when the MouseEvent target isn\'t a handle', () => {
+    const slider = ReactDOM.render(<Slider />, div);
+    const sliderTrack = ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-track')[0];
+    slider.onMouseDown({
+      type: 'mousedown',
+      target: sliderTrack,
+      pageX: 5, button: 0,
+      stopPropagation() {},
+      preventDefault() {},
+    });
+    expect(slider.dragOffset).to.be(0);
+  });
+
+  it('should set `dragOffset` to correct value when the left handle is touched off-center', () => {
+    const slider = ReactDOM.render(<Slider />, div);
+    const leftHandle = ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-handle')[0];
+    slider.onTouchStart({
+      type: 'touchstart',
+      target: leftHandle,
+      touches: [{ pageX: 5 }],
+      stopPropagation() {},
+      preventDefault() {},
+    });
+    expect(slider.dragOffset).to.be(5);
+  });
+
+  it('should respect `dragOffset` while dragging the handle via TouchEvents', () => {
+    const SliderWrapper = createSliderWrapperComponent();
+    const slider = ReactDOM.render(<SliderWrapper/>, div).refs.slider;
+    const leftHandle = ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-handle')[0];
+    slider.onTouchStart({
+      type: 'touchstart',
+      target: leftHandle,
+      touches: [{ pageX: 5 }],
+      stopPropagation() {},
+      preventDefault() {},
+    });
+    expect(slider.dragOffset).to.be(5);
+    slider.onTouchMove({
+      type: 'touchmove',
+      target: leftHandle,
+      touches: [{ pageX: 14 }],
+      stopPropagation() {},
+      preventDefault() {},
+    });
+    expect(slider.getValue()).to.be(9);
+  });
+
+  it('should set `dragOffset` to 0 when the TouchEvent target isn\'t a handle', () => {
+    const slider = ReactDOM.render(<Slider />, div);
+    const sliderTrack = ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-track')[0];
+    slider.onTouchStart({
+      type: 'touchstart',
+      target: sliderTrack,
+      touches: [{ pageX: 5 }],
+      stopPropagation() {},
+      preventDefault() {},
+    });
+    expect(slider.dragOffset).to.be(0);
+  });
+});