# Effort slider
> Six-level effort slider; reaching Ultracode bursts and grows a trail of light behind the thumb. Form-associated.
- Element: `<hf-effort>`
- React: `import { HfEffort } from "@/components/lumesec/hf-effort"`
- Collection: Pixel HD (https://elements.lumesec.ai/components/pixel-hd)
- Registry item: https://elements.lumesec.ai/r/hf-effort.json
- Page: https://elements.lumesec.ai/components/pixel-hd/effort



Live preview: https://elements.lumesec.ai/view/hf-effort

```html
<hf-effort id="ef" name="effort" value="high" recommended="medium"></hf-effort>
```

## Playground

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

## Installation

```bash
npx shadcn@latest add @lumesec/hf-effort
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/hf-effort.json
```

## Usage

React:

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

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

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/hf-effort.js"></script>

<hf-effort id="ef" name="effort" value="high" recommended="medium"></hf-effort>
```

## Behaviour

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

| Attribute     | React prop    | Type                                                 | Default     | Description                                                                                                                    |
| ------------- | ------------- | ---------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------ |
| `value`       | `value`       | `low \| medium \| high \| xhigh \| max \| ultracode` | `ultracode` | Selected level. Observed and reflected. An unknown value on connect selects `ultracode`; unknown values set later are ignored. |
| `recommended` | `recommended` | `low \| medium \| high \| xhigh \| max \| ultracode` | `medium`    | Level marked `Recommended` under the track. Any other value hides the marker. Observed.                                        |
| `name`        | `name`        | `string`                                             | —           | Form field name.                                                                                                               |

### Events

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

| Event       | React prop    | Detail                                            | Description                                                                                                   |
| ----------- | ------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| `input`     | `onInput`     | `{ value: string, index: number, label: string }` | Fires each time the level changes during a drag or key press. `label` is the display name.                    |
| `change`    | `onChange`    | `{ 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. |
| `ultracode` | `onUltracode` | `{}`                                              | Fires when the thumb settles on Ultracode after arriving from another level, including programmatic changes.  |

### Properties

| Property | Type     | Description                                         |
| -------- | -------- | --------------------------------------------------- |
| `value`  | `string` | 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](/docs/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.