refactor os-specific-form with SliderInputComponent

Author: xcutiboo

src/components/forms/os-specific-form/os-specific-form.component.ts

@@ -3,11 +3,13 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { ConfigStoreService } from '../../../services/config-store.service';
 import { KittyOSSpecificConfig } from '../../../models/kitty-types';
+import { VersionBadgeComponent } from '../../shared/version-badge/version-badge.component';
+import { SliderInputComponent } from '../../shared/slider-input/slider-input.component';
 import { NumberInputComponent } from '../../shared/number-input/number-input.component';
 
 @Component({
   selector: 'app-os-specific-form',
-  imports: [CommonModule, FormsModule, NumberInputComponent],
+  imports: [CommonModule, FormsModule, VersionBadgeComponent, SliderInputComponent, NumberInputComponent],
   template: `
     <div class="space-y-6">
       <div>
@@ -130,15 +132,10 @@ import { NumberInputComponent } from '../../shared/number-input/number-input.com
                   <span class="text-kitty-accent font-bold ml-2">{{ osSpecific.macos_thicken_font }}</span>
                   <span class="text-kitty-text-dim text-xs ml-1">Draw extra pixel around glyphs (0 = off)</span>
                 </label>
-                <input
-                  type="range"
-                  [(ngModel)]="osSpecific.macos_thicken_font"
-                  (ngModelChange)="updateOsSpecific()"
-                  min="0"
-                  max="2"
-                  step="0.05"
-                  class="w-full"
-                />
+                <app-slider-input
+                  [value]="osSpecific.macos_thicken_font"
+                  (valueChange)="updateNumberOs('macos_thicken_font', $event)"
+                  [min]="0" [max]="2" [step]="0.05" />
               </div>
 
               <div class="form-group">
@@ -296,4 +293,9 @@ export class OsSpecificFormComponent {
   updateOsSpecific(): void {
     this.configStore.updateSection('os_specific', { ...this.osSpecific });
   }
+
+  updateNumberOs(key: keyof KittyOSSpecificConfig, value: number): void {
+    this.osSpecific = { ...this.osSpecific, [key]: value };
+    this.updateOsSpecific();
+  }
 }