# Slider

URL: https://ark-ui.com/docs/components/slider
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/slider.mdx

A control element that allows for a range of selections.

---

<ComponentPreview id="Slider" />

## Anatomy

To set up the slider correctly, you'll need to understand its anatomy and how we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

<Anatomy id="slider" />

## Examples

Learn how to use the `Slider` component in your project. Let's take a look at the most basic example:

**Example: basic**

#### React

```tsx
import { Slider } from '@ark-ui/react/slider'

export const Basic = () => {
  return (
    <Slider.Root>
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}

```

#### Solid

```tsx
import { Slider } from '@ark-ui/solid/slider'

export const Basic = () => {
  return (
    <Slider.Root>
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Slider } from '@ark-ui/vue/slider'
</script>

<template>
  <Slider.Root>
    <Slider.Label>Label</Slider.Label>
    <Slider.ValueText />
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb :index="0">
        <Slider.HiddenInput />
      </Slider.Thumb>
    </Slider.Control>
  </Slider.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Slider } from '@ark-ui/svelte/slider'
</script>

<Slider.Root>
  <Slider.Label>Label</Slider.Label>
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb index={0}>
      <Slider.HiddenInput />
    </Slider.Thumb>
  </Slider.Control>
</Slider.Root>

```

### Range Slider

You can add multiple thumbs to the slider by adding multiple `Slider.Thumb`

**Example: range**

#### React

```tsx
import { Slider } from '@ark-ui/react/slider'

export const Range = () => {
  return (
    <Slider.Root defaultValue={[5, 10]}>
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
        <Slider.Thumb index={1}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}

```

#### Solid

```tsx
import { Slider } from '@ark-ui/solid/slider'

export const Range = () => {
  return (
    <Slider.Root value={[5, 10]}>
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
        <Slider.Thumb index={1}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Slider } from '@ark-ui/vue/slider'
</script>

<template>
  <Slider.Root :defaultValue="[10, 20]">
    <Slider.Label>Label</Slider.Label>
    <Slider.ValueText />
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb :index="0">
        <Slider.HiddenInput />
      </Slider.Thumb>
      <Slider.Thumb :index="1">
        <Slider.HiddenInput />
      </Slider.Thumb>
    </Slider.Control>
  </Slider.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Slider } from '@ark-ui/svelte/slider'
</script>

<Slider.Root value={[5, 10]}>
  <Slider.Label>Label</Slider.Label>
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb index={0}>
      <Slider.HiddenInput />
    </Slider.Thumb>
    <Slider.Thumb index={1}>
      <Slider.HiddenInput />
    </Slider.Thumb>
  </Slider.Control>
</Slider.Root>

```

### Adding marks

You can add marks to the slider track by using the `Slider.MarkerGroup` and `Slider.Marker` components.

Position the `Slider.Marker` components relative to the track by providing the `value` prop.

**Example: with-marks**

#### React

```tsx
import { Slider } from '@ark-ui/react/slider'

export const WithMarks = () => {
  return (
    <Slider.Root>
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
      <Slider.MarkerGroup>
        <Slider.Marker value={0}>0</Slider.Marker>
        <Slider.Marker value={25}>*</Slider.Marker>
        <Slider.Marker value={50}>50</Slider.Marker>
        <Slider.Marker value={75}>*</Slider.Marker>
      </Slider.MarkerGroup>
    </Slider.Root>
  )
}

```

#### Solid

```tsx
import { Slider } from '@ark-ui/solid/slider'

export const WithMarks = () => {
  return (
    <Slider.Root>
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
      <Slider.MarkerGroup>
        <Slider.Marker value={0}>0</Slider.Marker>
        <Slider.Marker value={25}>*</Slider.Marker>
        <Slider.Marker value={50}>50</Slider.Marker>
        <Slider.Marker value={75}>*</Slider.Marker>
      </Slider.MarkerGroup>
    </Slider.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Slider } from '@ark-ui/vue/slider'
</script>

<template>
  <Slider.Root>
    <Slider.Label>Label</Slider.Label>
    <Slider.ValueText />
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb :index="0">
        <Slider.HiddenInput />
      </Slider.Thumb>
    </Slider.Control>
    <Slider.MarkerGroup>
      <Slider.Marker :value="0">0</Slider.Marker>
      <Slider.Marker :value="25">*</Slider.Marker>
      <Slider.Marker :value="50">50</Slider.Marker>
      <Slider.Marker :value="75">*</Slider.Marker>
    </Slider.MarkerGroup>
  </Slider.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Slider } from '@ark-ui/svelte/slider'
</script>

<Slider.Root>
  <Slider.Label>Label</Slider.Label>
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb index={0}>
      <Slider.HiddenInput />
    </Slider.Thumb>
  </Slider.Control>
  <Slider.MarkerGroup>
    <Slider.Marker value={0}>0</Slider.Marker>
    <Slider.Marker value={25}>*</Slider.Marker>
    <Slider.Marker value={50}>50</Slider.Marker>
    <Slider.Marker value={75}>*</Slider.Marker>
  </Slider.MarkerGroup>
</Slider.Root>

```

