Components · Forms & selection

Slider

A range control — a 6px track with a brand fill and a 20px thumb. A styled native range input, so dragging and keyboard work out of the box.

Preview

Light

Dark

Accessibility

Spec

Values and token references straight from the Zetta spec.

slider-track

backgroundColor: {colors.surface-muted}
height: 6px
borderRadius: {rounded.full}
position: relative
display: flex
alignItems: center
cursor: pointer
paddingY: 19px

slider-range

backgroundColor: {colors.brand}
height: 100%
borderRadius: {rounded.full}
position: absolute

slider-thumb

backgroundColor: {colors.canvas}
borderColor: {colors.brand}
borderWidth: 2px
width: 20px
height: 20px
borderRadius: {rounded.full}
shadow: {shadows.sm}
position: absolute
top: 50%
transform: translateY(-50%)
cursor: pointer

slider-thumb-focus

outline: 2px solid {colors.border-focus}
outlineOffset: 2px

Build with the skill

No package to install — hand this to your AI to generate the slider in your stack.

Prompt for your AI

Implement the Zetta "Slider" component in this project's stack using the zetta-design-md skill.

- Apply the `slider` spec from the skill (variants: track, range, thumb).
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.

Anatomy & rules

6px surface-muted track, brand range, 20px canvas thumb with a 2px brand ring and shadow-sm. Focus rings the thumb.
The fill is driven by --zd-slider-val — update it from JS on input for live tracking. Vertical padding keeps the hit area above 32px.

Known gaps

A range (two-thumb) slider and step markers are not yet specified.