Speech settingsPro

Stability, similarity, style and speed, each slider saying what its ends do, with presets to start from, Custom once anything moves, and a reset.

Markdown

On this page

ProStability, similarity, style and speed with presets and a reset, and a preview at the chosen speed.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/speech-settings

Usage

tsx

import { SpeechSettings } from "@/components/ui/chatcn/pro/speech-settings"

<SpeechSettings value={settings} onValueChange={setSettings} />

Each track has a tick at its default so you can always find the way back, and Reset appears once anything leaves it. High style with low stability warns that takes will drift. Pass fields to show a subset and presets for your model's.

Examples

States

ProCustom with the drift warning, compact with two fields and disabled.

Props

Prop	Type	Notes
`value`, `defaultValue`, `onValueChange`	`SpeechSettings`	Stability, similarity, style 0 to 1, speed
`presets`	`SpeechPreset[]`	Default Natural, Steady, Expressive. Empty hides the row
`defaults`	`SpeechSettings`	Reset target and track ticks
`fields`	`SpeechSettingKey[]`	Default all four
`speedRange`	`[number, number]`	Default 0.7 to 1.2
`compact`, `hideTitle`, `disabled`, `locale`
`labels`	`Partial<SpeechSettingsLabels>`	Every string the settings show or announce, for translation

Keyboard

Key	Action
`←` `→` on a slider	Change by 1%
`Home`, `End`	Lowest and highest
`←` `→` on the presets	Pick a preset

Accessibility

Sliders are native range inputs with spoken values: "50%", "1.05 times".
The drift warning is linked to the Style slider. Reset is announced.

Motion

Thumbs follow the pointer and presets jump at once. Reset fades in over 150 ms. The thumb grows slightly while held.