### Setting the initial value

To set the slider's initial value, set the `defaultValue` prop to the array of numbers.

**Example: initial-value**

#### React

```tsx
import { Slider } from '@ark-ui/react/slider'

export const InitialValue = () => (
  <Slider.Root defaultValue={[42]}>
    <Slider.Label>Label</Slider.Label>
    <Slider.ValueText />
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb index={0}>
        <Slider.HiddenInput />
      </Slider.Thumb>
    </Slider.Control>
    <Slider.MarkerGroup>
      <Slider.Marker value={0}>*</Slider.Marker>
      <Slider.Marker value={30}>*</Slider.Marker>
      <Slider.Marker value={60}>*</Slider.Marker>
    </Slider.MarkerGroup>
  </Slider.Root>
)

```

#### Solid

```tsx
import { Slider } from '@ark-ui/solid/slider'

export const InitialValue = () => (
  <Slider.Root value={[42]}>
    <Slider.Label>Label</Slider.Label>
    <Slider.ValueText />
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb index={0}>
        <Slider.HiddenInput />
      </Slider.Thumb>
    </Slider.Control>
    <Slider.MarkerGroup>
      <Slider.Marker value={0}>*</Slider.Marker>
      <Slider.Marker value={30}>*</Slider.Marker>
      <Slider.Marker value={60}>*</Slider.Marker>
    </Slider.MarkerGroup>
  </Slider.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Slider } from '@ark-ui/vue/slider'
</script>

<template>
  <Slider.Root :model-value="[42]">
    <Slider.Label>Label</Slider.Label>
    <Slider.ValueText />
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb :index="0">
        <Slider.HiddenInput />
      </Slider.Thumb>
    </Slider.Control>
    <Slider.MarkerGroup>
      <Slider.Marker :value="0">*</Slider.Marker>
      <Slider.Marker :value="30">*</Slider.Marker>
      <Slider.Marker :value="60">*</Slider.Marker>
    </Slider.MarkerGroup>
  </Slider.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Slider } from '@ark-ui/svelte/slider'
</script>

<Slider.Root defaultValue={[42]}>
  <Slider.Label>Label</Slider.Label>
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb index={0}>
      <Slider.HiddenInput />
    </Slider.Thumb>
  </Slider.Control>
  <Slider.MarkerGroup>
    <Slider.Marker value={0}>*</Slider.Marker>
    <Slider.Marker value={30}>*</Slider.Marker>
    <Slider.Marker value={60}>*</Slider.Marker>
  </Slider.MarkerGroup>
</Slider.Root>

```

### Specifying the minimum and maximum

By default, the minimum is `0` and the maximum is `100`. If that's not what you want, you can easily specify different
bounds by changing the values of the `min` and/or `max` props.

For example, to ask the user for a value between `-10` and `10`, you can use:

**Example: min-max**

#### React

```tsx
import { Slider } from '@ark-ui/react/slider'

export const MinMax = () => {
  return (
    <Slider.Root min={-10} max={10}>
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}

```

#### Solid

```tsx
import { Slider } from '@ark-ui/solid/slider'

export const MinMax = () => {
  return (
    <Slider.Root min={-10} max={10}>
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Slider } from '@ark-ui/vue/slider'
</script>

<template>
  <Slider.Root :min="-10" :max="10">
    <Slider.Label>Label</Slider.Label>
    <Slider.ValueText />
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb :index="0">
        <Slider.HiddenInput />
      </Slider.Thumb>
    </Slider.Control>
  </Slider.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Slider } from '@ark-ui/svelte/slider'
</script>

<Slider.Root min={-10} max={10}>
  <Slider.Label>Label</Slider.Label>
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb index={0}>
      <Slider.HiddenInput />
    </Slider.Thumb>
  </Slider.Control>
</Slider.Root>

```

