import { Slider } from "@brijbyte/md3-react/slider";@import "@brijbyte/md3-react/slider.css";One component covers every slider configuration Material Design 3 defines — continuous, discrete, centered, and range — instead of reaching for a different library each time the interaction changes.
Switch between free-form and stepped input without swapping components. Continuous
sliders (the default) accept any value in the range; discrete sliders snap to step
and show tick marks once you pass ticks.
Get a min/max range input for free — pass an array to value/defaultValue and the
slider renders one thumb per entry. getAriaLabel keeps each thumb individually
announced to assistive tech.
For balance, brightness offset, and other positive/negative controls, the meaningful
origin is the midpoint, not min. Set centered and the active track grows from that
midpoint toward the thumb instead of from the start.
Match a slider's presence to its context without hand-tuning dimensions: size picks
one of the five track/handle sizes straight off the spec table — xs (the default),
s, m, l, xl. Track height, handle height, and track corner radius scale
together, while handle width stays 4px at every size. m, l, and xl are tall enough
to take an inset icon; xs and s ignore it.
When a slider's value needs to read at a glance, flank it with icons that scale in
intensity from smallest on the left to largest on the right. This is plain layout
composition, not a component prop — compare it to the inset icon prop above.
A vertical xl slider with an inset icon, set inside a card with its own live value
readout next to the thumb, shows how far the public props alone take you in a real
layout.