Forms · core

Slider

field.slider

Slider: An input control that gathers, changes, or validates a value.

sliderthe dot you drag to change volumethe dot you drag along a linevolume controlrange sliderthe place you enter a value

States8

Touch target44px

Evidence6

Introduced by4 kits

Visual specimen

Same contract. Every kit voice.

Slider

MAVAN renderingdefault

Translation table

What code calls it.

Web<input type=range>The closest native or standardized web primitive.direct

ARIAsliderThe primary accessibility role or state pattern.direct

SwiftUISliderThe nearest named SwiftUI API.direct

AppKitNSSliderThe nearest named AppKit API.direct

Anatomy

Every part, named.

1Label
2Input surface
3Current value or placeholder
4Supporting or error text
5Focus and validation treatment

Often confused with

Similar shape. Different contract.

Bounded rangefield.range

Shares a visual family, but has a different role, state model, or interaction contract.

Numeric stepperfield.stepper

Shares a visual family, but has a different role, state model, or interaction contract.

Prompt · paste into your agent

Ask for the exact thing.

Implement the canonical Slider component (field.slider). Slider: An input control that gathers, changes, or validates a value. Support these states: default, hover, focus-visible, active, disabled, filled, error, loading. Use semantic design tokens rather than raw visual values. Preserve a minimum 44px touch target where interactive. Provide and verify: implementation, state-matrix, responsive, keyboard, touch, reduced-motion. Keep the component API stable so every Studio kit can supply its own rendering without changing the behavior contract.

Studio contract

What must be proven.

Required states

default · hover · focus-visible · active · disabled · filled · error · loading

Required evidence

implementation · state-matrix · responsive · keyboard · touch · reduced-motion

Source union

jade · lumen · aurora · cabana