DebaucheryLibrarian
/
traxxx
2
1
Fork 1
Code Issues 37 Pull Requests 1 Releases Wiki Activity

Allowing input on range track.

This commit is contained in:
DebaucheryLibrarian 2021-03-03 14:48:04 +01:00
parent 780993eb63
commit 370f0e784c
1 changed files with 11 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
assets/components/form/range.vue
View File

@ -12,6 +12,7 @@
class="range" class="range"
:class="{ disabled }" :class="{ disabled }"
:style="{ background: `linear-gradient(90deg, var(--slider-track) ${minPercentage}%, var(--slider-range) ${minPercentage}%, var(--slider-range) ${maxPercentage}%, var(--slider-track) ${maxPercentage}%)` }" :style="{ background: `linear-gradient(90deg, var(--slider-track) ${minPercentage}%, var(--slider-range) ${minPercentage}%, var(--slider-range) ${maxPercentage}%, var(--slider-track) ${maxPercentage}%)` }"
@click="setNearest"
> >
<input <input
v-model="valueA" v-model="valueA"
@ -72,6 +73,15 @@ function emit() {
this.$emit('change', [this.minValue, this.maxValue]); this.$emit('change', [this.minValue, this.maxValue]);
} }
function setNearest(event) {
if (!this.disabled) {
const closestValue = Math.round((event.offsetX / event.target.getBoundingClientRect().width) * this.max);
const closestSlider = Math.abs(this.valueA - closestValue) < Math.abs(this.valueB - closestValue) ? 'valueA' : 'valueB';
this[closestSlider] = closestValue;
}
}
function setValue(prop, value) { function setValue(prop, value) {
if (!this.disabled) { if (!this.disabled) {
this[prop] = value; this[prop] = value;
@ -124,6 +134,7 @@ export default {
}, },
methods: { methods: {
emit, emit,
setNearest,
setValue, setValue,
}, },
}; };