### Setting the value's granularity

By default, the granularity, is `1`, meaning that the value is always an integer. You can change the step attribute to
control the granularity.

For example, If you need a value between `5` and `10`, accurate to two decimal places, you should set the value of step
to `0.01`:

**Example: step**

#### React

```tsx
import { Slider } from '@ark-ui/react/slider'

export const Step = () => {
  return (
    <Slider.Root step={0.01} min={5} max={10}>
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}

```

#### Solid

```tsx
import { Slider } from '@ark-ui/solid/slider'

export const Step = () => {
  return (
    <Slider.Root step={0.01} min={5} max={10}>
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Slider } from '@ark-ui/vue/slider'
</script>

<template>
  <Slider.Root :step="0.01" :min="5" :max="10">
    <Slider.Label>Label</Slider.Label>
    <Slider.ValueText />
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb :index="0">
        <Slider.HiddenInput />
      </Slider.Thumb>
    </Slider.Control>
  </Slider.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Slider } from '@ark-ui/svelte/slider'
</script>

<Slider.Root step={0.01} min={5} max={10}>
  <Slider.Label>Label</Slider.Label>
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb index={0}>
      <Slider.HiddenInput />
    </Slider.Thumb>
  </Slider.Control>
</Slider.Root>

```

### Listening for changes

When the slider value changes, the `onValueChange` and `onValueChangeEnd` callbacks are invoked. You can use this to set
up custom behaviors in your app.

**Example: on-event**

#### React

```tsx
import { Slider } from '@ark-ui/react/slider'

export const OnEvent = () => {
  return (
    <Slider.Root
      onValueChange={(details) => console.log(details.value)}
      onValueChangeEnd={(details) => console.log(details.value)}
    >
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}

```

#### Solid

```tsx
import { Slider } from '@ark-ui/solid/slider'

export const OnEvent = () => {
  return (
    <Slider.Root
      onValueChange={(details) => console.log(details.value)}
      onValueChangeEnd={(details) => console.log(details.value)}
    >
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Slider } from '@ark-ui/vue/slider'
</script>

<template>
  <Slider.Root
    @value-change="(details) => console.log(details.value)"
    @value-change-end="(details) => console.log(details.value)"
  >
    <Slider.Label>Label</Slider.Label>
    <Slider.ValueText />
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb :index="0">
        <Slider.HiddenInput />
      </Slider.Thumb>
    </Slider.Control>
  </Slider.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Slider, type SliderValueChangeDetails } from '@ark-ui/svelte/slider'

  const handleValueChange = (details: SliderValueChangeDetails) => {
    console.log('value changed:', details.value)
  }

  const handleValueChangeEnd = (details: SliderValueChangeDetails) => {
    console.log('value change ended:', details.value)
  }
</script>

<Slider.Root onValueChange={handleValueChange} onValueChangeEnd={handleValueChangeEnd}>
  <Slider.Label>Label</Slider.Label>
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb index={0}>
      <Slider.HiddenInput />
    </Slider.Thumb>
  </Slider.Control>
</Slider.Root>

```

### Changing the orientation

By default, the slider is assumed to be horizontal. To change the orientation to vertical, set the orientation property
in the machine's context to vertical.

In this mode, the slider will use the arrow up and down keys to increment/decrement its value.

> Don't forget to change the styles of the vertical slider by specifying its height

**Example: vertical**

#### React

```tsx
import { Slider } from '@ark-ui/react/slider'

export const Vertical = () => {
  return (
    <Slider.Root orientation="vertical">
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}

```

#### Solid

```tsx
import { Slider } from '@ark-ui/solid/slider'

export const Vertical = () => {
  return (
    <Slider.Root orientation="vertical">
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Slider } from '@ark-ui/vue/slider'
</script>

<template>
  <Slider.Root :default-value="[42]" orientation="vertical">
    <Slider.Label>Label</Slider.Label>
    <Slider.ValueText />
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb :index="0">
        <Slider.HiddenInput />
      </Slider.Thumb>
    </Slider.Control>
  </Slider.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Slider } from '@ark-ui/svelte/slider'
</script>

<Slider.Root orientation="vertical">
  <Slider.Label>Label</Slider.Label>
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb index={0}>
      <Slider.HiddenInput />
    </Slider.Thumb>
  </Slider.Control>
</Slider.Root>

```

### Changing the origin

By default, the slider's origin is at the start of the track. To change the origin to the center of the track, set the
`origin` prop to `center`.

