add slider into antd

index.js

@@ -17,7 +17,8 @@ var antd = {
   InputNumber: require('./components/input-number'),
   Switch: require('./components/switch'),
   Collapse: require('./components/Collapse'),
-  message: require('./components/message')
+  message: require('./components/message'),
+  Slider: require('./components/slider')
 };
 
 module.exports = antd;

package.json

@@ -24,6 +24,7 @@
     "rc-menu": "~3.4.0",
     "rc-progress": "~1.0.0",
     "rc-select": "~4.2.1",
+    "rc-slider": "~1.2.4",
     "rc-steps": "~1.1.3",
     "rc-switch": "~1.2.0",
     "rc-tabs": "~5.2.0",

style/components/index.less

@@ -15,6 +15,6 @@
 @import "steps";
 @import "breadcrumb";
 @import "inputNumber";
-@import "typography";
 @import "collapse";
 @import "message";
+@import "slider";

style/components/slider.less

@@ -0,0 +1,114 @@
+@sliderClass: ~"@{css-prefix}slider";
+
+// color
+@disabledColor: #ccc;
+
+.@{sliderClass} {
+  position: relative;
+  height: 4px;
+  width: 100%;
+  border-radius: @border-radius-base;
+  background-color: #e9e9e9;
+
+  &-track {
+    position: absolute;
+    left: 0;
+    height: 4px;
+    border-radius: @border-radius-base;
+    background-color: tint(@primary-color, 60%);
+    z-index: 1;
+  }
+
+  &-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;
+    z-index: 2;
+
+    &: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: 8px;
+    left: 0px;
+    width: 100%;
+    font-size: 12px;
+    z-index: 3;
+  }
+
+  &-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;
+    z-index: 1;
+  }
+
+  &-dot {
+    position: absolute;
+    top: -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: @disabledColor;
+
+    .@{sliderClass}-track {
+      background-color: @disabledColor;
+    }
+
+    .@{sliderClass}-handle {
+      border-color: @disabledColor;
+      background-color: #fff;
+      cursor: not-allowed;
+    }
+
+    .@{sliderClass}-mark-text, .dot {
+      cursor: not-allowed!important;
+    }
+  }
+}