Slider · Pixel UI component · LumeSec Elements

<PxSlider />· loading

Playground

Change a prop and the component re-renders. Props marked remounts set an initial value, so the component starts over.

Loading <PxSlider />

Props

steplive

tickslive

prefixlive

unitlive

disabledlive

React

<PxSlider
  label="Monthly budget"
  min={0}
  max={500}
  step={10}
  defaultValue={120}
  prefix="€"
/>

Installation

pnpm dlx shadcn@latest add @lumesec/px-slider

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/px-slider.json

Usage

px-slider-example.tsx

import { PxSlider } from "@/components/lumesec/px-slider";

export function Example() {
  return <PxSlider name="budget" label="Monthly budget" min={0} max={500} step={10} defaultValue={120} prefix="€" />;
}

Behaviour

A general slider with a pixel track, a springy thumb, optional tick marks and a rolling value with prefix or unit.

API reference

Props

Also accepts every prop of <div> (React.ComponentProps<"div">), spread onto the root element.

valueTypenumber

Controlled value. Use with onValueChange. Snapped to step and clamped to min..max for display.

defaultValueTypenumberDefaultmin

Initial value when uncontrolled. A form reset restores it.

minTypenumberDefault0

Lowest value.

maxTypenumberDefault100

Highest value.

stepTypenumberDefault1

Increment. Its decimal places set the display precision.

ticksTypebooleanDefaultfalse

Draws a tick per step when there are 24 steps or fewer.

prefixTypestringDefault""

Text before the formatted value, for example €.

unitTypestringDefault""

Text after the formatted value, for example %.

labelTypeReact.ReactNode

Label above the track; also labels the thumb.

nameTypestring

Form field name; the value submits under it as a string.

disabledTypebooleanDefaultfalse

Dims the slider, ignores pointer and keyboard input and removes the thumb from the tab order.

onValueChangeType(value: number) => void

Called on every value change from dragging or keys.

onValueCommitType(value: number) => void

Called after each handled key press and when a drag ends, even if the value did not change.

Ref

ref points at the root HTMLDivElement.

Keyboard

Keys	Action
ArrowRight / ArrowUp	Increase by one step.
ArrowLeft / ArrowDown	Decrease by one step.
PageUp / PageDown	Change by a tenth of the range, snapped to `step`.
Home / End	Jump to `min` / `max`.

Accessibility

The thumb has role="slider", tabindex="0", aria-labelledby pointing at the label, aria-valuenow, aria-valuemin, aria-valuemax and an aria-valuetext with the formatted value, including prefix and unit.
Pressing anywhere on the track moves focus to the thumb.
The track canvas is aria-hidden.
With name, a hidden input submits the value as a string. There is no validation. Form reset restores defaultValue and calls onValueChange when that changes the value.
Reduced motion: the thumb moves to the value without the spring and the value label swaps without rolling.

Theming

Styled with Tailwind classes on your shadcn theme tokens, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --foreground, --muted-foreground, --lumesec and --lumesec-shine.

Notes

Values are formatted with en-US digit grouping, for example 1,200.
While dragging, the thumb follows the pointer exactly; a press without moving springs the thumb to the new value when released.

<px-input>

Text fieldpx-input

<px-password>

Passwordpx-password

<px-otp>

One-time codepx-otp

<px-search>

Search with resultspx-search

Related