Jason Woltje
bc86947d01
All checks were successful
ci/woodpecker/push/web Pipeline was successful
Implements the SpeechSettings component with four sections: - STT settings (enable/disable, language preference) - TTS settings (enable/disable, voice selector, tier preference, auto-play, speed control) - Voice preview with test button - Provider status with health indicators Also adds Slider UI component and getHealthStatus API client function. 30 unit tests covering all sections, toggles, voice loading, and PDA-friendly design. Fixes #404 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
56 lines
1.1 KiB
TypeScript
56 lines
1.1 KiB
TypeScript
import * as React from "react";
|
|
|
|
export interface SliderProps {
|
|
id?: string;
|
|
min?: number;
|
|
max?: number;
|
|
step?: number;
|
|
value?: number[];
|
|
defaultValue?: number[];
|
|
onValueChange?: (value: number[]) => void;
|
|
disabled?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export const Slider = React.forwardRef<HTMLInputElement, SliderProps>(
|
|
(
|
|
{
|
|
id,
|
|
min = 0,
|
|
max = 100,
|
|
step = 1,
|
|
value,
|
|
defaultValue,
|
|
onValueChange,
|
|
disabled,
|
|
className = "",
|
|
},
|
|
ref
|
|
) => {
|
|
const currentValue = value?.[0] ?? defaultValue?.[0] ?? min;
|
|
|
|
return (
|
|
<input
|
|
type="range"
|
|
role="slider"
|
|
ref={ref}
|
|
id={id}
|
|
min={min}
|
|
max={max}
|
|
step={step}
|
|
value={currentValue}
|
|
onChange={(e) => {
|
|
onValueChange?.([parseFloat(e.target.value)]);
|
|
}}
|
|
disabled={disabled}
|
|
aria-valuemin={min}
|
|
aria-valuemax={max}
|
|
aria-valuenow={currentValue}
|
|
className={`w-full h-2 rounded-lg appearance-none cursor-pointer bg-gray-200 accent-blue-500 ${className}`}
|
|
/>
|
|
);
|
|
}
|
|
);
|
|
|
|
Slider.displayName = "Slider";
|