Slider
ListensSlider@listenssoft/speechui-react-nativeA slider users can drag — or set by voice: “volume to seventy”.
Speak the command followed by a number and the slider claims the phrase, parses the number — digits or words, “70” or “seventy” — and clamps it to the range. Dragging works exactly like a native range input, speech or no speech.
Basic slider
Loading the React Native kit…
Hold anywhere and say:“volume to seventy”“volume 25”“volume zero”
Props
- default 0
- default 100
- default 1
- not set
React Native
Updates as you tick propsimport { ListensSlider } from "@listenssoft/speechui-react-native";import { useState } from "react";
function Demo() { const [volume, setVolume] = useState(40); return ( <ListensSlider label="Volume" command="volume" value={volume} onValueChange={setVolume} /> );}What you can say
| Say | Effect |
|---|---|
| “volume seventy” | Sets the value to 70 (spoken numbers are parsed: words, digits, or both). |
| “volume to seventy” | Same — filler words before the number are ignored. |
| “volume 3.5” | Decimal digits parse too; the result is clamped to [min, max]. |
| “volume three hundred” | Clamped to max. Compound numbers (“two hundred fifty”) are understood. |
The phrase must start with the command (a starts-with match claims the transcript so nothing else acts on it). The number is whatever parseSpokenNumber finds in the remainder; if there is no number, nothing happens.
API reference
React Native props for @listenssoft/speechui-react-native.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
min | number | 0 | Lower bound; spoken values clamp to it. |
max | number | 100 | Upper bound; spoken values clamp to it. |
step | number | 1 | Drag increment. The RN slider is pure RN — no native slider dependency. |
disabled | boolean | — | Disables dragging. |
Extra props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Label above the slider; also the command fallback. |
command | string | label | The spoken command; “<command> <number>” sets the value. |
value | number | — | Controlled value. Pair with onValueChange. |
onValueChange | (value: number) => void | — | Called when the value changes — by drag or by voice. |
style | StyleProp<ViewStyle> | — | Style override for the outer container. |
labelStyle | StyleProp<TextStyle> | — | Style override for the label text. |
Styling hooks
Style props and theme keys
| Hook | Type | Default | Description |
|---|---|---|---|
style / labelStyle | StyleProp | — | Direct overrides on the container and label. |
theme.interactive | token | — | Track fill and thumb color, from the active ListensTheme. Override via <ListensProvider theme={{ interactive: "…" }}>. |
theme.track | token | — | The unfilled track color. |
Behavior notes
- All frameworks: The value is set from speech only when the phrase starts with the command; a slider never reacts to a number spoken on its own.
- React Native: Dragging is implemented in pure RN — no extra native dependency to install.
