Slider can show stop dot

Slider can show stop dot

src/components/slider/slider.vue

@@ -163,7 +163,22 @@
                 return style;
             },
             stops() {
-                return this.max / this.step;
+//                let stopCount = (this.max - this.value) / this.step;
+//                let result = [];
+//                let currentLeft = parseFloat(this.singlePosition);
+//                let stepWidth = 100 * this.step / (this.max - this.min);
+//                for (let i = 1; i < stopCount; i++) {
+//                    result.push(currentLeft + i * stepWidth);
+//                }
+//                return result;
+
+                let stopCount = (this.max - this.min) / this.step;
+                let result = [];
+                let stepWidth = 100 * this.step / (this.max - this.min);
+                for (let i = 1; i < stopCount; i++) {
+                    result.push(i * stepWidth);
+                }
+                return result;
             },
             sliderWidth () {
                 return parseInt(getStyle(this.$els.slider, 'width'), 10);

src/styles/components/slider.less

@@ -57,6 +57,14 @@
         border-radius: @btn-border-radius-small;
         position: absolute;
     }
+
+    &-stop{
+        position: absolute;
+        .square(@slider-height);
+        border-radius: 50%;
+        background-color: @slider-disabled-color;
+        .transform(translateX(-50%));
+    }
 }
 
 .@{slider-prefix-cls}-disabled{

src/styles/themes/default/custom.less

@@ -123,7 +123,7 @@
 @ease-in-out            : ease-in-out;
 
 // Slider
-@slider-color              : fade(@primary-color, 80%);
+@slider-color              : tint(@primary-color, 20%);
 @slider-height             : 4px;
 @slider-margin             : 16px 0;
 @slider-button-wrap-size   : 18px;

test/routers/slider.vue

@@ -2,7 +2,7 @@
     <div style="width: 400px;margin:100px;">
         {{ value }}
         <Slider @on-change="change" :step="10" show-stops></Slider>
-        <Slider :value.sync="value" show-input range @on-change="change" :step="13"></Slider>
+        <Slider :value.sync="value" show-input show-stops range @on-change="change" :step="13"></Slider>
         <!--<Slider :max="10"></Slider>-->
         <!--<Slider :step="13"></Slider>-->
         <!--<Slider :step="13" :max="60"></Slider>-->