diff --git a/.editorconfig b/.editorconfig
deleted file mode 100644
index 604c94e..0000000
--- a/.editorconfig
+++ /dev/null
@@ -1,9 +0,0 @@
-# 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
diff --git a/.gitignore b/.gitignore
deleted file mode 100644
index f8d8a67..0000000
--- a/.gitignore
+++ /dev/null
@@ -1,28 +0,0 @@
-*.iml
-*.log
-.idea/
-.ipr
-.iws
-*~
-~*
-*.diff
-*.patch
-*.bak
-.DS_Store
-Thumbs.db
-.project
-.*proj
-.svn/
-*.swp
-*.swo
-*.pyc
-*.pyo
-.build
-node_modules
-_site
-sea-modules
-spm_modules
-.cache
-dist
-assets/**/*.css
-build/
\ No newline at end of file
diff --git a/.jscsrc b/.jscsrc
deleted file mode 100644
index 20b0f4d..0000000
--- a/.jscsrc
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-    "requireCurlyBraces": ["if", "else", "for", "while", "do", "try", "catch"],
-    "requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return", "try", "catch"],
-    "requireSpacesInFunctionExpression": {
-        "beforeOpeningCurlyBrace": true
-    },
-    "disallowSpacesInsideArrayBrackets": true,
-    "disallowSpacesInsideObjectBrackets": true,
-    "disallowSpacesInsideParentheses": true,
-    "disallowQuotedKeysInObjects": "allButReserved",
-    "disallowSpaceAfterObjectKeys": true,
-    "requireSpaceBeforeBinaryOperators": ["-", "/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<=" ],
-    "requireSpacesInConditionalExpression": {
-        "afterTest": true,
-        "beforeConsequent": true,
-        "afterConsequent": true,
-        "beforeAlternate": true
-    },
-    "requireSpaceAfterBinaryOperators": ["/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="],
-    "disallowKeywords": [ "with" ],
-    "disallowSpaceAfterPrefixUnaryOperators": [ "!" , "++", "--", "+", "-", "~"],
-    "disallowSpaceBeforePostfixUnaryOperators": ["++", "--", ","],
-    "disallowMultipleLineBreaks": true,
-    "disallowKeywordsOnNewLine": ["else"],
-    "safeContextKeyword": "self",
-    "excludeFiles": ["lib/**/parser.js"]
-}
\ No newline at end of file
diff --git a/.jshintrc b/.jshintrc
deleted file mode 100644
index ef5e85e..0000000
--- a/.jshintrc
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-    "camelcase": true,
-    "curly": true,
-    "eqeqeq": true,
-    "freeze": true,
-    "indent": 4,
-    "latedef": "nofunc",
-    "quotmark": "false",
-    "nonew": true,
-    "newcap": false,
-    "immed": true,
-    "noarg": true,
-    "eqnull": true,
-    "trailing": true,
-    "undef": true,
-    "unused": true,
-    "browser": true,
-    "node": true,
-    "esnext": true,
-    "globals": {
-        "describe": false,
-        "expect": false,
-        "beforeEach": false,
-        "afterEach": false,
-        "modulex": false,
-        "it": false
-    }
-}
\ No newline at end of file
diff --git a/.npmignore b/.npmignore
deleted file mode 100644
index e43e0f4..0000000
--- a/.npmignore
+++ /dev/null
@@ -1,29 +0,0 @@
-bower_components/
-build/
-*.cfg
-node_modules/
-nohup.out
-*.iml
-.idea/
-.ipr
-.iws
-*~
-~*
-*.diff
-*.log
-*.patch
-*.bak
-.DS_Store
-Thumbs.db
-.project
-.*proj
-.svn/
-*.swp
-out/
-.build
-node_modules
-_site
-sea-modules
-spm_modules
-.cache
-dist
\ No newline at end of file
diff --git a/.travis.yml b/.travis.yml
deleted file mode 100644
index 2fde59c..0000000
--- a/.travis.yml
+++ /dev/null
@@ -1,14 +0,0 @@
-language: node_js
-notifications:
-  email:
-  - yiminghe@gmail.com
-node_js:
-- 0.12
-before_script:
-- npm start &
-- npm install mocha-phantomjs -g
-- phantomjs --version
-script:
-- npm test
-- npm run-script browser-test
-- npm run-script browser-test-cover
\ No newline at end of file
diff --git a/build/examples/common.js b/build/examples/common.js
new file mode 100644
index 0000000..5acde6d
--- /dev/null
+++ b/build/examples/common.js
@@ -0,0 +1,94 @@
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// install a JSONP callback for chunk loading
+/******/ 	var parentJsonpFunction = window["webpackJsonp"];
+/******/ 	window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {
+/******/ 		// add "moreModules" to the modules object,
+/******/ 		// then flag all "chunkIds" as loaded and fire callback
+/******/ 		var moduleId, chunkId, i = 0, callbacks = [];
+/******/ 		for(;i < chunkIds.length; i++) {
+/******/ 			chunkId = chunkIds[i];
+/******/ 			if(installedChunks[chunkId])
+/******/ 				callbacks.push.apply(callbacks, installedChunks[chunkId]);
+/******/ 			installedChunks[chunkId] = 0;
+/******/ 		}
+/******/ 		for(moduleId in moreModules) {
+/******/ 			modules[moduleId] = moreModules[moduleId];
+/******/ 		}
+/******/ 		if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);
+/******/ 		while(callbacks.length)
+/******/ 			callbacks.shift().call(null, __webpack_require__);
+/******/ 		if(moreModules[0]) {
+/******/ 			installedModules[0] = 0;
+/******/ 			return __webpack_require__(0);
+/******/ 		}
+/******/ 	};
+
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// object to store loaded and loading chunks
+/******/ 	// "0" means "already loaded"
+/******/ 	// Array means "loading", array contains callbacks
+/******/ 	var installedChunks = {
+/******/ 		1:0
+/******/ 	};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+/******/ 	// This file contains only the entry chunk.
+/******/ 	// The chunk loading function for additional chunks
+/******/ 	__webpack_require__.e = function requireEnsure(chunkId, callback) {
+/******/ 		// "0" is the signal for "already loaded"
+/******/ 		if(installedChunks[chunkId] === 0)
+/******/ 			return callback.call(null, __webpack_require__);
+
+/******/ 		// an array means "currently loading".
+/******/ 		if(installedChunks[chunkId] !== undefined) {
+/******/ 			installedChunks[chunkId].push(callback);
+/******/ 		} else {
+/******/ 			// start chunk loading
+/******/ 			installedChunks[chunkId] = [callback];
+/******/ 			var head = document.getElementsByTagName('head')[0];
+/******/ 			var script = document.createElement('script');
+/******/ 			script.type = 'text/javascript';
+/******/ 			script.charset = 'utf-8';
+/******/ 			script.async = true;
+
+/******/ 			script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"simple"}[chunkId]||chunkId) + ".js";
+/******/ 			head.appendChild(script);
+/******/ 		}
+/******/ 	};
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/ })
+/************************************************************************/
+/******/ ([]);
\ No newline at end of file
diff --git a/build/examples/index.html b/build/examples/index.html
new file mode 100644
index 0000000..ffe23cd
--- /dev/null
+++ b/build/examples/index.html
@@ -0,0 +1 @@
+<style>li {margin:10px;}</style><h1 style="text-align: center;margin:20px;">rc-slider examples</h1><ul><li><a href="simple.html">simple.js</a></li></ul>
\ No newline at end of file
diff --git a/build/examples/simple.html b/build/examples/simple.html
new file mode 100644
index 0000000..1b32bf2
--- /dev/null
+++ b/build/examples/simple.html
@@ -0,0 +1,197 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        .hljs {
+            display: block;
+            overflow-x: auto;
+            padding: 0.5em;
+            color: #333;
+            background: #f8f8f8;
+            -webkit-text-size-adjust: none;
+        }
+
+        .hljs-comment,
+        .diff .hljs-header,
+        .hljs-javadoc {
+            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-phpdoc,
+        .hljs-dartdoc,
+        .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-rules .hljs-property,
+        .django .hljs-tag .hljs-keyword {
+            color: #000080;
+            font-weight: normal;
+        }
+
+        .hljs-attribute,
+        .hljs-variable,
+        .lisp .hljs-body {
+            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;
+        }
+        .highlight {
+            background-color: transparent;
+            padding-top: 1px;
+            position: relative;
+        }
+
+        .highlight pre {
+            font-family: Consolas, "Liberation Mono", Courier, monospace;
+            margin: 6px 0;
+            border: 1px solid #eee;
+            padding: 6px 10px;
+            overflow: auto;
+            border-radius: 2px;
+            background-color: #f8f8f9;
+            line-height: 19px;
+            font-size: 13px;
+            white-space: pre;
+        }
+
+        .highlight pre code {
+            color: #5D6A6A;
+            background-color: transparent;
+            margin: auto;
+            padding: 0;
+        }
+    </style>
+    <!--[if lt IE 9]>
+    <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>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.0/es5-shim.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.0/es5-sham.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
+    <![endif]-->
+    <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>
+</head>
+<body>
+<div id="__react-content"></div>
+<script src="common.js?nowrap"></script>
+<script src="simple.js?nowrap"></script>
+<div class="highlight">
+<pre>
+/** @jsx React.DOM */
+// use jsx to render html, <span class="hljs-keyword">do</span> <span class="hljs-keyword">not</span> modify simple.html
+<span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider/assets/index.css'</span>);
+var Slider = <span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider'</span>);
+var React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
+// React.render(&lt;Sliders marks={[<span class="hljs-string">"一"</span>,<span class="hljs-string">"二"</span>,<span class="hljs-string">"三"</span>,<span class="hljs-string">"四"</span>,<span class="hljs-string">"五"</span>]} index={<span class="hljs-number">3</span>}/&gt;, document.getElementById(<span class="hljs-string">'__react-content'</span>));
+// React.render(&lt;Slider className=<span class="hljs-string">'rc-slider'</span> step={<span class="hljs-number">20</span>}/&gt;, document.getElementById(<span class="hljs-string">'__react-content'</span>));
+React.render(&lt;Slider /&gt;, document.getElementById(<span class="hljs-string">'__react-content'</span>));
+
+</pre>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/build/examples/simple.js b/build/examples/simple.js
new file mode 100644
index 0000000..7449088
--- /dev/null
+++ b/build/examples/simple.js
@@ -0,0 +1,740 @@
+webpackJsonp([0,1],[
+/* 0 */
+/***/ function(module, exports, __webpack_require__) {
+
+	module.exports = __webpack_require__(1);
+
+
+/***/ },
+/* 1 */
+/***/ function(module, exports, __webpack_require__) {
+
+	/** @jsx React.DOM */
+	// use jsx to render html, do not modify simple.html
+	__webpack_require__(4);
+	var Slider = __webpack_require__(3);
+	var React = __webpack_require__(2);
+	// React.render(<Sliders marks={["一","二","三","四","五"]} index={3}/>, document.getElementById('__react-content'));
+	// React.render(<Slider className='rc-slider' step={20}/>, document.getElementById('__react-content'));
+	React.render(React.createElement(Slider, null), document.getElementById('__react-content'));
+
+
+/***/ },
+/* 2 */
+/***/ function(module, exports, __webpack_require__) {
+
+	module.exports = React;
+
+/***/ },
+/* 3 */
+/***/ function(module, exports, __webpack_require__) {
+
+	module.exports = __webpack_require__(6);
+
+
+/***/ },
+/* 4 */
+/***/ function(module, exports, __webpack_require__) {
+
+	// style-loader: Adds some css to the DOM by adding a <style> tag
+
+	// load the styles
+	var content = __webpack_require__(5);
+	if(typeof content === 'string') content = [[module.id, content, '']];
+	// add the styles to the DOM
+	var update = __webpack_require__(7)(content, {});
+	// Hot Module Replacement
+	if(false) {
+		// When the styles change, update the <style> tags
+		module.hot.accept("!!/Users/yiminghe/code/react-components/slider/node_modules/css-loader/index.js!/Users/yiminghe/code/react-components/slider/assets/index.css", function() {
+			var newContent = require("!!/Users/yiminghe/code/react-components/slider/node_modules/css-loader/index.js!/Users/yiminghe/code/react-components/slider/assets/index.css");
+			if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
+			update(newContent);
+		});
+		// When the module is disposed, remove the <style> tags
+		module.hot.dispose(function() { update(); });
+	}
+
+/***/ },
+/* 5 */
+/***/ function(module, exports, __webpack_require__) {
+
+	exports = module.exports = __webpack_require__(8)();
+	exports.push([module.id, ".rc-slider {\n  position: relative;\n  height: 4px;\n  width: 100%;\n  border-radius: 2px;\n  background-color: #e9e9e9;\n}\n.rc-slider-track {\n  position: absolute;\n  left: 0;\n  height: 4px;\n  border-radius: 2px;\n  background-color: #b2e9fd;\n  z-index: 1;\n}\n.rc-slider-handle {\n  position: absolute;\n  margin-left: -7px;\n  margin-top: -5px;\n  width: 10px;\n  height: 10px;\n  cursor: default;\n  border-radius: 50%;\n  border: solid 2px #d9d9d9;\n  background-color: #fff;\n  z-index: 2;\n}\n.rc-slider-handle:hover {\n  border-color: #999;\n}\n.rc-slider-handle-active {\n  border-color: #8cddfc;\n}\n.rc-slider-handle-active:active {\n  border-color: #2db7f5;\n  background-color: #2db7f5;\n  box-shadow: 0 0 0 5px rgba(45, 183, 245, 0.3);\n}\n.rc-slider-handle-active:hover {\n  border-color: #23c0fa;\n}\n.rc-slider-mark {\n  position: absolute;\n  top: 10px;\n  left: 0px;\n  width: 100%;\n  height: 20px;\n  font-size: 12px;\n  z-index: 3;\n}\n.rc-slider-mark-text {\n  position: absolute;\n  display: inline-block;\n  line-height: 1.5;\n  height: 20px;\n  vertical-align: middle;\n  text-align: center;\n  cursor: pointer;\n  color: #ccc;\n}\n.rc-slider-mark-text:first-child {\n  text-align: left;\n}\n.rc-slider-mark-text-active {\n  color: #999;\n}\n.rc-slider-step {\n  position: absolute;\n  width: 100%;\n  height: 4px;\n  background: transparent;\n  z-index: 1;\n}\n.rc-slider-dot {\n  position: absolute;\n  top: -2px;\n  margin-left: -4px;\n  width: 4px;\n  height: 4px;\n  border: 2px solid #fff;\n  background-color: #bcbcbc;\n  cursor: pointer;\n  border-radius: 50%;\n  vertical-align: middle;\n}\n.rc-slider-dot:first-child {\n  margin-left: -2px;\n}\n.rc-slider-dot:last-child {\n  margin-left: -6px;\n}\n.rc-slider-dot-active {\n  background-color: #8cddfc;\n}\n.rc-slider-disabled {\n  background-color: #e7eaec;\n}\n.rc-slider-disabled .rc-slider-track {\n  background-color: #e7eaec;\n}\n.rc-slider-disabled .rc-slider-handle {\n  border-color: #e7eaec;\n  background-color: #fff;\n  cursor: not-allowed;\n}\n.rc-slider-disabled .rc-slider-mark-text,\n.rc-slider-disabled .dot {\n  cursor: not-allowed !important;\n}\n", ""]);
+
+/***/ },
+/* 6 */
+/***/ function(module, exports, __webpack_require__) {
+
+	/** @jsx React.DOM */
+	var React = __webpack_require__(2);
+	var EventListener = __webpack_require__(9);
+
+	function pauseEvent(e) {
+	  if (e.stopPropagation) {
+	    e.stopPropagation();
+	  } 
+	  if (e.preventDefault) {
+	    e.preventDefault();
+	  }
+	  e.cancelBubble = true;
+	  e.returnValue = false;
+	  return false;
+	}
+
+	function prefixClsFn(prefixCls) {
+	  var args = Array.prototype.slice.call(arguments, 1);
+	  return args.map(function(s) {
+	    return prefixCls + '-' + s;
+	  }).join(' ');
+	}
+
+	var Slider = React.createClass({displayName: "Slider",
+	  propTypes: {
+	    min: React.PropTypes.number,
+	    max: React.PropTypes.number,
+	    step: React.PropTypes.number,
+	    value: React.PropTypes.number,
+	    index: React.PropTypes.number,
+	    marks: React.PropTypes.array,
+	    className: React.PropTypes.string,
+	    disabled: React.PropTypes.bool,
+	    onBeforeChange: React.PropTypes.func,
+	    onChange: React.PropTypes.func,
+	    onAfterChange: React.PropTypes.func
+	  },
+
+	  getDefaultProps: function() {
+	    return {
+	      min: 0,
+	      max: 100,
+	      step: 1,
+	      value: 0,
+	      marks: [],
+	      className: 'rc-slider',
+	      disabled: false,
+	      index: 0
+	    };
+	  },
+
+	  getInitialState: function() {
+	    var props = this.props;
+	    var value = this._trimAlignValue(props.value);
+	    var marksLen = props.marks.length;
+	    if (marksLen > 0) {
+	      value = ((props.max - props.min) / (marksLen - 1)) * (props.index);
+	      value = value.toFixed(5);
+	    }
+
+	    return {
+	      upperBound: 0,
+	      sliderLength: 0,
+	      value: value,
+	      active: props.disabled ? '' : ((value > props.min || props.index > 0) ? 'active' : '')
+	    };
+	  },
+
+	  componentWillReceiveProps: function(newProps) {
+	    var value = newProps.value;
+	    this.state.value = this._trimAlignValue(value, newProps);
+	  },
+
+	  componentDidMount: function() {
+	    this._onHandleResizeListener = EventListener.listen(window, 'resize', this.handleResize);
+	    this.handleResize();
+	  },
+
+	  componentWillUnmount: function() {
+	    if (this._onHandleResizeListener) {
+	      this._onHandleResizeListener.remove();
+	    }
+	  },
+
+	  getValue: function() {
+	    return this.state.value;
+	  },
+
+	  getIndex: function() {
+	    var props = this.props;
+	    if (props.marks.length === 0) { 
+	      return;
+	    }
+	    var value = this.state.value;
+	    var unit = (props.max - props.min) / (props.marks.length - 1);
+	    return Math.floor(value / unit);
+	  },
+
+	  _trimAlignValue: function(val, props) {
+	    props = props || this.props;
+
+	    var step = props.marks.length > 0 ? (props.max - props.min) / (props.marks.length - 1) : props.step;
+
+	    if (val <= props.min) {
+	      val = props.min;
+	    }
+	    if (val >= props.max) {
+	      val = props.max;
+	    }
+
+	    var valModStep = (val - props.min) % step;
+	    var alignValue = val - valModStep;
+
+	    if (Math.abs(valModStep) * 2 >= step) {
+	      alignValue += (valModStep > 0) ? step : (-step);
+	    }
+
+	    return parseFloat(alignValue.toFixed(5));
+	  },
+
+	  _calcOffset: function(value) {
+	    var ratio = (value - this.props.min) / (this.props.max - this.props.min);
+	    return ratio * this.state.upperBound;
+	  },
+
+	  _calcValue: function(offset) {
+	    var ratio = offset / this.state.upperBound;
+	    return ratio * (this.props.max - this.props.min) + this.props.min;
+	  },
+
+	  _calValueByPos: function (position, callback) {
+	    var pixelOffset = position - this.state.sliderStart;
+	    // pixelOffset -= (this.state.handleSize / 2);
+
+	    var nextValue = this._trimAlignValue(this._calcValue(pixelOffset));
+
+	    this.setState({value: nextValue, active: 'active'}, callback);
+	  },
+
+	  _getMousePosition: function(e) {
+	    return e.pageX || (e.clientX + document.documentElement.scrollLeft);
+	  },
+
+	  _triggerEvents: function(event) {
+	    var props = this.props;
+	    var hasMarks = props.marks && props.marks.length > 0;
+	    if (props[event]) {
+	      props[event](hasMarks ? this.getIndex() : this.state.value);
+	    }
+	  },
+
+	  _addEventHandles: function() {
+	    this._onMouseMoveListener = EventListener.listen(document, 'mousemove', this._onMouseMove);
+	    this._onMouseUpListener = EventListener.listen(document, 'mouseup', this._onMouseUp);
+	  },
+
+	  _removeEventHandles: function () {
+	    if (this._onMouseMoveListener) {
+	      this._onMouseMoveListener.remove();
+	    }
+
+	    if (this._onMouseUpListener) {
+	      this._onMouseUpListener.remove();
+	    }
+	  },
+
+	  _start: function(position) {
+	    if (document.activeElement) {
+	      document.activeElement.blur();
+	    }
+
+	    this._triggerEvents('onBeforeChange');
+
+	    this.setState({
+	      startValue: this.state.value,
+	      startPosition: position
+	    });
+	  },
+
+	  _end: function() {
+	    this._removeEventHandles();
+	    this.setState(this._triggerEvents.bind(this, 'onAfterChange'));
+	  },
+
+	  _onMouseUp: function() {
+	    this._end();
+	  },
+
+	  _onMouseMove: function(e) {
+	    pauseEvent(e);
+	    var position = this._getMousePosition(e);
+	    var props = this.props;
+	    var state = this.state;
+
+	    var value = state.value;
+	    var oldValue = value;
+
+	    var diffPosition = position - state.startPosition;
+
+	    var diffValue = diffPosition / (state.sliderLength) * (props.max - props.min);
+	    var newValue = this._trimAlignValue(state.startValue + diffValue);
+
+	    value = newValue;
+
+	    if (newValue !== oldValue) {
+	      this.setState({value: value, active: 'active'} ,this._triggerEvents.bind(this, 'onChange'));
+	    }
+	  },
+
+	  handleResize: function() {
+	    var slider = this.refs.slider.getDOMNode();
+	    var rect = slider.getBoundingClientRect();
+
+	    var sliderMin = rect.left;
+	    var sliderMax = rect.right;
+	    
+	    this.setState({
+	      upperBound: slider.clientWidth,
+	      sliderLength: Math.abs(sliderMax - sliderMin),
+	      sliderStart: sliderMin
+	    });
+	  },
+
+	  handleMouseDown: function() {
+	    return function(e)  {
+	      if (this.props.disabled) {
+	        return;
+	      }
+	      var position = this._getMousePosition(e);
+	      this._start(position);
+	      this._addEventHandles();
+	      pauseEvent(e);
+	    }.bind(this);
+	  },
+
+	  handleSliderMouseDown: function(e) {
+	    if (this.props.disabled) {
+	      return;
+	    }
+	    var position = this._getMousePosition(e);
+	    this._calValueByPos(position, 
+	      function()  {
+	        this._triggerEvents('onChange');
+	        this._start(position);
+	        this._addEventHandles();
+	      }.bind(this)
+	    );
+	    pauseEvent(e);
+	  },
+
+	  renderSteps: function() {
+	    var props = this.props;
+	    var marksLen = props.marks.length;
+	    var stepNum = marksLen > 0 ? marksLen : Math.floor((props.max - props.min) / props.step) + 1;
+	    var unit = this.state.sliderLength / (stepNum - 1);
+
+	    var prefixCls = props.className;
+	    var stepClassName = prefixClsFn(prefixCls, 'step');
+
+	    var elements = [];
+	    for (var i = 0; i < stepNum; i++) {
+	      var offset = unit * i;
+	      var style = {
+	        left: offset.toFixed(5)
+	      };
+	      var className = prefixClsFn(prefixCls, 'dot');
+	      if (i <= this.getIndex() || (this._calcValue(offset) <= this.getValue())) {
+	        className = prefixClsFn(prefixCls, 'dot', 'dot-active');
+	      }
+	      elements[i] = (
+	        React.createElement("span", {className: className, style: style, ref: 'step'+i})
+	      );
+	    }
+
+	    return (
+	      React.createElement("div", {className: stepClassName}, 
+	        elements
+	      )
+	    );
+	  },
+
+	  renderMark: function(i) {
+	    var marks = this.props.marks;
+	    var marksLen = marks.length;
+	    var unit = this.state.sliderLength / (marksLen - 1);
+	    var offset = unit * i;
+
+	    var style = {
+	      width: (unit / 2).toFixed(5)
+	    };
+
+	    if (i === (marksLen - 1)) {
+	      style.right = '0';
+	      style.width = 'auto';
+	    }else {
+	      style.left = (i > 0 ? (offset - (unit / 4)).toFixed(5) : offset);
+	    }
+
+	    var prefixCls = this.props.className;
+	    var className = prefixClsFn(prefixCls, 'mark-text');
+
+	    if (i <= this.getIndex()) {
+	      className = prefixClsFn(prefixCls, 'mark-text', 'mark-text-active');
+	    }
+
+	    return (
+	      React.createElement("span", {className: className, style: style}, this.props.marks[i])
+	    );
+	  },
+
+	  renderMarks: function() {
+	    var marks = this.props.marks;
+	    var marksLen = marks.length;
+	    var elements = [];
+	    for (var i = 0; i < marksLen; i++) {
+	      elements[i] = this.renderMark(i);
+	    }
+
+	    var prefixCls = this.props.className;
+	    var className = prefixClsFn(prefixCls, 'mark');
+
+	    return (
+	      React.createElement("div", {className: className, onMouseDown: this.handleSliderMouseDown}, 
+	        elements
+	      )
+	    );
+	  },
+
+	  renderHandle: function(offset) {
+	    var handleStyle = {
+	      left: offset
+	    };
+
+	    var prefixCls = this.props.className;
+	    var className = prefixClsFn(prefixCls, 'handle');
+
+	    if (this.state.active) {
+	      className =  prefixClsFn(prefixCls, 'handle', 'handle-active');
+	    }
+
+	    return (
+	      React.createElement("a", {className: className, 
+	        ref: "handle", 
+	        style: handleStyle, 
+	        href: "#", 
+	        onMouseDown: this.handleMouseDown})
+	    );
+	  },
+
+	  renderTrack: function(offset) {
+	    var style = {
+	      width: offset
+	    };
+
+	    var prefixCls = this.props.className;
+	    var trackClassName = prefixClsFn(prefixCls, 'track');
+
+	    return (
+	      React.createElement("div", {className: trackClassName, ref: "track", style: style})
+	    );
+	  },
+
+	  render: function() {
+	    var state = this.state;
+	    var props = this.props;
+
+	    var value = state.value;
+	    var offset = this._calcOffset(value);
+
+	    var track = this.renderTrack(offset);
+	    var handles = this.renderHandle(offset);
+	    var steps = (props.step > 1 || props.marks.length > 0) ? this.renderSteps() : null;
+	    var sliderMarks = (props.marks.length > 0) ? this.renderMarks() : null;
+
+	    var prefixCls = props.className;
+	    var sliderClassName = props.disabled ? prefixClsFn(prefixCls, 'disabled') : prefixCls;
+
+	    return (
+	      React.createElement("div", {className: sliderClassName, ref: "slider", onMouseDown: this.handleSliderMouseDown}, 
+	        track, 
+	        handles, 
+	        steps, 
+	        sliderMarks
+	      )
+	    );
+	  }
+	});
+
+	module.exports = Slider;
+
+
+/***/ },
+/* 7 */
+/***/ function(module, exports, __webpack_require__) {
+
+	/*
+		MIT License http://www.opensource.org/licenses/mit-license.php
+		Author Tobias Koppers @sokra
+	*/
+	var stylesInDom = {},
+		memoize = function(fn) {
+			var memo;
+			return function () {
+				if (typeof memo === "undefined") memo = fn.apply(this, arguments);
+				return memo;
+			};
+		},
+		isIE9 = memoize(function() {
+			return /msie 9\b/.test(window.navigator.userAgent.toLowerCase());
+		}),
+		getHeadElement = memoize(function () {
+			return document.head || document.getElementsByTagName("head")[0];
+		}),
+		singletonElement = null,
+		singletonCounter = 0;
+
+	module.exports = function(list, options) {
+		if(false) {
+			if(typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment");
+		}
+
+		options = options || {};
+		// Force single-tag solution on IE9, which has a hard limit on the # of <style>
+		// tags it will allow on a page
+		if (typeof options.singleton === "undefined") options.singleton = isIE9();
+
+		var styles = listToStyles(list);
+		addStylesToDom(styles, options);
+
+		return function update(newList) {
+			var mayRemove = [];
+			for(var i = 0; i < styles.length; i++) {
+				var item = styles[i];
+				var domStyle = stylesInDom[item.id];
+				domStyle.refs--;
+				mayRemove.push(domStyle);
+			}
+			if(newList) {
+				var newStyles = listToStyles(newList);
+				addStylesToDom(newStyles, options);
+			}
+			for(var i = 0; i < mayRemove.length; i++) {
+				var domStyle = mayRemove[i];
+				if(domStyle.refs === 0) {
+					for(var j = 0; j < domStyle.parts.length; j++)
+						domStyle.parts[j]();
+					delete stylesInDom[domStyle.id];
+				}
+			}
+		};
+	}
+
+	function addStylesToDom(styles, options) {
+		for(var i = 0; i < styles.length; i++) {
+			var item = styles[i];
+			var domStyle = stylesInDom[item.id];
+			if(domStyle) {
+				domStyle.refs++;
+				for(var j = 0; j < domStyle.parts.length; j++) {
+					domStyle.parts[j](item.parts[j]);
+				}
+				for(; j < item.parts.length; j++) {
+					domStyle.parts.push(addStyle(item.parts[j], options));
+				}
+			} else {
+				var parts = [];
+				for(var j = 0; j < item.parts.length; j++) {
+					parts.push(addStyle(item.parts[j], options));
+				}
+				stylesInDom[item.id] = {id: item.id, refs: 1, parts: parts};
+			}
+		}
+	}
+
+	function listToStyles(list) {
+		var styles = [];
+		var newStyles = {};
+		for(var i = 0; i < list.length; i++) {
+			var item = list[i];
+			var id = item[0];
+			var css = item[1];
+			var media = item[2];
+			var sourceMap = item[3];
+			var part = {css: css, media: media, sourceMap: sourceMap};
+			if(!newStyles[id])
+				styles.push(newStyles[id] = {id: id, parts: [part]});
+			else
+				newStyles[id].parts.push(part);
+		}
+		return styles;
+	}
+
+	function createStyleElement() {
+		var styleElement = document.createElement("style");
+		var head = getHeadElement();
+		styleElement.type = "text/css";
+		head.appendChild(styleElement);
+		return styleElement;
+	}
+
+	function addStyle(obj, options) {
+		var styleElement, update, remove;
+
+		if (options.singleton) {
+			var styleIndex = singletonCounter++;
+			styleElement = singletonElement || (singletonElement = createStyleElement());
+			update = applyToSingletonTag.bind(null, styleElement, styleIndex, false);
+			remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true);
+		} else {
+			styleElement = createStyleElement();
+			update = applyToTag.bind(null, styleElement);
+			remove = function () {
+				styleElement.parentNode.removeChild(styleElement);
+			};
+		}
+
+		update(obj);
+
+		return function updateStyle(newObj) {
+			if(newObj) {
+				if(newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap)
+					return;
+				update(obj = newObj);
+			} else {
+				remove();
+			}
+		};
+	}
+
+	function replaceText(source, id, replacement) {
+		var boundaries = ["/** >>" + id + " **/", "/** " + id + "<< **/"];
+		var start = source.lastIndexOf(boundaries[0]);
+		var wrappedReplacement = replacement
+			? (boundaries[0] + replacement + boundaries[1])
+			: "";
+		if (source.lastIndexOf(boundaries[0]) >= 0) {
+			var end = source.lastIndexOf(boundaries[1]) + boundaries[1].length;
+			return source.slice(0, start) + wrappedReplacement + source.slice(end);
+		} else {
+			return source + wrappedReplacement;
+		}
+	}
+
+	function applyToSingletonTag(styleElement, index, remove, obj) {
+		var css = remove ? "" : obj.css;
+
+		if(styleElement.styleSheet) {
+			styleElement.styleSheet.cssText = replaceText(styleElement.styleSheet.cssText, index, css);
+		} else {
+			var cssNode = document.createTextNode(css);
+			var childNodes = styleElement.childNodes;
+			if (childNodes[index]) styleElement.removeChild(childNodes[index]);
+			if (childNodes.length) {
+				styleElement.insertBefore(cssNode, childNodes[index]);
+			} else {
+				styleElement.appendChild(cssNode);
+			}
+		}
+	}
+
+	function applyToTag(styleElement, obj) {
+		var css = obj.css;
+		var media = obj.media;
+		var sourceMap = obj.sourceMap;
+
+		if(sourceMap && typeof btoa === "function") {
+			try {
+				css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(JSON.stringify(sourceMap)) + " */";
+				css = "@import url(\"data:text/css;base64," + btoa(css) + "\")";
+			} catch(e) {}
+		}
+
+		if(media) {
+			styleElement.setAttribute("media", media)
+		}
+
+		if(styleElement.styleSheet) {
+			styleElement.styleSheet.cssText = css;
+		} else {
+			while(styleElement.firstChild) {
+				styleElement.removeChild(styleElement.firstChild);
+			}
+			styleElement.appendChild(document.createTextNode(css));
+		}
+	}
+
+
+/***/ },
+/* 8 */
+/***/ function(module, exports, __webpack_require__) {
+
+	module.exports = function() {
+		var list = [];
+		list.toString = function toString() {
+			var result = [];
+			for(var i = 0; i < this.length; i++) {
+				var item = this[i];
+				if(item[2]) {
+					result.push("@media " + item[2] + "{" + item[1] + "}");
+				} else {
+					result.push(item[1]);
+				}
+			}
+			return result.join("");
+		};
+		return list;
+	}
+
+/***/ },
+/* 9 */
+/***/ function(module, exports, __webpack_require__) {
+
+	/**
+	 * Copyright 2013-2014 Facebook, Inc.
+	 *
+	 * This file contains a modified version of:
+	 * https://github.com/facebook/react/blob/v0.12.0/src/vendor/stubs/EventListener.js
+	 *
+	 * Licensed under the Apache License, Version 2.0 (the "License");
+	 * you may not use this file except in compliance with the License.
+	 * You may obtain a copy of the License at
+	 *
+	 * http://www.apache.org/licenses/LICENSE-2.0
+	 *
+	 * Unless required by applicable law or agreed to in writing, software
+	 * distributed under the License is distributed on an "AS IS" BASIS,
+	 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+	 * See the License for the specific language governing permissions and
+	 * limitations under the License.
+	 *
+	 * TODO: remove in favour of solution provided by:
+	 *  https://github.com/facebook/react/issues/285
+	 */
+
+	/**
+	 * Does not take into account specific nature of platform.
+	 */
+	'use strict';
+
+	var EventListener = {
+	  /**
+	   * Listen to DOM events during the bubble phase.
+	   *
+	   * @param {DOMEventTarget} target DOM element to register listener on.
+	   * @param {string} eventType Event type, e.g. 'click' or 'mouseover'.
+	   * @param {function} callback Callback function.
+	   * @return {object} Object with a `remove` method.
+	   */
+	  listen: function listen(target, eventType, callback) {
+	    if (target.addEventListener) {
+	      target.addEventListener(eventType, callback, false);
+	      return {
+	        remove: function remove() {
+	          target.removeEventListener(eventType, callback, false);
+	        }
+	      };
+	    } else if (target.attachEvent) {
+	      target.attachEvent('on' + eventType, callback);
+	      return {
+	        remove: function remove() {
+	          target.detachEvent('on' + eventType, callback);
+	        }
+	      };
+	    }
+	  }
+	};
+
+	module.exports = EventListener;
+
+
+/***/ }
+]);
\ No newline at end of file