[improvement] Slider: add less vars (youzan#3125)

Author: chenjiahan

packages/slider/index.less

@@ -3,20 +3,20 @@
 .van-slider {
   position: relative;
   border-radius: 999px;
-  background-color: @gray-light;
+  background-color: @slider-inactive-background-color;
 
   &__bar {
     position: relative;
     border-radius: inherit;
-    background-color: @blue;
+    background-color: @slider-active-background-color;
   }
 
   &__button {
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    background-color: @white;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
+    width: @slider-button-width;
+    height: @slider-button-height;
+    box-shadow: @slider-button-box-shadow;
+    border-radius: @slider-button-border-radius;
+    background-color: @slider-button-background-color;
 
     &-wrapper {
       position: absolute;
@@ -37,7 +37,7 @@
   }
 
   &--disabled {
-    opacity: .3;
+    opacity: @slider-disabled-opacity;
   }
 
   &--vertical {

packages/style/var.less

@@ -186,6 +186,16 @@
 @radio-disabled-label-color: @gray;
 @radio-disabled-background-color: @border-color;
 
+// Slider
+@slider-active-background-color: @blue;
+@slider-inactive-background-color: @gray-light;
+@slider-disabled-opacity: .3;
+@slider-button-width: 20px;
+@slider-button-height: 20px;
+@slider-button-border-radius: 50%;
+@slider-button-background-color: @white;
+@slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
+
 // Swipe
 @swipe-indicator: 6px;