Slider

An input for selecting a numeric value, or range of values, from within a range.

$bunx shadcn@latest add @nx-ui/slider
Registry item
Installs withutils
Used byisochrone-toollistings-filterstransfer-preview

Basic

An uncontrolled slider with a single thumb; set defaultValue to seed the starting position.

Controlled

Drive `value` and `onValueChange` yourself to reflect the moisture target for a compost windrow elsewhere on the page.

55%

Windrow 4 is aerated automatically once moisture drops below 45%.

Range (two thumbs)

Pass an array of two values to `defaultValue` or `value` to render a min/max range slider.

20 – 65

Loads outside this range are flagged for manual review before composting.

Step & orientation

step snaps to increments; orientation="vertical" renders the control top-to-bottom.

Step of 10
Vertical

Disabled

Disabled sliders dim and stop responding to pointer or keyboard input.

Composition: intake batch controls

Sliders paired with Field and a live-value Badge, configuring the accepted contamination and temperature range for a new intake batch at Hartfield Composting Site.

Contamination tolerance

Batch WM-2291 is rejected above the upper bound and re-routed to Ashdown Transfer Station.

0% – 8% by weight
Windrow turn temperature

Turning triggers automatically once the core reaches this threshold.

55°C
Gate fee per tonne

Applied to haulier invoices for organic waste received at the site.

£28 / tonne

API reference

Exported parts and their props, extracted from the component source.

…extends SliderPrimitive.Root.Props