Inputs

Slider

Ink range fill, thumb halo on hover/focus/drag, optional value tooltip and labelled marks.

Live example

Each family is its own entry point, so a page loads only what it uses.

tsx

import { Slider } from "@nibapp/ui/components/slider";

Each component's own props and variants, read from its source. What it also takes from an element or a Base UI part is named below its table.

Ink-filled slider. Pass an array value for a range. `tooltip="active"` floats the value over the thumb while hovered, focused or dragged.

Prop	Type	Default	Description
size	"sm" \| "md"	"md"
tooltip	"never" \| "active" \| "always"	"never"
label	ReactNode	—	Visible label above the track.
showValue	boolean	false	Show the formatted value(s) opposite the label.
formatValue	(value: number) => string	—	Formats values for the header, tooltip and screen readers. Defaults to `Intl.NumberFormat`.
thumbLabels	readonly string[]	—	Accessible names per thumb, e.g. `["Minimum", "Maximum"]`. A single thumb is named by the slider's `aria-label`; a range keeps it on the group.
marks	readonly SliderMark[]	—	Snap points rendered as ticks (and labels) along the track.

Also takes the props of Base UI's Slider.Root, except children.