form-field — wyrd.component.slider
Numeric range input with label, description, disabled state, clamped value behavior, and one canonical value-change event.
Install @wyrd-company/react or the Flutter package and use it directly —
your DESIGN.md does the styling.
$schema: https://thewyrdingway.dev/schemas/component-contract.schema.ymlcontractVersion: 0.1.0identity: name: Slider tag: wyrd-slider package: wyrd.component.slider title: Slider summary: Numeric range input with label, description, disabled state, clamped value behavior, and one canonical value-change event.relationships: related-to: - quality-parity-and-gatesclassification: category: form-field composition: multi-slot interactive: truetarget-strategy: react: required flutter: requiredsurface: properties: - name: value type: kind: number required: false controlled: true serializable: true summary: Controlled numeric value. - name: default-value type: kind: number required: false default: 0 serializable: true summary: Initial uncontrolled numeric value. - name: min type: kind: number required: false default: 0 serializable: true summary: Minimum allowed value. - name: max type: kind: number required: false default: 100 serializable: true summary: Maximum allowed value. - name: step type: kind: number required: false default: 1 serializable: true summary: Increment used by native slider keyboard and pointer adjustment. - name: is-disabled type: kind: boolean required: false default: false reflects: true serializable: true summary: Prevents changing value and exposes disabled platform semantics. slots: - name: label required: true cardinality: exactly-one accepts: - text summary: Visible label and accessible-name source. - name: description required: false cardinality: zero-or-one accepts: - text summary: Help text associated with the slider. events: - name: value-change payload: value: kind: number action: kind: action-ref bubbles: true composed: true cancelable: false summary: Canonical value-change event carrying the next numeric value. states: - name: default source: platform summary: Enabled slider state. - name: focus-visible source: platform summary: Keyboard-visible focus state. - name: disabled source: property summary: Disabled state derived from is-disabled. parts: - name: root summary: Field container. slots: - label - description - name: label summary: Label text. slots: - label - name: control summary: Native range control. - name: description summary: Description text. slots: - description tokens: root: gap: spacing.xs label: color: color.on-surface text: typography.label-md control: accent: color.primary track: color.outline thumb: color.primary disabled-opacity: opacity.disabled description: color: color.on-surface-variant text: typography.body-mdmessages: []obligations: accessibility: role: slider name: Label slot provides the accessible name. description: Description slot is programmatically associated with the control. keyboard: - Arrow keys adjust the value by step according to platform behavior. - Home moves value to min. - End moves value to max. - Tab moves focus into and out of the slider in document order. semantics: - Current value, min, max, and disabled state are exposed through platform semantics. behavior: model: input interactions: - Changing the slider emits value-change with the next numeric value. - Disabled sliders do not change value or emit value-change. - Controlled value wins over default-value. - Value is clamped to the inclusive min and max range. - When step does not divide the range evenly, native platform slider semantics determine reachable intermediate values. hostEffects: - Dispatch value-change event. - Bind value to SDUI form state when present. conditions: - rtl - reduced-motion - cvd-deuteranopia - density-compact - text-expansion sdui: status: serializable serializableProperties: - value - default-value - min - max - step - is-disabled serializableSlots: - label - description eventBindings: - value-change notes: Value-change serializes to a named binding/action channel; native slider semantics decide reachable values when step does not divide the range evenly.examples: - name: default state: default properties: default-value: 25 min: 0 max: 100 step: 5 slots: label: Volume description: Set the playback volume. - name: high-volume state: default properties: default-value: 75 min: 0 max: 100 step: 5 slots: label: Volume - name: disabled state: disabled properties: value: 40 is-disabled: true slots: label: Volume
Generated from the contract's examples block.
Previews are the published @wyrd-company/react component, themed by the
brand's role tokens — flip the site's light/dark toggle and they follow.
import { WyrdSlider } from "@wyrd-company/react";
<WyrdSlider defaultValue={25} min={0} max={100} step={5} label="Volume" description="Set the playback volume." />
// events: onValueChangeimport 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdSlider(
initialValue: 25,
min: 0,
max: 100,
step: 5,
label: Text('Volume'),
description: Text('Set the playback volume.'),
)
// events: onChangedimport { WyrdSlider } from "@wyrd-company/react";
<WyrdSlider defaultValue={75} min={0} max={100} step={5} label="Volume" />
// events: onValueChangeimport 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdSlider(
initialValue: 75,
min: 0,
max: 100,
step: 5,
label: Text('Volume'),
)
// events: onChangedimport { WyrdSlider } from "@wyrd-company/react";
<WyrdSlider value={40} isDisabled label="Volume" />
// events: onValueChangeimport 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdSlider(
value: 40,
isDisabled: true,
label: Text('Volume'),
)
// events: onChanged| Name | Type | Default | Summary |
|---|---|---|---|
value | number | undefined | Controlled numeric value. |
default-value | number | 0 | Initial uncontrolled numeric value. |
min | number | 0 | Minimum allowed value. |
max | number | 100 | Maximum allowed value. |
step | number | 1 | Increment used by native slider keyboard and pointer adjustment. |
is-disabled | boolean | false | Prevents changing value and exposes disabled platform semantics. |
| Slot | Cardinality | Accepts | Summary |
|---|---|---|---|
label | exactly-one | text | Visible label and accessible-name source. |
description | zero-or-one | text | Help text associated with the slider. |
| Event | Payload | Summary |
|---|---|---|
value-change | value, action | Canonical value-change event carrying the next numeric value. |
The contract's token bindings. Open the shared contextual sidebar from any example; primary swatches reflect the color you pick there. Error swatches show the active preset's values; editing any knob switches to custom and resets error to TWW · Ink.
| Binding | Token | |
|---|---|---|
root.gap | spacing.xs | |
label.color | color.on-surface | |
label.text | typography.label-md | |
control.accent | color.primary | |
control.track | color.outline | |
control.thumb | color.primary | |
control.disabled-opacity | opacity.disabled | |
description.color | color.on-surface-variant | |
description.text | typography.body-md |
| State | Source | Summary |
|---|---|---|
default | platform | Enabled slider state. |
focus-visible | platform | Keyboard-visible focus state. |
disabled | property | Disabled state derived from is-disabled. |
From the contract's accessibility obligations. Role slider; Label slot provides the accessible name.
Status: serializable. Value-change serializes to a named binding/action channel; native slider semantics decide reachable values when step does not divide the range evenly.
| Serializable | Members |
|---|---|
| Properties | value, default-value, min, max, step, is-disabled |
| Slots | label, description |
| Events | value-change |