**Example: center-origin**

#### React

```tsx
import { Slider } from '@ark-ui/react/slider'

export const CenterOrigin = () => {
  return (
    <Slider.Root origin="center">
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}

```

#### Solid

```tsx
import { Slider } from '@ark-ui/solid/slider'

export const CenterOrigin = () => {
  return (
    <Slider.Root origin="center">
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Slider } from '@ark-ui/vue/slider'
</script>

<template>
  <Slider.Root origin="center">
    <Slider.Label>Label</Slider.Label>
    <Slider.ValueText />
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb :index="0">
        <Slider.HiddenInput />
      </Slider.Thumb>
    </Slider.Control>
  </Slider.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Slider } from '@ark-ui/svelte/slider'
</script>

<Slider.Root origin="center" defaultValue={[50]}>
  <Slider.Label>Label</Slider.Label>
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb index={0}>
      <Slider.HiddenInput />
    </Slider.Thumb>
  </Slider.Control>
</Slider.Root>

```

### Using the Root Provider

The `RootProvider` component provides a context for the slider. It accepts the value of the `useSlider` hook. You can
leverage it to access the component state and methods from outside the slider.

**Example: root-provider**

#### React

```tsx
import { Slider, useSlider } from '@ark-ui/react/slider'

export const RootProvider = () => {
  const slider = useSlider()

  return (
    <>
      <button onClick={() => slider.focus()}>Focus</button>

      <Slider.RootProvider value={slider}>
        <Slider.Label>Label</Slider.Label>
        <Slider.ValueText />
        <Slider.Control>
          <Slider.Track>
            <Slider.Range />
          </Slider.Track>
          <Slider.Thumb index={0}>
            <Slider.HiddenInput />
          </Slider.Thumb>
        </Slider.Control>
      </Slider.RootProvider>
    </>
  )
}

```

#### Solid

```tsx
import { Slider, useSlider } from '@ark-ui/solid/slider'

export const RootProvider = () => {
  const slider = useSlider()

  return (
    <>
      <button onClick={() => slider().focus()}>Focus</button>

      <Slider.RootProvider value={slider}>
        <Slider.Label>Label</Slider.Label>
        <Slider.ValueText />
        <Slider.Control>
          <Slider.Track>
            <Slider.Range />
          </Slider.Track>
          <Slider.Thumb index={0}>
            <Slider.HiddenInput />
          </Slider.Thumb>
        </Slider.Control>
      </Slider.RootProvider>
    </>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Slider, useSlider } from '@ark-ui/vue/slider'

const slider = useSlider()
</script>

<template>
  <button @click="slider.focus()">Focus</button>

  <Slider.RootProvider :value="slider">
    <Slider.Label>Label</Slider.Label>
    <Slider.ValueText />
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb :index="0">
        <Slider.HiddenInput />
      </Slider.Thumb>
    </Slider.Control>
  </Slider.RootProvider>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Slider, useSlider } from '@ark-ui/svelte/slider'
  const id = $props.id()
  const slider = useSlider({ id })
</script>

<button onclick={() => slider().focus()}>Focus</button>

<Slider.RootProvider value={slider}>
  <Slider.Label>Label</Slider.Label>
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb index={0}>
      <Slider.HiddenInput />
    </Slider.Thumb>
  </Slider.Control>
</Slider.RootProvider>

```

> If you're using the `RootProvider` component, you don't need to use the `Root` component.

## API Reference

### Props

**Component API Reference**

