Slider

ListensSlider@listenssoft/speechui-react

A 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 kit…

Hold anywhere and say:“volume to seventy”“volume 25”“volume zero”

React

Updates as you tick props

import { ListensSlider } from "@listenssoft/speechui-react";import { useState } from "react";
function Demo() {  const [volume, setVolume] = useState(40);  return (    <ListensSlider      label="Volume"      command="volume"      value={volume}      onChange={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 props for @listenssoft/speechui-react.

Props

Prop	Type	Default	Description
`min`	`number`	`0`	Lower bound. Spoken values below it are clamped up to it.
`max`	`number`	`100`	Upper bound. Spoken values above it are clamped down to it.
`step`	`number`	`1`	Drag increment of the underlying range input. Spoken values are not snapped to step — “volume 3.5” sets 3.5.
`listeningContent`	`ReactNode`	`command`	Content shown as the label while the mic is open — a place for a hint like “say: volume to seventy”.
`disabled`	`boolean`	`false`	Disables the range input. Speech matching still runs; disable listening at the provider if you need speech off too.

Extra props

Prop	Type	Default	Description
`command`	`string`	`label`	The spoken command. Say “<command> <number>” to set the value. Falls back to the label when omitted — effectiveCommand = command ?? label.
`label`	`string`	—	Label text shown above the slider. Doubles as the spoken command when command is omitted.
`value`	`number`	—	Controlled value. Pair with onChange.
`onChange`	`(value: number) => void`	—	Called when the value changes — by drag or by voice.
`onMatch`	`(value: number) => void`	—	Called when speech (not dragging) sets a value. Useful for confirmations or analytics distinct from onChange.
`className`	`string`	—	Extra class name(s) merged onto the root element.
`classNames`	`ListensSliderClassNames`	—	Per-part class overrides (label, listeningLabel, track, input, value). Each is appended after the component's own classes, so your rules win without extra specificity.

Styling hooks

classNames parts and CSS classes

Hook	Type	Default	Description
`classNames.label / .listens-slider-label`	`class`	—	The label element. listeningLabel is added alongside while the mic is open.
`classNames.track / .listens-slider-track`	`class`	—	The wrapper around the range input and value readout.
`classNames.input / .listens-slider-input`	`class`	—	The native range input.
`classNames.value / .listens-slider-value`	`class`	—	The current value readout.
`.listens-slider`	`class`	—	Root element. Default styles live in @layer listens, so any of your unlayered CSS wins without !important.