Slider
listens-slider@listenssoft/speechui-angularA 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 Angular kit…
Hold anywhere and say:“volume to seventy”“volume 25”“volume zero”
Props
- default 0
- default 100
- default 1
- default command
- default false
Angular
Updates as you tick propsimport { Component } from "@angular/core";import { ListensSliderComponent } from "@listenssoft/speechui-angular";
@Component({ selector: "demo-slider", imports: [ListensSliderComponent], template: ` <listens-slider label="Volume" command="volume" [(value)]="volume" /> `,})export class DemoSlider { volume = 40;}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
Angular inputs & outputs for @listenssoft/speechui-angular.
Inputs
| Input | 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 of the range input. Spoken values are not snapped to step. |
listeningContent | string | command | Text shown as the label while the mic is open. |
disabled | boolean | false | Disables the range input. Forms setDisabledState toggles it too. |
Extra inputs
| Input | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Two-way bindable value — [(value)]. Also driven by ngModel / formControlName (the component is a ControlValueAccessor). |
command | string | label | The spoken command; “<command> <number>” sets the value. Falls back to label. |
label | string | "" | Label text above the slider; the command fallback. |
Outputs
| Output | Type | Default | Description |
|---|---|---|---|
valueChange | number | — | Emits on every value change (drag or speech) — the [(value)] two-way channel. |
matched | number | — | Emits when speech sets a value (the parsed, clamped number). |
Styling hooks
CSS hooks
| Hook | Type | Default | Description |
|---|---|---|---|
.listens-slider (root) | class | — | Same class convention as React: -label, -track, -input, -value parts. Styles are global (@layer listens); override with plain CSS. |
--listens-interactive | token | — | The fill/thumb color of the range input. Override on :root or any ancestor. See the theming guide. |
data-listening | attribute | — | Present on the root while the mic is open — style the listening state directly. |
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.
- Angular: Works with
[(ngModel)]and reactive forms out of the box (ControlValueAccessor). See the forms guide.
