Slider: fix can not drag when step < 1

packages/slider/src/main.vue

@@ -84,6 +84,7 @@
 
     data() {
       return {
+        precision: null,
         inputValue: null,
         timeout: null,
         hovering: false,
@@ -136,9 +137,13 @@
 
       setPosition(newPos) {
         if (newPos >= 0 && (newPos <= 100)) {
-          var lengthPerStep = 100 / ((this.max - this.min) / this.step);
+          const lengthPerStep = 100 / ((this.max - this.min) / this.step);
-          var steps = Math.round(newPos / lengthPerStep);
+          const steps = Math.round(newPos / lengthPerStep);
-          this.$emit('input', Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min));
+          let value = steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min;
+          if (this.precision) {
+            value = parseFloat(value.toFixed(this.precision));
+          }
+          this.$emit('input', value);
           this.currentPosition = (this.value - this.min) / (this.max - this.min) * 100 + '%';
           if (!this.dragging) {
             if (this.value !== this.oldValue) {
@@ -151,10 +156,8 @@
 
       onSliderClick(event) {
         if (this.disabled) return;
-        var currentX = event.clientX;
+        const sliderOffsetLeft = this.$refs.slider.getBoundingClientRect().left;
-        var sliderOffsetLeft = this.$refs.slider.getBoundingClientRect().left;
+        this.setPosition((event.clientX - sliderOffsetLeft) / this.$sliderWidth * 100);
-        var newPos = (currentX - sliderOffsetLeft) / this.$sliderWidth * 100;
-        this.setPosition(newPos);
       },
 
       onInputChange() {
@@ -176,7 +179,7 @@
         if (this.dragging) {
           this.$refs.tooltip.showPopper = true;
           this.currentX = event.clientX;
-          var diff = (this.currentX - this.startX) / this.$sliderWidth * 100;
+          const diff = (this.currentX - this.startX) / this.$sliderWidth * 100;
           this.newPos = this.startPos + diff;
           this.setPosition(this.newPos);
         }
@@ -206,10 +209,10 @@
       },
 
       stops() {
-        let stopCount = (this.max - this.value) / this.step;
+        const stopCount = (this.max - this.value) / this.step;
-        let result = [];
+        const currentLeft = parseFloat(this.currentPosition);
-        let currentLeft = parseFloat(this.currentPosition);
+        const stepWidth = 100 * this.step / (this.max - this.min);
-        let stepWidth = 100 * this.step / (this.max - this.min);
+        const result = [];
         for (let i = 1; i < stopCount; i++) {
           result.push(currentLeft + i * stepWidth);
         }
@@ -223,6 +226,9 @@
       } else if (this.value > this.max) {
         this.$emit('input', this.max);
       }
+      if (this.step && this.step < 1) {
+        this.precision = this.step.toPrecision(1).split('.')[1].length;
+      }
       this.inputValue = this.inputValue || this.value;
     }
   };

test/unit/specs/slider.spec.js

@@ -86,6 +86,30 @@ describe('Slider', () => {
     }, 150);
   });
 
+  it('step', done => {
+    vm = createVue({
+      template: `
+        <div style="width: 200px;">
+          <el-slider v-model="value" :min="0" :max="1" :step="0.1"></el-slider>
+        </div>
+      `,
+
+      data() {
+        return {
+          value: 0
+        };
+      }
+    }, true);
+    const slider = vm.$children[0];
+    setTimeout(() => {
+      slider.onButtonDown({ clientX: 0 });
+      slider.onDragging({ clientX: 100 });
+      slider.onDragEnd();
+      expect(vm.value > 0.4 && vm.value < 0.6).to.true;
+      done();
+    }, 150);
+  });
+
   it('click', done => {
     vm = createVue({
       template: `