Components

Slider

Range slider: the accent-filled track follows a thumb that swells on a snappy spring while dragged, with an optional value bubble floating above it.

Glow intensity — 40%. Drag and the bubble rides the thumb.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add slider

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { Slider } from "@lumora/ui/components/slider";
// or from the barrel:
import { Slider } from "@lumora/ui";

Props worth knowing

Controlled (value + onValueChange) or uncontrolled (defaultValue); min, max and step bound the range. bubble floats the value above the thumb while it is dragged or focused, and formatValue shapes its text. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.