Slider: change event only triggers on user input

packages/slider/src/button.vue

@@ -39,6 +39,7 @@
       return {
         hovering: false,
         dragging: false,
+        isClick: false,
         startX: 0,
         currentX: 0,
         startY: 0,
@@ -127,6 +128,7 @@
 
       onDragStart(event) {
         this.dragging = true;
+        this.isClick = true;
         if (this.vertical) {
           this.startY = event.clientY;
         } else {
@@ -137,6 +139,7 @@
 
       onDragging(event) {
         if (this.dragging) {
+          this.isClick = false;
           this.displayTooltip();
           let diff = 0;
           if (this.vertical) {
@@ -160,7 +163,10 @@
           setTimeout(() => {
             this.dragging = false;
             this.hideTooltip();
-            this.setPosition(this.newPosition);
+            if (!this.isClick) {
+              this.setPosition(this.newPosition);
+              this.$parent.emitChange();
+            }
           }, 0);
           window.removeEventListener('mousemove', this.onDragging);
           window.removeEventListener('mouseup', this.onDragEnd);

packages/slider/src/main.vue

@@ -6,6 +6,7 @@
       v-if="showInput && !range"
       class="el-slider__input"
       ref="input"
+      @change="$nextTick(emitChange)"
       :step="step"
       :disabled="disabled"
       :controls="showInputControls"
@@ -183,7 +184,6 @@
             this.firstValue = val[0];
             this.secondValue = val[1];
             if (this.valueChanged()) {
-              this.$emit('change', [this.minValue, this.maxValue]);
               this.dispatch('ElFormItem', 'el.form.change', [this.minValue, this.maxValue]);
               this.oldValue = val.slice();
             }
@@ -196,7 +196,6 @@
           } else {
             this.firstValue = val;
             if (this.valueChanged()) {
-              this.$emit('change', val);
               this.dispatch('ElFormItem', 'el.form.change', val);
               this.oldValue = val;
             }
@@ -228,12 +227,19 @@
           const sliderOffsetLeft = this.$refs.slider.getBoundingClientRect().left;
           this.setPosition((event.clientX - sliderOffsetLeft) / this.sliderSize * 100);
         }
+        this.emitChange();
       },
 
       resetSize() {
         if (this.$refs.slider) {
           this.sliderSize = this.$refs.slider[`client${ this.vertical ? 'Height' : 'Width' }`];
         }
+      },
+
+      emitChange() {
+        this.$nextTick(() => {
+          this.$emit('change', this.range ? [this.minValue, this.maxValue] : this.value);
+        });
       }
     },
 

test/unit/specs/slider.spec.js

@@ -180,6 +180,39 @@ describe('Slider', () => {
     }, 10);
   });
 
+  it('change event', done => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-slider v-model="value" @change="onChange">
+          </el-slider>
+        </div>
+      `,
+
+      data() {
+        return {
+          data: 0,
+          value: 0
+        };
+      },
+      methods: {
+        onChange(val) {
+          this.data = val;
+        }
+      }
+    }, true);
+    const slider = vm.$children[0];
+    vm.value = 10;
+    setTimeout(() => {
+      expect(vm.data).to.equal(0);
+      slider.onSliderClick({ clientX: 100 });
+      setTimeout(() => {
+        expect(vm.data > 0).to.true;
+        done();
+      }, 10);
+    }, 10);
+  });
+
   it('disabled', done => {
     vm = createVue({
       template: `