Slider
Range slider input
UI PrimitiveForm Inputs
Overview
Built on Radix UI's Slider primitive. Supports single and range values, an optional floating value tooltip, and tick labels derived from the step setting.
Usage
import { Slider } from "@leanicon/web-builder-library";Variants
Default
With steps
With step labels
020406080100
With value tooltip
Hover or drag to reveal the value tooltip above the thumb.
With persistent value
Range (two thumbs)
Range with value tooltips
Custom min/max
2000200520102015202020252030
Disabled
Notes
- Pass multiple values in the array for a range slider (two thumbs).
showLabelsgenerates tick labels frommin,max, andstep.showValueshows a floating tooltip on hover/focus;persistValuekeeps it always visible.- Dark mode is handled via semantic tokens.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
asChild | boolean | — | No | |
showLabels | boolean | false | No | |
showValue | boolean | false | No | |
persistValue | boolean | false | No |