Range filter · Pixel HD component

<hf-range>· loading

Trydrag either thumb or type a value.

Playground

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

Loading <hf-range>

Props

minremounts

maxremounts

stepremounts

lowremounts

highremounts

prefixremounts

dataremounts

scaleremounts

labelremounts

unit-labelremounts

nameremounts

<HfRange
  min={0}
  max={500}
  step={5}
  low={100}
  high={350}
  prefix="€"
  scale={3}
  label="Price per month"
  unitLabel="results"
  name="price"
/>

Installation

pnpm dlx shadcn@latest add @lumesec/hf-range

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-range.json

Usage

import { HfRange } from "@/components/lumesec/hf-range";

export function Example() {
  return (
    <HfRange name="price" label="Price per month" min={0} max={500} step={5} low={100} high={350} />
  );
}

Behaviour

Two thumbs over a dithered histogram. Bars inside the range light up, the result count rolls, and the min and max fields stay in sync both ways.

API reference

Attributes

minReact propminTypenumberDefault0

Lower bound of the scale.

maxReact propmaxTypenumberDefault500

Upper bound of the scale.

stepReact propstepTypenumberDefault5

Snap increment. Also the arrow-key step and the minimum gap between the two thumbs.

lowReact proplowTypenumber

Initial lower value. Defaults to min plus 20% of the range, rounded to step.

highReact prophighTypenumber

Initial upper value. Defaults to min plus 70% of the range, rounded to step.

prefixReact propprefixTypestringDefault€

Text before values in the Min and Max fields and in aria-valuetext. An empty attribute removes it.

dataReact propdataTypestring

Comma-separated bar heights for the histogram, spread evenly from min to max. Needs at least four numbers; otherwise a built-in demo distribution of 44 bars is used.

scaleReact propscaleTypenumberDefault3

Multiplier from the summed heights of the bars in range to the result count in the header.

labelReact proplabelTypestringDefaultPrice

Heading text.

unit-labelReact propunitLabelTypestringDefaultresults

Word after the result count.

nameReact propnameTypestring

Form field name. With a name, the form receives <name>-min and <name>-max.

Events

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

inputReact proponInputDetail{ min: number, max: number }

Fires on every value change: while dragging, on key presses and when a Min or Max field is committed.

changeReact proponChangeDetail{ min: number, max: number }

Fires when a drag ends, after each arrow, Page, Home or End key press, and when a Min or Max field is committed.

Properties

min (read-only)Typenumber

The min attribute, or 0.

max (read-only)Typenumber

The max attribute, or 500.

step (read-only)Typenumber

The step attribute, or 5.

bins (read-only)Typenumber[]

The histogram bar heights in use, from data or the demo distribution.

form (read-only)TypeHTMLFormElement | null

The owning form, from ElementInternals.

name (read-only)Typestring | null

The name attribute. There is no setter; set the attribute instead.

Keyboard

Keys	Action
ArrowRight / ArrowUp	Raise the focused thumb by `step`.
ArrowLeft / ArrowDown	Lower the focused thumb by `step`.
PageUp / PageDown	Move the focused thumb by a tenth of the range.
Home / End	Move the focused thumb to `min` or `max`, stopping one `step` from the other thumb.

Accessibility

Both thumbs are focusable with role="slider", aria-label Minimum or Maximum, aria-valuemin, aria-valuemax, aria-valuenow and an aria-valuetext that includes the prefix.
The Min and Max text fields carry matching aria-labels and inputmode="numeric".
The result count is an aria-live="polite" region.
Pressing on the track moves and focuses the nearest thumb. The histogram canvas is aria-hidden.
Form-associated through ElementInternals.
With name, submits two entries, <name>-min and <name>-max; without a name the internal value is low-high. There is no validation, and form reset and disabled are not handled.
Reduced motion: histogram bars switch between lit and unlit at once and the result count changes without the roll; the thumb glow still eases.

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 --border, --card, --foreground, --lumesec and --muted-foreground.

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

Notes

The host is display: block; the plot is 118px tall and fills the host's width.
Attributes are read when the element connects and are not observed. The thumbs always stay at least one step apart.
There is no value property; read the range from the input and change details or from the form data.
The Min and Max fields' native input events stay inside the shadow root; only the element's own input and change events, with min and max in detail, reach the host.

<hf-wheel>

Time picker wheelhf-wheel

<hf-chips>

Filter chipshf-chips

<hf-number>

Number stepperhf-number

<hf-swipe>

Slide to confirmhf-swipe

Related