#### React

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `aria-label` | `string[]` | No | The aria-label of each slider thumb. Useful for providing an accessible name to the slider |
| `aria-labelledby` | `string[]` | No | The `id` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `number[]` | No | The initial value of the slider when rendered.
Use when you don't need to control the value of the slider. |
| `disabled` | `boolean` | No | Whether the slider is disabled |
| `form` | `string` | No | The associate form of the underlying input element. |
| `getAriaValueText` | `(details: ValueTextDetails) => string` | No | Function that returns a human readable value for the slider thumb |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{
  root: string
  thumb: (index: number) => string
  hiddenInput: (index: number) => string
  control: string
  track: string
  range: string
  label: string
  valueText: string
  marker: (index: number) => string
}>` | No | The ids of the elements in the slider. Useful for composition. |
| `invalid` | `boolean` | No | Whether the slider is invalid |
| `max` | `number` | No | The maximum value of the slider |
| `min` | `number` | No | The minimum value of the slider |
| `minStepsBetweenThumbs` | `number` | No | The minimum permitted steps between multiple thumbs.

`minStepsBetweenThumbs` * `step` should reflect the gap between the thumbs.

- `step: 1` and `minStepsBetweenThumbs: 10` => gap is `10`
- `step: 10` and `minStepsBetweenThumbs: 2` => gap is `20` |
| `name` | `string` | No | The name associated with each slider thumb (when used in a form) |
| `onFocusChange` | `(details: FocusChangeDetails) => void` | No | Function invoked when the slider's focused index changes |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Function invoked when the value of the slider changes |
| `onValueChangeEnd` | `(details: ValueChangeDetails) => void` | No | Function invoked when the slider value change is done |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the slider |
| `origin` | `'center' | 'end' | 'start'` | No | The origin of the slider range. The track is filled from the origin
to the thumb for single values.
- "start": Useful when the value represents an absolute value
- "center": Useful when the value represents an offset (relative)
- "end": Useful when the value represents an offset from the end |
| `readOnly` | `boolean` | No | Whether the slider is read-only |
| `step` | `number` | No | The step value of the slider |
| `thumbAlignment` | `'center' | 'contain'` | No | The alignment of the slider thumb relative to the track
- `center`: the thumb will extend beyond the bounds of the slider track.
- `contain`: the thumb will be contained within the bounds of the track. |
| `thumbSize` | `{ width: number; height: number }` | No | The slider thumbs dimensions |
| `value` | `number[]` | No | The controlled value of the slider |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | root |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the slider |
| `[data-dragging]` | Present when in the dragging state |
| `[data-invalid]` | Present when invalid |
| `[data-focus]` | Present when focused |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | control |
| `[data-dragging]` | Present when in the dragging state |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the control |
| `[data-invalid]` | Present when invalid |
| `[data-focus]` | Present when focused |


**DraggingIndicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**DraggingIndicator Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | dragging-indicator |
| `[data-orientation]` | The orientation of the draggingindicator |
| `[data-state]` | "open" | "closed" |


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | label |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the label |
| `[data-invalid]` | Present when invalid |
| `[data-dragging]` | Present when in the dragging state |
| `[data-focus]` | Present when focused |


**MarkerGroup Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**MarkerGroup Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | marker-group |
| `[data-orientation]` | The orientation of the markergroup |


**Marker Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `number` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Marker Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | marker |
| `[data-orientation]` | The orientation of the marker |
| `[data-value]` | The value of the item |
| `[data-disabled]` | Present when disabled |
| `[data-state]` |  |


**Range Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Range Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | range |
| `[data-dragging]` | Present when in the dragging state |
| `[data-focus]` | Present when focused |
| `[data-invalid]` | Present when invalid |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the range |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseSliderReturn` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Thumb Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `index` | `number` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `name` | `string` | No |  |


**Thumb Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | thumb |
| `[data-index]` | The index of the item |
| `[data-name]` |  |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the thumb |
| `[data-focus]` | Present when focused |
| `[data-dragging]` | Present when in the dragging state |


**Track Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Track Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | track |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-dragging]` | Present when in the dragging state |
| `[data-orientation]` | The orientation of the track |
| `[data-focus]` | Present when focused |


**ValueText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ValueText Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | value-text |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the valuetext |
| `[data-invalid]` | Present when invalid |
| `[data-focus]` | Present when focused |


#### Solid

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `aria-label` | `string[]` | No | The aria-label of each slider thumb. Useful for providing an accessible name to the slider |
| `aria-labelledby` | `string[]` | No | The `id` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `number[]` | No | The initial value of the slider when rendered.
Use when you don't need to control the value of the slider. |
| `disabled` | `boolean` | No | Whether the slider is disabled |
| `form` | `string` | No | The associate form of the underlying input element. |
| `getAriaValueText` | `(details: ValueTextDetails) => string` | No | Function that returns a human readable value for the slider thumb |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{
  root: string
  thumb: (index: number) => string
  hiddenInput: (index: number) => string
  control: string
  track: string
  range: string
  label: string
  valueText: string
  marker: (index: number) => string
}>` | No | The ids of the elements in the slider. Useful for composition. |
| `invalid` | `boolean` | No | Whether the slider is invalid |
| `max` | `number` | No | The maximum value of the slider |
| `min` | `number` | No | The minimum value of the slider |
| `minStepsBetweenThumbs` | `number` | No | The minimum permitted steps between multiple thumbs.

