update slider style

assets/index.less

@@ -1,26 +1,32 @@
 @prefixClass: rc-slider;
 
-// color
-@disabledColor: #e7eaec;
+@disabledColor: #ccc;
+@border-radius-base: 6px;
+@primary-color: #2db7f5;
 
 * {
-  -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
+}
+
+*:before,
+*:after {
+  box-sizing: border-box;
 }
 
 .@{prefixClass} {
   position: relative;
-  margin: 6px auto;
   height: 4px;
   width: 100%;
-  border-radius: 2px;
+  border-radius: @border-radius-base;
   background-color: #e9e9e9;
 
   &-track {
     position: absolute;
     left: 0;
     height: 4px;
-    border-radius: 2px;
-    background-color: #b2e9fd;
+    border-radius: @border-radius-base;
+    background-color: tint(@primary-color, 60%);
     z-index: 1;
   }
 
@@ -28,26 +34,21 @@
     position: absolute;
     margin-left: -7px;
     margin-top: -5px;
-    width: 10px;
-    height: 10px;
+    width: 14px;
+    height: 14px;
     cursor: pointer;
     border-radius: 50%;
-    border: solid 2px #d9d9d9;
+    border: solid 2px tint(@primary-color, 50%);
     background-color: #fff;
     z-index: 2;
 
     &:hover {
-      border-color: #999;
+      border-color: tint(@primary-color, 20%);
     }
     &-active {
-      border-color: #8cddfc;
       &:active {
-        border-color: #2db7f5;
-        background-color: #2db7f5;
-        box-shadow: 0 0 3px rgba(45, 183, 245, .75);
-      }
-      &:hover {
-        border-color: #23c0fa;
+        border-color: tint(@primary-color, 20%);
+        box-shadow: 0 0 5px tint(@primary-color, 20%);
       }
     }
   }
@@ -55,9 +56,8 @@
   &-mark {
     position: absolute;
     top: 10px;
-    left: 0px;
+    left: 0;
     width: 100%;
-    height: 20px;
     font-size: 12px;
     z-index: 3;
   }
@@ -65,17 +65,13 @@
   &-mark-text {
     position: absolute;
     display: inline-block;
-    line-height: 1.5;
-    height: 20px;
     vertical-align: middle;
     text-align: center;
     cursor: pointer;
-    color: #ccc;
-    &:first-child {
-      text-align: left;
-    }
+    color: #999;
+
     &-active {
-      color: #999;
+      color: #666;
     }
   }
 
@@ -91,21 +87,21 @@
     position: absolute;
     top: -2px;
     margin-left: -4px;
-    width: 4px;
-    height: 4px;
-    border: 2px solid #fff;
-    background-color: #bcbcbc;
+    width: 8px;
+    height: 8px;
+    border: 2px solid #e9e9e9;
+    background-color: #fff;
     cursor: pointer;
     border-radius: 50%;
     vertical-align: middle;
     &:first-child {
-      margin-left: -2px;
+      margin-left: -4px;
     }
     &:last-child {
-      margin-left: -6px;
+      margin-left: -4px;
     }
     &-active {
-      background-color: #8cddfc;
+      border-color: tint(@primary-color, 50%);
     }
   }