# Slider

> Pick a single value from a range by dragging or with the keyboard.

Category: Forms · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/slider

Use Slider when the exact value matters less than its position in a range, or when users benefit from immediate visual feedback, such as logo size or reminder frequency. When precise entry matters, pair it with a NumberInput or use NumberInput alone.

## Import

```tsx
import { Slider } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### Basic

```tsx
import { FormField, Slider } from '@bindshq/stance-react';

export function Basic() {
  return (
    <div style={{ width: '100%', maxWidth: 420 }}>
      <FormField label="Logo width" description="Applies to every signature in the template.">
        <Slider
          defaultValue={120}
          min={60}
          max={240}
          step={10}
          formatValue={(v) => `${v}px`}
          showValue
        />
      </FormField>
    </div>
  );
}
```

### Marks and labels

```tsx
import { FormField, Slider } from '@bindshq/stance-react';

export function Marks() {
  return (
    <div style={{ width: '100%', maxWidth: 420 }}>
      <FormField label="Reminder frequency">
        <Slider
          defaultValue={3}
          min={1}
          max={7}
          marks={[
            { value: 1, label: 'Daily' },
            { value: 3, label: '3 days' },
            { value: 7, label: 'Weekly' },
          ]}
          formatValue={(v) => (v === 1 ? 'every day' : `every ${v} days`)}
        />
      </FormField>
    </div>
  );
}
```

### Controlled with value display

```tsx
import * as React from 'react';
import { Slider } from '@bindshq/stance-react';

export function Controlled() {
  const [value, setValue] = React.useState(60);
  return (
    <div style={{ display: 'grid', gap: 12, width: '100%', maxWidth: 420 }}>
      <Slider
        aria-label="Banner opacity"
        value={value}
        onValueChange={setValue}
        formatValue={(v) => `${v}%`}
      />
      <span style={{ fontSize: 14 }}>Banner opacity: {value}%</span>
    </div>
  );
}
```

### Vertical

```tsx
import { Slider } from '@bindshq/stance-react';

export function Vertical() {
  return <Slider aria-label="Volume" orientation="vertical" defaultValue={40} showValue />;
}
```

## API reference

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Slider | `value` | `number` | None | Controlled value. |
| Slider | `defaultValue` | `number` | `min` | Initial value. |
| Slider | `onValueChange` | `(value: number) => void` | None | Called continuously while dragging. |
| Slider | `onValueCommit` | `(value: number) => void` | None | Called once when a drag ends or a key is pressed. |
| Slider | `min / max` | `number` | `0 / 100` | Range bounds. |
| Slider | `step` | `number` | `1` | Value granularity. |
| Slider | `largeStep` | `number` | `10% of range` | PageUp/PageDown increment. |
| Slider | `marks` | `SliderMark[] \| boolean` | None | Tick marks with optional labels; true marks every step. |
| Slider | `showValue` | `boolean \| 'always'` | `false` | Value bubble on hover/drag, or always. |
| Slider | `formatValue` | `(value: number) => string` | None | Formats the bubble and aria-valuetext. |
| Slider | `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Direction. |
| Slider | `size` | `'sm' \| 'md'` | `'md'` | Track and thumb size. |
| Slider | `name` | `string` | None | Submit with forms via a hidden input. |
| Slider | `disabled / invalid` | `boolean` | None | State. |

## Accessibility

- Implements the WAI-ARIA slider pattern: the thumb has role="slider" with aria-valuenow, min, max, orientation and aria-valuetext.
- Label it with FormField, aria-label or aria-labelledby; inside FormField the thumb is labelled and described automatically.
- Use formatValue so screen readers hear units ("45%", "3 days"), not bare numbers.
- The thumb has an enlarged invisible hit area for touch, and the track responds to taps anywhere.

## Keyboard

| Keys | Action |
| --- | --- |
| `ArrowRight` `ArrowUp` | Increase by one step. |
| `ArrowLeft` `ArrowDown` | Decrease by one step. |
| `PageUp` `PageDown` | Change by a large step. |
| `Home` `End` | Jump to the minimum or maximum. |

## Related

- https://stanceui.com/components/range-slider
- https://stanceui.com/components/number-input
- https://stanceui.com/components/progress