# Slider
> Form-associated range slider with a dithered fill and a lens for a thumb that magnifies the dots beneath it.
- Element: `<hf-slider>`
- React: `import { HfSlider } from "@/components/lumesec/hf-slider"`
- Collection: Pixel HD (https://elements.lumesec.ai/components/pixel-hd)
- Registry item: https://elements.lumesec.ai/r/hf-slider.json
- Page: https://elements.lumesec.ai/components/pixel-hd/slider



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

```html
<hf-slider name="temp" label="Temperature" min="0" max="1" step="0.05" value="0.7"></hf-slider>
```

## 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-slider
```

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-slider.json
```

## Usage

React:

```tsx
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} />
  );
}
```

HTML:

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

<hf-slider name="temp" label="Temperature" min="0" max="1" step="0.05" value="0.7"></hf-slider>
```

## 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

| Attribute | React prop | Type     | Default | Description                                                                                                                         |
| --------- | ---------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| `value`   | `value`    | `number` | —       | Current value, clamped to `min`–`max` and snapped to `step`. Defaults to `min`. Observed and reflected back with the snapped value. |
| `min`     | `min`      | `number` | `0`     | Lower bound.                                                                                                                        |
| `max`     | `max`      | `number` | `100`   | Upper bound.                                                                                                                        |
| `step`    | `step`     | `number` | `1`     | Step size. Its decimal places also set the displayed precision.                                                                     |
| `prefix`  | `prefix`   | `string` | —       | Text before the displayed value, for example `$`.                                                                                   |
| `unit`    | `unit`     | `string` | —       | Text after the displayed value, for example ` ms`.                                                                                  |
| `label`   | `label`    | `string` | —       | Visible label; also names the slider through `aria-labelledby`.                                                                     |
| `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: number }` | Fires on every value change from a drag or key press. |
| `change` | `onChange` | `{ value: number }` | Fires on pointer release and on each key press.       |

### Properties

| Property           | Type     | Description                                                                                  |
| ------------------ | -------- | -------------------------------------------------------------------------------------------- |
| `value`            | `number` | Current value. Setting it clamps, snaps and reflects to the attribute without firing events. |
| `min` (read-only)  | `number` | Parsed `min`.                                                                                |
| `max` (read-only)  | `number` | Parsed `max`.                                                                                |
| `step` (read-only) | `number` | Parsed `step`.                                                                               |
| `frac` (read-only) | `number` | 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](/docs/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.