refactor performance-form with SliderInputComponent

Author: xcutiboo

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

@@ -4,10 +4,11 @@ import { FormsModule } from '@angular/forms';
 import { ConfigStoreService } from '../../../services/config-store.service';
 import { KittyPerformanceConfig } from '../../../models/kitty-types';
 import { NumberInputComponent } from '../../shared/number-input/number-input.component';
+import { SliderInputComponent } from '../../shared/slider-input/slider-input.component';
 
 @Component({
   selector: 'app-performance-form',
-  imports: [CommonModule, FormsModule, NumberInputComponent],
+  imports: [CommonModule, FormsModule, NumberInputComponent, SliderInputComponent],
   template: `
     <div class="space-y-6">
       <div>
@@ -25,28 +26,11 @@ import { NumberInputComponent } from '../../shared/number-input/number-input.com
             Delay between screen repaints. Lower = higher FPS at the cost of more CPU.
             Default 10ms (~100 FPS). Values under 3ms push toward maximum refresh rate.
           </p>
-          <div class="flex items-center gap-4">
-            <input
-              type="range"
-              [(ngModel)]="performance.repaint_delay"
-              (ngModelChange)="updatePerformance()"
-              min="1"
-              max="100"
-              step="1"
-              class="flex-1"
-            />
-            <app-number-input
-              class="w-32 flex-shrink-0"
-              [(ngModel)]="performance.repaint_delay"
-              (ngModelChange)="updatePerformance()"
-              [min]="1"
-              [max]="500"
-            />
-          </div>
-          <div class="flex justify-between text-xs text-kitty-text-dim mt-1">
-            <span>1ms (max FPS, high CPU)</span>
-            <span>100ms (smooth, low CPU)</span>
-          </div>
+          <app-slider-input
+            [value]="performance.repaint_delay"
+            (valueChange)="updateNumberPerf('repaint_delay', $event)"
+            [min]="1" [max]="100" [step]="1"
+            [labels]="['1ms (max FPS, high CPU)', '100ms (smooth, low CPU)']" />
         </div>
 
         <div class="form-group">
@@ -58,24 +42,10 @@ import { NumberInputComponent } from '../../shared/number-input/number-input.com
             Milliseconds to wait before processing input. Allows Kitty to batch rapid key events efficiently.
             Reduce to 0 for minimum latency in games or fast-typing workflows.
           </p>
-          <div class="flex items-center gap-4">
-            <input
-              type="range"
-              [(ngModel)]="performance.input_delay"
-              (ngModelChange)="updatePerformance()"
-              min="0"
-              max="50"
-              step="1"
-              class="flex-1"
-            />
-            <app-number-input
-              class="w-32 flex-shrink-0"
-              [(ngModel)]="performance.input_delay"
-              (ngModelChange)="updatePerformance()"
-              [min]="0"
-              [max]="200"
-            />
-          </div>
+          <app-slider-input
+            [value]="performance.input_delay"
+            (valueChange)="updateNumberPerf('input_delay', $event)"
+            [min]="0" [max]="50" [step]="1" />
         </div>
 
         @if (advancedMode()) {
@@ -124,4 +94,9 @@ export class PerformanceFormComponent {
   updatePerformance(): void {
     this.configStore.updateSection('performance', { ...this.performance });
   }
+
+  updateNumberPerf(key: keyof KittyPerformanceConfig, value: number): void {
+    this.performance = { ...this.performance, [key]: value };
+    this.updatePerformance();
+  }
 }