feat: allow direct entry of slider values (#2995)

Closes #2795.

Click the value next to any slider to type a number directly, in addition
to dragging the slider thumb.

Co-authored-by: Cursor <cursoragent@cursor.com>
---------

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Kiss Róbert <ert78gb@gmail.com>

Author: 3 people

packages/uhk-web/src/app/components/add-on/add-on.component.scss

@@ -1,3 +1,3 @@
 :host {
-    --slider-value-width: 35px;
+    --slider-value-width: 50px;
 }

packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.ts

@@ -56,11 +56,11 @@ export class MouseSpeedComponent implements OnInit, OnDestroy {
     ngOnInit(): void {
         this.userConfigSubscription = this.store.select(getUserConfiguration)
             .subscribe(config => {
-                this.mouseMoveInitialSpeed = config.mouseMoveInitialSpeed * MOUSE_MOVE_VALUE_MULTIPLIER || 0;
-                this.mouseMoveBaseSpeed = config.mouseMoveBaseSpeed * MOUSE_MOVE_VALUE_MULTIPLIER || 0;
-                this.mouseMoveAcceleration = config.mouseMoveAcceleration * MOUSE_MOVE_VALUE_MULTIPLIER || 0;
-                this.mouseMoveDeceleratedSpeed = config.mouseMoveDeceleratedSpeed * MOUSE_MOVE_VALUE_MULTIPLIER || 0;
-                this.mouseMoveAcceleratedSpeed = config.mouseMoveAcceleratedSpeed * MOUSE_MOVE_VALUE_MULTIPLIER || 0;
+                this.mouseMoveInitialSpeed = this.toDisplayMoveSpeed(config.mouseMoveInitialSpeed);
+                this.mouseMoveBaseSpeed = this.toDisplayMoveSpeed(config.mouseMoveBaseSpeed);
+                this.mouseMoveAcceleration = this.toDisplayMoveSpeed(config.mouseMoveAcceleration);
+                this.mouseMoveDeceleratedSpeed = this.toDisplayMoveSpeed(config.mouseMoveDeceleratedSpeed);
+                this.mouseMoveAcceleratedSpeed = this.toDisplayMoveSpeed(config.mouseMoveAcceleratedSpeed);
                 this.mouseMoveAxisSkew = config.mouseMoveAxisSkew || 0;
 
                 this.mouseScrollInitialSpeed = config.mouseScrollInitialSpeed || 0;
@@ -101,4 +101,8 @@ export class MouseSpeedComponent implements OnInit, OnDestroy {
     resetToMacDefault() {
         this.store.dispatch(new ResetMacMouseSpeedSettingsAction());
     }
+
+    private toDisplayMoveSpeed(stored: number): number {
+        return Math.round(stored * MOUSE_MOVE_VALUE_MULTIPLIER) || 0;
+    }
 }

packages/uhk-web/src/app/components/device/typing-behavior-page/typing-behavior-page.component.scss

@@ -1,5 +1,5 @@
 :host {
-    --slider-value-width: 50px;
+    --slider-value-width: 60px;
     --table-td-value-margin-left: 1.75em;
 
     table.settings {

packages/uhk-web/src/app/components/slider-wrapper/slider-wrapper.component.html

@@ -25,6 +25,20 @@
             (ngModelChange)="onSliderChange($event)"></nouislider>
     </div>
     <div class="slider-value">
-        <div class="value-indicator">{{ getFormatedValue(value) }}</div>
+        <div *ngIf="!editingValue"
+             class="value-indicator"
+             [class.editable]="canEditValue"
+             (click)="startEditing()">{{ getFormatedValue(value) }}</div>
+        <input *ngIf="editingValue"
+               #valueInput
+               class="value-input"
+               type="number"
+               [min]="min"
+               [max]="max"
+               step="any"
+               [(ngModel)]="inputValue"
+               (blur)="commitInputValue()"
+               (keydown.enter)="$event.preventDefault(); commitInputValue()"
+               (keydown.escape)="cancelEditing($event)"/>
     </div>
 </div>

packages/uhk-web/src/app/components/slider-wrapper/slider-wrapper.component.scss

@@ -28,5 +28,19 @@ $side-value-width: 80px;
 
     .value-indicator {
         white-space: nowrap;
+
+        &.editable {
+            cursor: pointer;
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+
+    .value-input {
+        width: 100%;
+        padding: 0 0.2rem;
+        text-align: right;
     }
 }

packages/uhk-web/src/app/components/slider-wrapper/slider-wrapper.component.ts

@@ -1,4 +1,13 @@
-import { Component, EventEmitter, forwardRef, Input, Output, OnDestroy, ViewChild } from '@angular/core';
+import {
+    Component,
+    ElementRef,
+    EventEmitter,
+    forwardRef,
+    Input,
+    OnDestroy,
+    Output,
+    ViewChild
+} from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { NouisliderComponent } from 'ng2-nouislider';
@@ -31,6 +40,7 @@ export interface SliderProps {
 })
 export class SliderWrapperComponent implements ControlValueAccessor, OnDestroy {
     @ViewChild(NouisliderComponent, { static: false }) slider: NouisliderComponent;
+    @ViewChild('valueInput') valueInput: ElementRef<HTMLInputElement>;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     @Input() config: any = {};
     @Input() label: string;
@@ -50,6 +60,9 @@ export class SliderWrapperComponent implements ControlValueAccessor, OnDestroy {
 
     public value: number;
     disabled = false;
+    editingValue = false;
+    inputValue: string | number = '';
+    private cancelPending = false;
     private changeObserver$: Observer<number>;
     private changeDebounceTime: number = 300;
 
@@ -62,10 +75,14 @@ export class SliderWrapperComponent implements ControlValueAccessor, OnDestroy {
         }
     }
 
+    get canEditValue(): boolean {
+        return !this.disabled && !this.valueFormatter;
+    }
+
     writeValue(value: number): void {
         this.value = value === undefined || value === null
             ? this.min
-            : value;
+            : this.normalizeValue(value);
     }
 
     registerOnChange(fn: Function): void {
@@ -79,18 +96,124 @@ export class SliderWrapperComponent implements ControlValueAccessor, OnDestroy {
     }
 
     getFormatedValue(value: number): string {
+        const normalized = this.normalizeValue(value);
+
         if (this.valueFormatter) {
-            return this.valueFormatter(value);
+            return this.valueFormatter(normalized);
         }
 
         if (this.valueUnit) {
-            return value + ' ' + this.valueUnit;
+            return normalized + ' ' + this.valueUnit;
+        }
+
+        return normalized.toString(10);
+    }
+
+    startEditing(): void {
+        if (!this.canEditValue) {
+            return;
         }
 
-        return value.toString(10);
+        this.cancelPending = false;
+        this.inputValue = this.normalizeValue(this.value).toString(10);
+        this.editingValue = true;
+
+        setTimeout(() => {
+            const input = this.valueInput?.nativeElement;
+            if (input) {
+                input.focus();
+                input.select();
+            }
+        });
+    }
+
+    commitInputValue(): void {
+        if (this.cancelPending) {
+            this.cancelPending = false;
+            this.editingValue = false;
+            return;
+        }
+
+        if (!this.editingValue) {
+            return;
+        }
+
+        const parsed = this.parseInputValue(this.inputValue);
+        this.editingValue = false;
+
+        if (parsed === null) {
+            return;
+        }
+
+        const clamped = this.normalizeValue(Math.min(this.max, Math.max(this.min, parsed)));
+        this.value = clamped;
+        this.propagateValueChange(clamped);
+    }
+
+    cancelEditing(event?: KeyboardEvent): void {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+
+        this.cancelPending = true;
+        this.editingValue = false;
     }
 
     onSliderChange(value: number): void {
+        this.propagateValueChange(value, true);
+    }
+
+    htmlTooltip(): SafeHtml {
+        return this.sanitizer.bypassSecurityTrustHtml(this.tooltip);
+    }
+
+    private parseInputValue(raw: string | number | null | undefined): number | null {
+        if (raw === null || raw === undefined) {
+            return null;
+        }
+
+        if (typeof raw === 'number') {
+            return Number.isFinite(raw) ? raw : null;
+        }
+
+        if (!raw.trim()) {
+            return null;
+        }
+
+        let trimmed = raw.trim();
+        if (this.valueUnit) {
+            const suffix = ' ' + this.valueUnit;
+            if (trimmed.endsWith(suffix)) {
+                trimmed = trimmed.slice(0, -suffix.length).trim();
+            }
+        }
+
+        const parsed = Number(trimmed);
+        return Number.isFinite(parsed) ? parsed : null;
+    }
+
+    private getStepDecimalPlaces(): number {
+        if (!this.step || this.step <= 0) {
+            return 0;
+        }
+
+        const stepString = this.step.toString();
+        const decimalIndex = stepString.indexOf('.');
+        if (decimalIndex === -1) {
+            return 0;
+        }
+
+        return stepString.length - decimalIndex - 1;
+    }
+
+    private normalizeValue(value: number): number {
+        const stepDecimals = this.getStepDecimalPlaces();
+        const fractionDigits = Math.min(Math.max(stepDecimals + 2, 6), 10);
+        return Number(value.toFixed(fractionDigits));
+    }
+
+    private propagateValueChange(value: number, skipFirstChange = false): void {
         if (!this.changeObserver$) {
             Observable.create(observer => {
                 this.changeObserver$ = observer;
@@ -99,13 +222,12 @@ export class SliderWrapperComponent implements ControlValueAccessor, OnDestroy {
                 distinctUntilChanged()
             ).subscribe(this.propagateChange);
 
-            return; // No change event on first change as the value is just being set
+            if (skipFirstChange) {
+                return;
+            }
         }
-        this.changeObserver$.next(value);
-    }
 
-    htmlTooltip(): SafeHtml {
-        return this.sanitizer.bypassSecurityTrustHtml(this.tooltip);
+        this.changeObserver$.next(value);
     }
 
     private propagateChange: Function = () => {};

packages/uhk-web/src/styles/_table.scss

@@ -75,7 +75,7 @@ table.settings {
                     }
 
                     slider-wrapper {
-                        --slider-value-width: 45px;
+                        --slider-value-width: 55px;
                         display: block;
                         margin-left: -1.25rem;
                         margin-right: 2rem;