From 370f0e784c5d5ee81d49e8825c2881d4f097cb25 Mon Sep 17 00:00:00 2001
From: DebaucheryLibrarian <moonloop.adult@protonmail.com>
Date: Wed, 3 Mar 2021 14:48:04 +0100
Subject: [PATCH] Allowing input on range track.

---
 assets/components/form/range.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/assets/components/form/range.vue b/assets/components/form/range.vue
index c0b5f873..91e90808 100644
--- a/assets/components/form/range.vue
+++ b/assets/components/form/range.vue
@@ -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,
 	},
 };