`minStepsBetweenThumbs` * `step` should reflect the gap between the thumbs.

- `step: 1` and `minStepsBetweenThumbs: 10` => gap is `10`
- `step: 10` and `minStepsBetweenThumbs: 2` => gap is `20` |
| `name` | `string` | No | The name associated with each slider thumb (when used in a form) |
| `onFocusChange` | `(details: FocusChangeDetails) => void` | No | Function invoked when the slider's focused index changes |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Function invoked when the value of the slider changes |
| `onValueChangeEnd` | `(details: ValueChangeDetails) => void` | No | Function invoked when the slider value change is done |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the slider |
| `origin` | `'center' | 'start' | 'end'` | No | The origin of the slider range. The track is filled from the origin
to the thumb for single values.
- "start": Useful when the value represents an absolute value
- "center": Useful when the value represents an offset (relative)
- "end": Useful when the value represents an offset from the end |
| `readOnly` | `boolean` | No | Whether the slider is read-only |
| `step` | `number` | No | The step value of the slider |
| `thumbAlignment` | `'center' | 'contain'` | No | The alignment of the slider thumb relative to the track
- `center`: the thumb will extend beyond the bounds of the slider track.
- `contain`: the thumb will be contained within the bounds of the track. |
| `thumbSize` | `{ width: number; height: number }` | No | The slider thumbs dimensions |
| `value` | `number[]` | No | The controlled value of the slider |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | root |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the slider |
| `[data-dragging]` | Present when in the dragging state |
| `[data-invalid]` | Present when invalid |
| `[data-focus]` | Present when focused |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | control |
| `[data-dragging]` | Present when in the dragging state |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the control |
| `[data-invalid]` | Present when invalid |
| `[data-focus]` | Present when focused |


**DraggingIndicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'span'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**DraggingIndicator Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | dragging-indicator |
| `[data-orientation]` | The orientation of the draggingindicator |
| `[data-state]` | "open" | "closed" |


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'input'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'label'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | label |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the label |
| `[data-invalid]` | Present when invalid |
| `[data-dragging]` | Present when in the dragging state |
| `[data-focus]` | Present when focused |


**MarkerGroup Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**MarkerGroup Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | marker-group |
| `[data-orientation]` | The orientation of the markergroup |


**Marker Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `number` | Yes |  |
| `asChild` | `(props: ParentProps<'span'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Marker Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | marker |
| `[data-orientation]` | The orientation of the marker |
| `[data-value]` | The value of the item |
| `[data-disabled]` | Present when disabled |
| `[data-state]` |  |


**Range Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Range Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | range |
| `[data-dragging]` | Present when in the dragging state |
| `[data-focus]` | Present when focused |
| `[data-invalid]` | Present when invalid |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the range |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseSliderReturn` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Thumb Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `index` | `number` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `name` | `string` | No |  |


**Thumb Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | thumb |
| `[data-index]` | The index of the item |
| `[data-name]` |  |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the thumb |
| `[data-focus]` | Present when focused |
| `[data-dragging]` | Present when in the dragging state |


**Track Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Track Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | track |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-dragging]` | Present when in the dragging state |
| `[data-orientation]` | The orientation of the track |
| `[data-focus]` | Present when focused |


**ValueText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'span'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ValueText Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | value-text |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the valuetext |
| `[data-invalid]` | Present when invalid |
| `[data-focus]` | Present when focused |


#### Vue

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `aria-label` | `string[]` | No | The aria-label of each slider thumb. Useful for providing an accessible name to the slider |
| `aria-labelledby` | `string[]` | No | The `id` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `number[]` | No | The initial value of the slider when rendered.
Use when you don't need to control the value of the slider. |
| `dir` | `'ltr' | 'rtl'` | No | The document's text/writing direction. |
| `disabled` | `boolean` | No | Whether the slider is disabled |
| `form` | `string` | No | The associate form of the underlying input element. |
| `getAriaValueText` | `(details: ValueTextDetails) => string` | No | Function that returns a human readable value for the slider thumb |
| `getRootNode` | `() => Node | Document | ShadowRoot` | No | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{
  root: string
  thumb(index: number): string
  hiddenInput(index: number): string
  control: string
  track: string
  range: string
  label: string
  valueText: string
  marker(index: number): string
}>` | No | The ids of the elements in the slider. Useful for composition. |
| `invalid` | `boolean` | No | Whether the slider is invalid |
| `max` | `number` | No | The maximum value of the slider |
| `min` | `number` | No | The minimum value of the slider |
| `minStepsBetweenThumbs` | `number` | No | The minimum permitted steps between multiple thumbs. |
| `modelValue` | `number[]` | No | The v-model value of the slider |
| `name` | `string` | No | The name associated with each slider thumb (when used in a form) |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the slider |
| `origin` | `'start' | 'center'` | No | The origin of the slider range
- "start": Useful when the value represents an absolute value
- "center": Useful when the value represents an offset (relative) |
| `readOnly` | `boolean` | No | Whether the slider is read-only |
| `step` | `number` | No | The step value of the slider |
| `thumbAlignment` | `'center' | 'contain'` | No | The alignment of the slider thumb relative to the track
- `center`: the thumb will extend beyond the bounds of the slider track.
- `contain`: the thumb will be contained within the bounds of the track. |
| `thumbSize` | `{ width: number; height: number }` | No | The slider thumbs dimensions |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | root |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the slider |
| `[data-dragging]` | Present when in the dragging state |
| `[data-invalid]` | Present when invalid |
| `[data-focus]` | Present when focused |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | control |
| `[data-dragging]` | Present when in the dragging state |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the control |
| `[data-invalid]` | Present when invalid |
| `[data-focus]` | Present when focused |


**DraggingIndicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**DraggingIndicator Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | dragging-indicator |
| `[data-orientation]` | The orientation of the draggingindicator |
| `[data-state]` | "open" | "closed" |


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | label |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the label |
| `[data-invalid]` | Present when invalid |
| `[data-dragging]` | Present when in the dragging state |
| `[data-focus]` | Present when focused |


**MarkerGroup Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**MarkerGroup Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | marker-group |
| `[data-orientation]` | The orientation of the markergroup |


**Marker Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `number` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Marker Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | marker |
| `[data-orientation]` | The orientation of the marker |
| `[data-value]` | The value of the item |
| `[data-disabled]` | Present when disabled |
| `[data-state]` |  |


**Range Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Range Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | range |
| `[data-dragging]` | Present when in the dragging state |
| `[data-focus]` | Present when focused |
| `[data-invalid]` | Present when invalid |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the range |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `SliderApi<PropTypes>` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Thumb Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `index` | `number` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `name` | `string` | No |  |


**Thumb Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | thumb |
| `[data-index]` | The index of the item |
| `[data-name]` |  |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the thumb |
| `[data-focus]` | Present when focused |
| `[data-dragging]` | Present when in the dragging state |


**Track Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Track Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | track |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-dragging]` | Present when in the dragging state |
| `[data-orientation]` | The orientation of the track |
| `[data-focus]` | Present when focused |


**ValueText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ValueText Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | value-text |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the valuetext |
| `[data-invalid]` | Present when invalid |
| `[data-focus]` | Present when focused |


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `aria-label` | `string[]` | No | The aria-label of each slider thumb. Useful for providing an accessible name to the slider |
| `aria-labelledby` | `string[]` | No | The `id` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `number[]` | No | The initial value of the slider when rendered.
Use when you don't need to control the value of the slider. |
| `disabled` | `boolean` | No | Whether the slider is disabled |
| `form` | `string` | No | The associate form of the underlying input element. |
| `getAriaValueText` | `(details: ValueTextDetails) => string` | No | Function that returns a human readable value for the slider thumb |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{
  root: string
  thumb: (index: number) => string
  hiddenInput: (index: number) => string
  control: string
  track: string
  range: string
  label: string
  valueText: string
  marker: (index: number) => string
}>` | No | The ids of the elements in the slider. Useful for composition. |
| `invalid` | `boolean` | No | Whether the slider is invalid |
| `max` | `number` | No | The maximum value of the slider |
| `min` | `number` | No | The minimum value of the slider |
| `minStepsBetweenThumbs` | `number` | No | The minimum permitted steps between multiple thumbs.

`minStepsBetweenThumbs` * `step` should reflect the gap between the thumbs.

