Skip to main content

Slider

Slider — Prism component.

Signature
Density
Viewport
Theme follows the navbar ☀/☾ toggle
Live demo
Open ↗

When to use

Slider — Prism component.

Accessibility

Arrow keys adjust by step, Home/End jump to min/max; value is announced via aria-valuenow/aria-valuetext.

Import

const { Slider } = window.PrismDesignSystem_39d121;

Props

PropTypeRequiredDescription
labelstring
valuenumber
defaultValuenumber
minnumber
maxnumber
stepnumber
onChange(value: number) => void
formatValue(value: number) => stringFormat the displayed value, e.g. (v) => ${v}%.
isDisabledboolean
classNamestring