Slider

atom

Range input styled with Lucent tokens for selecting a numeric value within a bounded range. Supports controlled and uncontrolled usage, three sizes, and an inline value display.

"Add a Slider from lucent-ui with a label and showValue. Range 0–100, step 1."

Usage

React / JSX

import { Slider } from 'lucent-ui'

<Slider min={0} max={100} step={1} label="Slider" size="md" />

Installation

pnpm add lucent-ui

API Reference

Slider props — * required

Prop	Type	Default	Description
`min`	`number`	`0`	Minimum value.
`max`	`number`	`100`	Maximum value.
`step`	`number`	`1`	Increment step between values.
`value`	`number`	—	Controlled current value. Pair with onChange.
`defaultValue`	`number`	—	Initial value for uncontrolled usage. Defaults to the midpoint of min/max.
`onChange`	`(e: React.ChangeEvent<HTMLInputElement>) => void`	—	Called on every value change.
`label`	`string`	—	Visible label rendered above the track.
`showValue`	`boolean`	`false`	Displays the current numeric value beside the label.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Controls track thickness and thumb diameter.
`disabled`	`boolean`	`false`	Prevents interaction and dims the control.

← PreviousColorPicker Next →Checkbox

Slider

Sizes

Controlled with value display

Disabled

Usage

Installation

API Reference