drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix slider for min/max values greater than 100

Browse source
This commit is contained in:
Sergio Crisostomo 2018-01-30 08:24:39 +01:00
parent 45f823c0ca
commit 965b6d8e41
1 changed files with 20 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/components/slider/slider.vue
View file

@ -110,7 +110,6 @@
startX: 0, startX: 0,
currentX: 0, currentX: 0,
startPos: 0, startPos: 0,
newPos: null,
oldValue: val oldValue: val
}; };
}, },
@ -162,30 +161,30 @@
}, },
minPosition () { minPosition () {
const val = this.currentValue; const val = this.currentValue;
return (val[0] - this.min) / (this.max - this.min) * 100; return (val[0] - this.min) / this.valueRange * 100;
}, },
maxPosition: function () { maxPosition: function () {
const val = this.currentValue; const val = this.currentValue;
return (val[1] - this.min) / (this.max - this.min) * 100; return (val[1] - this.min) / this.valueRange * 100;
}, },
barStyle () { barStyle () {
const style = { const style = {
width: (this.currentValue[0] - this.min) / (this.max - this.min) * 100 + '%' width: (this.currentValue[0] - this.min) / this.valueRange * 100 + '%'
}; };
if (this.range) { if (this.range) {
style.left = (this.currentValue[0] - this.min) / (this.max - this.min) * 100 + '%'; style.left = (this.currentValue[0] - this.min) / this.valueRange * 100 + '%';
style.width = (this.currentValue[1] - this.currentValue[0]) / (this.max - this.min) * 100 + '%'; style.width = (this.currentValue[1] - this.currentValue[0]) / this.valueRange * 100 + '%';
} }
return style; return style;
}, },
stops () { stops () {
let stopCount = (this.max - this.min) / this.step; let stopCount = this.valueRange / this.step;
let result = []; let result = [];
let stepWidth = 100 * this.step / (this.max - this.min); let stepWidth = 100 * this.step / this.valueRange;
for (let i = 1; i < stopCount; i++) { for (let i = 1; i < stopCount; i++) {
result.push(i * stepWidth); result.push(i * stepWidth);
} }
@ -196,6 +195,9 @@
}, },
tipDisabled () { tipDisabled () {
return this.tipFormat(this.currentValue[0]) === null || this.showTip === 'never'; return this.tipFormat(this.currentValue[0]) === null || this.showTip === 'never';
},
valueRange(){
return this.max - this.min;
} }
}, },
methods: { methods: {
@ -203,11 +205,11 @@
return e.type.indexOf('touch') !== -1 ? e.touches[0].clientX : e.clientX; return e.type.indexOf('touch') !== -1 ? e.touches[0].clientX : e.clientX;
}, },
checkLimits ([min, max]) { checkLimits ([min, max]) {
min = Math.max(0, min); min = Math.max(this.min, min);
min = Math.min(100, min); min = Math.min(this.max, min);
max = Math.max(0, min, max); max = Math.max(this.min, min, max);
max = Math.min(100, max); max = Math.min(this.max, max);
return [min, max]; return [min, max];
}, },
onPointerDown (event, type) { onPointerDown (event, type) {
@ -224,22 +226,20 @@
onPointerDragStart (event) { onPointerDragStart (event) {
this.dragging = false; this.dragging = false;
this.startX = this.getPointerX(event); this.startX = this.getPointerX(event);
this.startPos = parseInt(this[`${this.pointerDown}Position`], 10); this.startPos = (this[`${this.pointerDown}Position`] * this.valueRange / 100) + this.min;
}, },
onPointerDrag (event) { onPointerDrag (event) {
this.dragging = true; this.dragging = true;
this.$refs[`${this.pointerDown}Tooltip`].visible = true; this.$refs[`${this.pointerDown}Tooltip`].visible = true;
this.currentX = this.getPointerX(event); this.currentX = this.getPointerX(event);
const diff = (this.currentX - this.startX) / this.sliderWidth * this.valueRange;
const diff = (this.currentX - this.startX) / this.sliderWidth * 100; this.changeButtonPosition(this.startPos + diff);
this.newPos = this.startPos + diff;
this.changeButtonPosition(this.newPos);
}, },
onPointerDragEnd () { onPointerDragEnd () {
if (this.dragging) { if (this.dragging) {
this.dragging = false; this.dragging = false;
this.$refs[`${this.pointerDown}Tooltip`].visible = false; this.$refs[`${this.pointerDown}Tooltip`].visible = false;
this.changeButtonPosition(this.newPos);
} }
this.pointerDown = ''; this.pointerDown = '';
@ -249,17 +249,16 @@
off(window, 'touchend', this.onPointerDragEnd); off(window, 'touchend', this.onPointerDragEnd);
}, },
changeButtonPosition (newPos, forceType) { changeButtonPosition (newPos, forceType) {
const type = forceType || this.pointerDown; const type = forceType || this.pointerDown;
const index = type === 'min' ? 0 : 1; const index = type === 'min' ? 0 : 1;
if (type === 'min') newPos = this.checkLimits([newPos, this.maxPosition])[0]; if (type === 'min') newPos = this.checkLimits([newPos, this.maxPosition])[0];
else newPos = this.checkLimits([this.minPosition, newPos])[1]; else newPos = this.checkLimits([this.minPosition, newPos])[1];
const lengthPerStep = 100 / ((this.max - this.min) / this.step); const lengthPerStep = this.valueRange / 100 * this.step;
const steps = Math.round(newPos / lengthPerStep); const steps = Math.round(newPos / lengthPerStep);
const value = this.currentValue; const value = this.currentValue;
value[index] = Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min); value[index] = Math.round(steps * lengthPerStep);
this.currentValue = [...value]; this.currentValue = [...value];
if (!this.dragging) { if (!this.dragging) {
@ -276,7 +275,7 @@
if (this.disabled) return; if (this.disabled) return;
const currentX = this.getPointerX(event); const currentX = this.getPointerX(event);
const sliderOffsetLeft = this.$refs.slider.getBoundingClientRect().left; const sliderOffsetLeft = this.$refs.slider.getBoundingClientRect().left;
const newPos = (currentX - sliderOffsetLeft) / this.sliderWidth * 100; let newPos = ((currentX - sliderOffsetLeft) / this.sliderWidth * this.valueRange) + this.min;
if (!this.range || newPos <= this.minPosition) this.changeButtonPosition(newPos, 'min'); if (!this.range || newPos <= this.minPosition) this.changeButtonPosition(newPos, 'min');
else if (newPos >= this.maxPosition) this.changeButtonPosition(newPos, 'max'); else if (newPos >= this.maxPosition) this.changeButtonPosition(newPos, 'max');