Function Slider

web/components/settings/SettingRow.tsx:96–115

({ value, min, max, step = 1, onChange, showValue = true, unit = "", className }: SliderProps)

}

export function Slider({ value, min, max, step = 1, onChange, showValue = true, unit = "", className }: SliderProps) {
  return (
    <div className={cn("flex items-center gap-3", className)}>
      <input
        type="range"
        min={min}
        max={max}
        step={step}
        value={value}
        onChange={(e) => onChange(Number(e.target.value))}
        className="flex-1 h-1.5 bg-surface-700 rounded-full appearance-none cursor-pointer accent-brand-500"
      />
      {showValue && (
        <span className="text-xs text-surface-300 w-12 text-right font-mono">
          {value}{unit}
        </span>
      )}
    </div>
  );
}