Slider · Pixel HD component · LumeSec Elements

<hf-slider>· loading

Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

Loading <hf-slider>

Props

valuelive

minremounts

maxremounts

stepremounts

prefixremounts

unitremounts

labelremounts

nameremounts

<HfSlider
  value={0.7}
  min={0}
  max={1}
  step={0.05}
  label="Temperature"
  name="temp"
/>

Installation

pnpm dlx shadcn@latest add @lumesec/hf-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/hf-slider.json

Usage

import { HfSlider } from "@/components/lumesec/hf-slider";

export function Example() {
  return (
    <HfSlider name="temp" label="Temperature" min={0} max={1} step={0.05} value={0.7} />
  );
}

Behaviour

A dithered fill with a lens for a thumb: the dots under it are magnified, so you can see the exact position.

API reference

Attributes

valueReact propvalueTypenumber

Current value, clamped to min–max and snapped to step. Defaults to min. Observed and reflected back with the snapped value.

minReact propminTypenumberDefault0

Lower bound.

maxReact propmaxTypenumberDefault100

Upper bound.

stepReact propstepTypenumberDefault1

Step size. Its decimal places also set the displayed precision.

prefixReact propprefixTypestring

Text before the displayed value, for example $.

unitReact propunitTypestring

Text after the displayed value, for example ms.

labelReact proplabelTypestring

Visible label; also names the slider through aria-labelledby.

nameReact propnameTypestring

Form field name.

Events

Events bubble and cross the shadow boundary unless the description says otherwise.

inputReact proponInputDetail{ value: number }

Fires on every value change from a drag or key press.

changeReact proponChangeDetail{ value: number }

Fires on pointer release and on each key press.

Properties

valueTypenumber

Current value. Setting it clamps, snaps and reflects to the attribute without firing events.

min (read-only)Typenumber

Parsed min.

max (read-only)Typenumber

Parsed max.

step (read-only)Typenumber

Parsed step.

frac (read-only)Typenumber

Position of the value in the range, 0 to 1.

Keyboard

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

Accessibility

The track has role="slider" and tabindex="0" and is named by the label through aria-labelledby.
Sets aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext (formatted with prefix and unit) on every change.
Pressing on the track focuses it.
Submits the current value as a string under name. No validation; form reset does not change the value.
Reduced motion: the thumb jumps to the value without the spring and the value text swaps without rolling.

Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

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

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-fg, --ui-mono and --ui-muted.

Notes

min, max and step are not observed; the end labels under the track are set once on connect.

<hf-button>

Buttonhf-button

<hf-switch>

Switchhf-switch

<hf-segmented>

Segmented controlhf-segmented

<hf-input>

Text fieldhf-input

Related