# Slider

Input to select a value from a given range.

---

## Default

```tsx
import { Slider } from '@vercel/geistcn/components';
import { useState, type JSX } from 'react';

export function Component(): JSX.Element {
  const [value, setValue] = useState([50]);
  return (
    <form>
      <Slider onValueChange={setValue} value={value} />
    </form>
  );
}
```

## Range with inputs

```tsx
import { Slider } from '@vercel/geistcn/components';
import { useState, type JSX } from 'react';

export function Component(): JSX.Element {
  const [value, setValue] = useState([50, 75]);
  return (
    <form>
      <Slider
        onValueChange={setValue}
        showEndInput
        showStartInput
        value={value}
      />
    </form>
  );
}
```

## Disabled range with inputs

```tsx
import { Slider } from '@vercel/geistcn/components';
import { useState, type JSX } from 'react';

export function Component(): JSX.Element {
  const [value, setValue] = useState([50, 75]);
  return (
    <form>
      <Slider
        disabled
        onValueChange={setValue}
        showEndInput
        showStartInput
        value={value}
      />
    </form>
  );
}
```

## Best Practices

* Use a slider for ranged numeric input where shape and proximity matter more than precision: bandwidth caps, opacity, audio volume, color channels.
* For exact values like a port number or memory limit, pair the slider with a numeric `Input`; keyboard users default to typing.
* Snap to a sensible step (`1`, `5`, `10%`) so dragging never produces values like `47.83291`. Clamp `min` and `max` to real product limits.
* Always render the live value next to the track in tabular nums, and label what the number represents (`Sample Rate · 44 kHz`). The track alone is not self-describing.
* Threshold colors (warning, error tints past a limit) should match the same numeric breakpoint surfaced elsewhere in the UI; don’t invent a slider-only threshold.
* Give the slider an accessible name through a sibling `<label htmlFor>` or `aria-label`, and let the native arrow-key, Page Up/Down, Home/End behavior do the keyboard work. Don’t intercept those keys.