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="{ disabled }"
:style="{ background: `linear-gradient(90deg, var(--slider-track) ${minPercentage}%, var(--slider-range) ${minPercentage}%, var(--slider-range) ${maxPercentage}%, var(--slider-track) ${maxPercentage}%)` }"
@click="setNearest"
>
<input
v-model="valueA"
@ -72,6 +73,15 @@ function emit() {
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) {
if (!this.disabled) {
this[prop] = value;
@ -124,6 +134,7 @@ export default {
},
methods: {
emit,
setNearest,
setValue,
},
};