Slider | Ark UI

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.

Examples

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

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

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

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

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

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

const Basic = () => {
  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.Thumb index={1} />
      </Slider.Control>
    </Slider.Root>
  )
}

Adding slider 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.

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

const WithMarks = () => {
  return (
    <Slider.Root defaultValue={[10, 60]}>
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb key={0} index={0} />
        <Slider.Thumb key={1} index={1} />
      </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>
  )
}

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

const WithMarks = () => {
  return (
    <Slider.Root>
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb key={0} index={0} />
      </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>
  )
}

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

const WithMarks = () => {
  return (
    <Slider.Root value={[10, 60]}>
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0} />
        <Slider.Thumb index={1} />
      </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.

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

const InitialValue = () => (
  <Slider.Root defaultValue={[9, 42]}>
    <Slider.Label>Label</Slider.Label>
    <Slider.ValueText />
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb key={0} index={0} />
      <Slider.Thumb key={1} index={1} />
    </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>
)

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

const InitialValue = () => (
  <Slider.Root defaultValue={[42]}>
    <Slider.Label>Label</Slider.Label>
    <Slider.ValueText />
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb key={0} index={0} />
    </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>
)

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

const InitialValue = () => (
  <Slider.Root value={[9, 42]}>
    <Slider.Label>Label</Slider.Label>
    <Slider.ValueText />
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb index={0} />
      <Slider.Thumb index={1} />
    </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:

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

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

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

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 key={0} index={0} />
      </Slider.Control>
    </Slider.Root>
  )
}

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

const MinMax = () => {
  return (
    <Slider.Root min={-10} max={10} value={[-5, 5]}>
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0} />
        <Slider.Thumb index={1} />
      </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:

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

const Step = () => {
  return (
    <Slider.Root step={0.01} min={5} max={10} defaultValue={[7.5, 8]}>
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb key={0} index={0} />
        <Slider.Thumb key={1} index={1} />
      </Slider.Control>
    </Slider.Root>
  )
}

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

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 key={0} index={0} />
      </Slider.Control>
    </Slider.Root>
  )
}

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

const Step = () => {
  return (
    <Slider.Root step={0.01} min={5} max={10} value={[7.5, 8]}>
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0} />
        <Slider.Thumb index={1} />
      </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.

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

const OnEvent = () => {
  return (
    <Slider.Root
      defaultValue={[5, 10]}
      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 key={0} index={0} />
        <Slider.Thumb key={1} index={1} />
      </Slider.Control>
    </Slider.Root>
  )
}

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

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 key={0} index={0} />
      </Slider.Control>
    </Slider.Root>
  )
}

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

const OnEvent = () => {
  return (
    <Slider.Root
      value={[5, 10]}
      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.Thumb index={1} />
      </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

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

const Vertical = () => {
  return (
    <Slider.Root orientation="vertical" defaultValue={[5, 60]}>
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb key={0} index={0} />
        <Slider.Thumb key={1} index={1} />
      </Slider.Control>
    </Slider.Root>
  )
}

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

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

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

const Vertical = () => {
  return (
    <Slider.Root orientation="vertical" value={[5, 60]}>
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0} />
        <Slider.Thumb index={1} />
      </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.

Story not available

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

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

Story not available

API Reference

Root

Prop	Type	Default
`aria-label`	`string[]`
`aria-labelledby`	`string[]`
`asChild`	`boolean`
`defaultValue`	`number[]`
`dir`	`'ltr' \| 'rtl'`	`"ltr"`
`disabled`	`boolean`
`form`	`string`
`getAriaValueText`	`(value: number, index: number) => string`
`getRootNode`	`() => Node \| ShadowRoot \| Document`
`id`	`string`
`ids`	`Partial<{ root: string thumb(index: number): string control: string track: string range: string label: string valueText: string marker(index: number): string }>`
`invalid`	`boolean`
`max`	`number`
`min`	`number`
`minStepsBetweenThumbs`	`number`
`name`	`string`
`onFocusChange`	`(details: FocusChangeDetails) => void`
`onValueChange`	`(details: ValueChangeDetails) => void`
`onValueChangeEnd`	`(details: ValueChangeDetails) => void`
`orientation`	`'horizontal' \| 'vertical'`
`origin`	`'center' \| 'start'`
`readOnly`	`boolean`
`step`	`number`
`thumbAlignment`	`'center' \| 'contain'`
`thumbSize`	`{ width: number; height: number }`
`value`	`number[]`

Label

Prop	Type	Default
`asChild`	`boolean`

Range

Prop	Type	Default
`asChild`	`boolean`

Thumb

Prop	Type	Default
`index`	`number`
`asChild`	`boolean`

Track

Prop	Type	Default
`asChild`	`boolean`

Marker

Prop	Type	Default
`value`	`number`
`asChild`	`boolean`

Control

Prop	Type	Default
`asChild`	`boolean`

ValueText

Prop	Type	Default
`asChild`	`boolean`

MarkerGroup

Prop	Type	Default
`asChild`	`boolean`