Skip to content

Slider

stable

Range input slider with min/max/step

Data EntryInteractive/Storybook ↗
import { Slider } from "@nodus/design-system"
Loading demo…

Props

label
Type stringDefault

Label text above the slider

showValue
Type booleanDefault

Display current value beside the label

min
Type numberDefault

Minimum range value

max
Type numberDefault

Maximum range value

step
Type numberDefault

Step increment

value
Type numberDefault

Controlled value

Metadatasemantictypeborder
MobileTouch Target

Thumb target should be ≥44px. The default thumb is 20px — increase to 28px on mobile using the size='lg' variant or CSS override.

Design Rationale

This component was designed to express:

Explore Related

Was this helpful?