Effort slider · Pixel HD component

<hf-effort>· loading

Trydrag it to the far right.

Playground

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

Loading <hf-effort>

Props

valuelive

recommendedlive

nameremounts

<HfEffort value="high" recommended="medium" name="effort" />

Installation

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

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

Usage

import { HfEffort } from "@/components/lumesec/hf-effort";

export function Example() {
  return (
    <HfEffort name="effort" value="high" recommended="medium" />
  );
}

Same rules as the first one: below Ultracode it is a plain slider. At Ultracode it bursts, and a trail of light grows from the thumb toward the left, stopping three quarters along, with pulses running right to left. The level name rolls like a picker wheel.

API reference

Attributes

Selected level. Observed and reflected. An unknown value on connect selects ultracode; unknown values set later are ignored.

Level marked Recommended under the track. Any other value hides the marker. Observed.

nameReact propnameTypestring

Form field name.

Events

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

inputReact proponInputDetail{ value: string, index: number, label: string }

Fires each time the level changes during a drag or key press. label is the display name.

changeReact proponChangeDetail{ value: string, index: number, label: string }

Fires when a level is committed on pointer release or key press, if it differs from the last committed level.

ultracodeReact proponUltracodeDetail{}

Fires when the thumb settles on Ultracode after arriving from another level, including programmatic changes.

Properties

valueTypestring

Selected level id. Setting it writes the attribute.

Keyboard

Keys	Action
ArrowRight / ArrowUp	Next level.
ArrowLeft / ArrowDown	Previous level.
PageUp / PageDown	Two levels up or down.
Home / End	First or last level.

Accessibility

The track has role="slider", tabindex="0", aria-label="Effort", aria-valuemin="0", aria-valuemax="5", aria-valuenow as the level index and aria-valuetext as the level name.
The level name in the header is aria-hidden.
Submits the level id, for example high, under name. No validation; form reset does not change the value.
Reduced motion: the thumb jumps, there is no burst or sparks, the Ultracode trail is drawn once without moving pulses, and the level name swaps without rolling or shimmer.

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

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

Notes

Levels are fixed: Low, Medium, High, Extra (xhigh), Max and Ultracode.
The canvas extends 30px above and below the track and 8px to each side.

<hf-modes>

Mode pickerhf-modes

<hf-run>

Agent runhf-run

<hf-stream>

Streaming replyhf-stream

<hf-button>

Buttonhf-button

Related