chenhaodong / mew-iview

Commit 029a1700c69a1a0093a9b30ba180b5c20ddf843b

Authored by Aresn
Committed by GitHub
2 parents a9c00cd6 eb8c6cd9

Merge pull request #2946 from SergioCrisostomo/fix-slider-maxmin 

 Fix slider for min/max values greater than 100
Showing 1 changed file with 20 additions and 23 deletions   Show diff stats
Inline Side-by-side
src/components/slider/slider.vue
  Show/Hide comments   View file @029a170
... ... @@ -110,7 +110,6 @@
110 110 startX: 0,
111 111 currentX: 0,
112 112 startPos: 0,
113   - newPos: null,
114 113 oldValue: val
115 114 };
116 115 },
... ... @@ -162,30 +161,30 @@
162 161 },
163 162 minPosition () {
164 163 const val = this.currentValue;
165   - return (val[0] - this.min) / (this.max - this.min) * 100;
  164 + return (val[0] - this.min) / this.valueRange * 100;
166 165 },
167 166 maxPosition: function () {
168 167 const val = this.currentValue;
169 168  
170   - return (val[1] - this.min) / (this.max - this.min) * 100;
  169 + return (val[1] - this.min) / this.valueRange * 100;
171 170 },
172 171 barStyle () {
173 172  
174 173 const style = {
175   - width: (this.currentValue[0] - this.min) / (this.max - this.min) * 100 + '%'
  174 + width: (this.currentValue[0] - this.min) / this.valueRange * 100 + '%'
176 175 };
177 176  
178 177 if (this.range) {
179   - style.left = (this.currentValue[0] - this.min) / (this.max - this.min) * 100 + '%';
180   - style.width = (this.currentValue[1] - this.currentValue[0]) / (this.max - this.min) * 100 + '%';
  178 + style.left = (this.currentValue[0] - this.min) / this.valueRange * 100 + '%';
  179 + style.width = (this.currentValue[1] - this.currentValue[0]) / this.valueRange * 100 + '%';
181 180 }
182 181  
183 182 return style;
184 183 },
185 184 stops () {
186   - let stopCount = (this.max - this.min) / this.step;
  185 + let stopCount = this.valueRange / this.step;
187 186 let result = [];
188   - let stepWidth = 100 * this.step / (this.max - this.min);
  187 + let stepWidth = 100 * this.step / this.valueRange;
189 188 for (let i = 1; i < stopCount; i++) {
190 189 result.push(i * stepWidth);
191 190 }
... ... @@ -196,6 +195,9 @@
196 195 },
197 196 tipDisabled () {
198 197 return this.tipFormat(this.currentValue[0]) === null || this.showTip === 'never';
  198 + },
  199 + valueRange(){
  200 + return this.max - this.min;
199 201 }
200 202 },
201 203 methods: {
... ... @@ -203,11 +205,11 @@
203 205 return e.type.indexOf('touch') !== -1 ? e.touches[0].clientX : e.clientX;
204 206 },
205 207 checkLimits ([min, max]) {
206   - min = Math.max(0, min);
207   - min = Math.min(100, min);
  208 + min = Math.max(this.min, min);
  209 + min = Math.min(this.max, min);
208 210  
209   - max = Math.max(0, min, max);
210   - max = Math.min(100, max);
  211 + max = Math.max(this.min, min, max);
  212 + max = Math.min(this.max, max);
211 213 return [min, max];
212 214 },
213 215 onPointerDown (event, type) {
... ... @@ -224,22 +226,20 @@
224 226 onPointerDragStart (event) {
225 227 this.dragging = false;
226 228 this.startX = this.getPointerX(event);
227   - this.startPos = parseInt(this[`${this.pointerDown}Position`], 10);
  229 + this.startPos = (this[`${this.pointerDown}Position`] * this.valueRange / 100) + this.min;
228 230 },
229 231 onPointerDrag (event) {
230 232 this.dragging = true;
231 233 this.$refs[`${this.pointerDown}Tooltip`].visible = true;
232 234 this.currentX = this.getPointerX(event);
  235 + const diff = (this.currentX - this.startX) / this.sliderWidth * this.valueRange;
233 236  
234   - const diff = (this.currentX - this.startX) / this.sliderWidth * 100;
235   - this.newPos = this.startPos + diff;
236   - this.changeButtonPosition(this.newPos);
  237 + this.changeButtonPosition(this.startPos + diff);
237 238 },
238 239 onPointerDragEnd () {
239 240 if (this.dragging) {
240 241 this.dragging = false;
241 242 this.$refs[`${this.pointerDown}Tooltip`].visible = false;
242   - this.changeButtonPosition(this.newPos);
243 243 }
244 244  
245 245 this.pointerDown = '';
... ... @@ -249,17 +249,14 @@
249 249 off(window, 'touchend', this.onPointerDragEnd);
250 250 },
251 251 changeButtonPosition (newPos, forceType) {
252   -
253 252 const type = forceType || this.pointerDown;
254 253 const index = type === 'min' ? 0 : 1;
255 254 if (type === 'min') newPos = this.checkLimits([newPos, this.maxPosition])[0];
256 255 else newPos = this.checkLimits([this.minPosition, newPos])[1];
257 256  
258   - const lengthPerStep = 100 / ((this.max - this.min) / this.step);
259   - const steps = Math.round(newPos / lengthPerStep);
260   -
  257 + const modulus = newPos % this.step;
261 258 const value = this.currentValue;
262   - value[index] = Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min);
  259 + value[index] = newPos - modulus;
263 260 this.currentValue = [...value];
264 261  
265 262 if (!this.dragging) {
... ... @@ -276,7 +273,7 @@
276 273 if (this.disabled) return;
277 274 const currentX = this.getPointerX(event);
278 275 const sliderOffsetLeft = this.$refs.slider.getBoundingClientRect().left;
279   - const newPos = (currentX - sliderOffsetLeft) / this.sliderWidth * 100;
  276 + let newPos = ((currentX - sliderOffsetLeft) / this.sliderWidth * this.valueRange) + this.min;
280 277  
281 278 if (!this.range || newPos <= this.minPosition) this.changeButtonPosition(newPos, 'min');
282 279 else if (newPos >= this.maxPosition) this.changeButtonPosition(newPos, 'max');
... ...