- `step: 1` and `minStepsBetweenThumbs: 10` => gap is `10`
- `step: 10` and `minStepsBetweenThumbs: 2` => gap is `20` |
| `name` | `string` | No | The name associated with each slider thumb (when used in a form) |
| `onFocusChange` | `(details: FocusChangeDetails) => void` | No | Function invoked when the slider's focused index changes |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Function invoked when the value of the slider changes |
| `onValueChangeEnd` | `(details: ValueChangeDetails) => void` | No | Function invoked when the slider value change is done |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the slider |
| `origin` | `'center' | 'end' | 'start'` | No | The origin of the slider range. The track is filled from the origin
to the thumb for single values.
- "start": Useful when the value represents an absolute value
- "center": Useful when the value represents an offset (relative)
- "end": Useful when the value represents an offset from the end |
| `readOnly` | `boolean` | No | Whether the slider is read-only |
| `ref` | `Element` | No |  |
| `step` | `number` | No | The step value of the slider |
| `thumbAlignment` | `'center' | 'contain'` | No | The alignment of the slider thumb relative to the track
- `center`: the thumb will extend beyond the bounds of the slider track.
- `contain`: the thumb will be contained within the bounds of the track. |
| `thumbSize` | `{ width: number; height: number }` | No | The slider thumbs dimensions |
| `value` | `number[]` | No | The controlled value of the slider |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | root |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the slider |
| `[data-dragging]` | Present when in the dragging state |
| `[data-invalid]` | Present when invalid |
| `[data-focus]` | Present when focused |


**Context Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `render` | `Snippet<[UseSliderContext]>` | No |  |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Control Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | control |
| `[data-dragging]` | Present when in the dragging state |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the control |
| `[data-invalid]` | Present when invalid |
| `[data-focus]` | Present when focused |


**DraggingIndicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'span'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**DraggingIndicator Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | dragging-indicator |
| `[data-orientation]` | The orientation of the draggingindicator |
| `[data-state]` | "open" | "closed" |


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'input'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'label'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | label |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the label |
| `[data-invalid]` | Present when invalid |
| `[data-dragging]` | Present when in the dragging state |
| `[data-focus]` | Present when focused |


**MarkerGroup Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**MarkerGroup Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | marker-group |
| `[data-orientation]` | The orientation of the markergroup |


**Marker Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `number` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'span'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Marker Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | marker |
| `[data-orientation]` | The orientation of the marker |
| `[data-value]` | The value of the item |
| `[data-disabled]` | Present when disabled |
| `[data-state]` |  |


**Range Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Range Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | range |
| `[data-dragging]` | Present when in the dragging state |
| `[data-focus]` | Present when focused |
| `[data-invalid]` | Present when invalid |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the range |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseSliderReturn` | Yes |  |
| `ref` | `Element` | No |  |


**Thumb Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `index` | `number` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `name` | `string` | No |  |
| `ref` | `Element` | No |  |


**Thumb Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | thumb |
| `[data-index]` | The index of the item |
| `[data-name]` |  |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the thumb |
| `[data-focus]` | Present when focused |
| `[data-dragging]` | Present when in the dragging state |


**Track Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Track Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | track |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-dragging]` | Present when in the dragging state |
| `[data-orientation]` | The orientation of the track |
| `[data-focus]` | Present when focused |


**ValueText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**ValueText Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | slider |
| `[data-part]` | value-text |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | The orientation of the valuetext |
| `[data-invalid]` | Present when invalid |
| `[data-focus]` | Present when focused |


### Context

These are the properties available when using `Slider.Context`, `useSliderContext` hook or `useSlider` hook.

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `value` | `number[]` | The value of the slider. |
| `dragging` | `boolean` | Whether the slider is being dragged. |
| `focused` | `boolean` | Whether the slider is focused. |
| `setValue` | `(value: number[]) => void` | Function to set the value of the slider. |
| `getThumbValue` | `(index: number) => number` | Returns the value of the thumb at the given index. |
| `setThumbValue` | `(index: number, value: number) => void` | Sets the value of the thumb at the given index. |
| `getValuePercent` | `(value: number) => number` | Returns the percent of the thumb at the given index. |
| `getPercentValue` | `(percent: number) => number` | Returns the value of the thumb at the given percent. |
| `getThumbPercent` | `(index: number) => number` | Returns the percent of the thumb at the given index. |
| `setThumbPercent` | `(index: number, percent: number) => void` | Sets the percent of the thumb at the given index. |
| `getThumbMin` | `(index: number) => number` | Returns the min value of the thumb at the given index. |
| `getThumbMax` | `(index: number) => number` | Returns the max value of the thumb at the given index. |
| `increment` | `(index: number) => void` | Function to increment the value of the slider at the given index. |
| `decrement` | `(index: number) => void` | Function to decrement the value of the slider at the given index. |
| `focus` | `VoidFunction` | Function to focus the slider. This focuses the first thumb. |


## Accessibility

Complies with the [Slider WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider/).

### Keyboard Support

<KeyBindingsTable id="slider" />