refactor scrollback-form with SliderInputComponent

Author: xcutiboo

src/components/forms/scrollback-form/scrollback-form.component.ts

@@ -5,11 +5,12 @@ import { ConfigStoreService } from '../../../services/config-store.service';
 import { KittyScrollbackConfig } from '../../../models/kitty-types';
 import { NumberInputComponent } from '../../shared/number-input/number-input.component';
 import { VersionBadgeComponent } from '../../shared/version-badge/version-badge.component';
+import { SliderInputComponent } from '../../shared/slider-input/slider-input.component';
 import { KittyVersionService } from '../../../services/kitty-version.service';
 
 @Component({
   selector: 'app-scrollback-form',
-  imports: [CommonModule, FormsModule, NumberInputComponent, VersionBadgeComponent],
+  imports: [CommonModule, FormsModule, NumberInputComponent, VersionBadgeComponent, SliderInputComponent],
   template: `
     <div class="space-y-6">
       <div>
@@ -37,15 +38,10 @@ import { KittyVersionService } from '../../../services/kitty-version.service';
             Wheel Scroll Multiplier
             <span class="text-kitty-accent font-bold ml-2">{{ scrollback.wheel_scroll_multiplier }}x</span>
           </label>
-          <input
-            type="range"
-            [(ngModel)]="scrollback.wheel_scroll_multiplier"
-            (ngModelChange)="updateScrollback()"
-            min="0.5"
-            max="20"
-            step="0.5"
-            class="w-full"
-          />
+          <app-slider-input
+            [value]="scrollback.wheel_scroll_multiplier"
+            (valueChange)="updateNumberScrollback('wheel_scroll_multiplier', $event)"
+            [min]="0.5" [max]="20" [step]="0.5" />
         </div>
 
         @if (advancedMode()) {
@@ -102,15 +98,10 @@ import { KittyVersionService } from '../../../services/kitty-version.service';
               Touch Scroll Multiplier
               <span class="text-kitty-accent font-bold ml-2">{{ scrollback.touch_scroll_multiplier }}x</span>
             </label>
-            <input
-              type="range"
-              [(ngModel)]="scrollback.touch_scroll_multiplier"
-              (ngModelChange)="updateScrollback()"
-              min="0.5"
-              max="10"
-              step="0.5"
-              class="w-full"
-            />
+            <app-slider-input
+              [value]="scrollback.touch_scroll_multiplier"
+              (valueChange)="updateNumberScrollback('touch_scroll_multiplier', $event)"
+              [min]="0.5" [max]="10" [step]="0.5" />
           </div>
 
           <div class="form-group" [class.opacity-60]="!pixelScrollAvailable()">
@@ -194,4 +185,9 @@ export class ScrollbackFormComponent {
   updateScrollback(): void {
     this.configStore.updateSection('scrollback', { ...this.scrollback });
   }
+
+  updateNumberScrollback(key: keyof KittyScrollbackConfig, value: number): void {
+    this.scrollback = { ...this.scrollback, [key]: value };
+    this.updateScrollback();
+  }
 }