diff --git a/packages/slider/demo/index.vue b/packages/slider/demo/index.vue
index 87331cb12..626251324 100644
--- a/packages/slider/demo/index.vue
+++ b/packages/slider/demo/index.vue
@@ -10,8 +10,8 @@
@@ -97,7 +97,7 @@ export default {
data() {
return {
value1: 50,
- value2: 50,
+ value2: 0,
value3: 50,
value4: 50,
value5: 50,
diff --git a/packages/slider/en-US.md b/packages/slider/en-US.md
index 5d4aba47b..a5d96d66a 100644
--- a/packages/slider/en-US.md
+++ b/packages/slider/en-US.md
@@ -35,7 +35,7 @@ export default {
### Range
```html
-
+
```
### Disabled
diff --git a/packages/slider/index.js b/packages/slider/index.js
index a583f9b20..f13a28f1e 100644
--- a/packages/slider/index.js
+++ b/packages/slider/index.js
@@ -1,4 +1,4 @@
-import { use, isDef } from '../utils';
+import { use } from '../utils';
import { TouchMixin } from '../mixins/touch';
import { preventDefault } from '../utils/dom/event';
@@ -28,6 +28,12 @@ export default sfc({
}
},
+ computed: {
+ range() {
+ return this.max - this.min;
+ }
+ },
+
methods: {
onTouchStart(event) {
if (this.disabled) {
@@ -45,17 +51,17 @@ export default sfc({
}
if (this.dragStatus === 'start') {
- this.dragStatus = 'draging';
this.$emit('drag-start');
}
preventDefault(event, true);
this.touchMove(event);
+ this.dragStatus = 'draging';
const rect = this.$el.getBoundingClientRect();
const delta = this.vertical ? this.deltaY : this.deltaX;
const total = this.vertical ? rect.height : rect.width;
- const diff = (delta / total) * 100;
+ const diff = (delta / total) * this.range;
this.newValue = this.startValue + diff;
this.updateValue(this.newValue);
@@ -66,14 +72,12 @@ export default sfc({
return;
}
- if (isDef(this.newValue)) {
+ if (this.dragStatus === 'draging') {
this.updateValue(this.newValue, true);
+ this.$emit('drag-end');
}
- if (this.dragStatus === 'draging') {
- this.$emit('drag-end');
- this.dragStatus = '';
- }
+ this.dragStatus = '';
},
onClick(event) {
@@ -84,7 +88,7 @@ export default sfc({
const rect = this.$el.getBoundingClientRect();
const delta = this.vertical ? event.clientY - rect.top : event.clientX - rect.left;
const total = this.vertical ? rect.height : rect.width;
- const value = (delta / total) * 100;
+ const value = (delta / total) * this.range + this.min;
this.updateValue(value, true);
},
@@ -115,7 +119,7 @@ export default sfc({
const crossAxis = vertical ? 'width' : 'height';
const barStyle = {
- [mainAxis]: `${this.format(this.value)}%`,
+ [mainAxis]: `${((this.value - this.min) * 100) / this.range}%`,
[crossAxis]: this.barHeight,
background: this.activeColor
};
diff --git a/packages/slider/test/__snapshots__/demo.spec.js.snap b/packages/slider/test/__snapshots__/demo.spec.js.snap
index 787e3bc1c..78f3bb387 100644
--- a/packages/slider/test/__snapshots__/demo.spec.js.snap
+++ b/packages/slider/test/__snapshots__/demo.spec.js.snap
@@ -14,7 +14,7 @@ exports[`renders demo correctly 1`] = `
-
diff --git a/packages/slider/zh-CN.md b/packages/slider/zh-CN.md
index b4ecdafcd..1c755a870 100644
--- a/packages/slider/zh-CN.md
+++ b/packages/slider/zh-CN.md
@@ -35,7 +35,7 @@ export default {
### 指定选择范围
```html
-
+
```
### 禁用