Improved actor filter layout and behavior.

assets/components/form/range.vue

@@ -52,6 +52,8 @@
 </template>
 
 <script>
+import { nextTick } from 'vue';
+
 function minValue() {
 	return Math.min(this.valueA, this.valueB);
 }
@@ -78,20 +80,32 @@ function emit(type = 'change') {
 }
 
 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;
-		this.emit();
+	if (this.allowEnable) {
+		this.emit('enable');
 	}
+
+	nextTick(() => {
+		if (!this.disabled) {
+			const closestValue = Math.ceil((event.offsetX / event.target.getBoundingClientRect().width) * (this.max - this.min)) + this.min;
+			const closestSlider = Math.abs(this.valueA - closestValue) < Math.abs(this.valueB - closestValue) ? 'valueA' : 'valueB';
+
+			this[closestSlider] = closestValue;
+			this.emit();
+		}
+	});
 }
 
 function setValue(prop, value) {
-	if (!this.disabled) {
-		this[prop] = value;
-		this.emit();
+	if (this.allowEnable) {
+		this.emit('enable');
 	}
+
+	nextTick(() => {
+		if (!this.disabled) {
+			this[prop] = value;
+			this.emit();
+		}
+	});
 }
 
 export default {
@@ -116,8 +130,12 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		allowEnable: {
+			type: Boolean,
+			default: false,
+		},
 	},
-	emits: ['change', 'input'],
+	emits: ['change', 'input', 'enable'],
 	data() {
 		if (this.values) {
 			return {
@@ -213,8 +231,8 @@ export default {
 }
 
 ::v-deep(.icon) {
-	width: 1.5rem;
-	height: 1.5rem;
+	width: 1.25rem;
+	height: 1.25rem;
 	flex-shrink: 0;
 	fill: var(--shadow);
 }