# Slider

Picks a single value or a range by dragging.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Slider.tsx)

## Overview

A slider is a horizontal control for a single value or a range, built on Base UI Slider.

Add one `Thumb` per value, and give each thumb an `index` in a range slider.

## Examples

### Basic

```tsx
import { Slider, style } from '@tempoxyz/ds'
import { useState } from 'react'

export function Demo() {
  const [amount, setAmount] = useState(40)

  return (
    <Slider.Root aria-label="Amount" onValueChange={setAmount} value={amount} {...styles.root()}>
      <div {...styles.header()}>
        <span>Amount</span>
        <Slider.Value />
      </div>
      <Slider.Control>
        <Slider.Track>
          <Slider.Indicator />
          <Slider.Thumb aria-label="Amount" />
        </Slider.Track>
      </Slider.Control>
    </Slider.Root>
  )
}

namespace styles {
  export const header = style({
    display: 'flex',
    justifyContent: 'space-between',
    marginBottom: '2',
  })

  export const root = style({ maxWidth: '360px !custom' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Slider/Basic.tsx)

### Range

Pass an array to `defaultValue` or `value` and add one `Slider.Thumb` per value, each with its `index`.

```tsx
import { Slider, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Slider.Root aria-label="Range" defaultValue={[20, 70]} {...styles.root()}>
      <Slider.Control>
        <Slider.Track>
          <Slider.Indicator />
          <Slider.Thumb aria-label="Minimum" index={0} />
          <Slider.Thumb aria-label="Maximum" index={1} />
        </Slider.Track>
      </Slider.Control>
    </Slider.Root>
  )
}

namespace styles {
  export const root = style({ maxWidth: '360px !custom' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Slider/Range.tsx)

### Disabled

Set `disabled` to lock the slider at its current value.

```tsx
import { Slider, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Slider.Root aria-label="Locked" defaultValue={60} disabled {...styles.root()}>
      <Slider.Control>
        <Slider.Track>
          <Slider.Indicator />
          <Slider.Thumb aria-label="Locked" />
        </Slider.Track>
      </Slider.Control>
    </Slider.Root>
  )
}

namespace styles {
  export const root = style({ maxWidth: '360px !custom' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Slider/Disabled.tsx)

## Guidelines

TODO: Write guidelines for Slider.