Slider

Used to allow users to make selections from a range of values.

import { Slider } from "@/components/ui/slider"

const Demo = () => {
  return <Slider width="200px" defaultValue={[40]} />
}

Setup

If you don't already have the snippet, run the following command to add the slider snippet

npx @chakra-ui/cli snippet add slider

The snippet includes a closed component composition for the Slider component.

Usage

import { Slider } from "@/components/ui/slider"

<Slider defaultValue={[40]} />

Examples

Sizes

Use the size prop to change the size of the slider.

slider - sm

slider - md

slider - lg

import { Stack } from "@chakra-ui/react"
import { Slider } from "@/components/ui/slider"

const Demo = () => {
  return (
    <Stack width="200px" gap="4">
      <Slider defaultValue={[40]} size="sm" label="slider - sm" />
      <Slider defaultValue={[40]} size="md" label="slider - md" />
      <Slider defaultValue={[40]} size="lg" label="slider - lg" />
    </Stack>
  )
}

Variants

Use the variant prop to change the visual style of the slider.

slider - outline

slider - solid

import { Stack } from "@chakra-ui/react"
import { Slider } from "@/components/ui/slider"

const Demo = () => {
  return (
    <Stack width="200px" gap="4">
      <Slider defaultValue={[40]} variant="outline" label="slider - outline" />
      <Slider defaultValue={[40]} variant="solid" label="slider - solid" />
    </Stack>
  )
}

Colors

Use the colorPalette prop to change the color of the slider.

import { Stack } from "@chakra-ui/react"
import { Slider } from "@/components/ui/slider"

const Demo = () => {
  return (
    <Stack gap="4" align="flex-start">
      <Slider width="200px" colorPalette="gray" defaultValue={[40]} />
      <Slider width="200px" colorPalette="blue" defaultValue={[40]} />
      <Slider width="200px" colorPalette="red" defaultValue={[40]} />
      <Slider width="200px" colorPalette="green" defaultValue={[40]} />
      <Slider width="200px" colorPalette="pink" defaultValue={[40]} />
      <Slider width="200px" colorPalette="teal" defaultValue={[40]} />
      <Slider width="200px" colorPalette="purple" defaultValue={[40]} />
      <Slider width="200px" colorPalette="cyan" defaultValue={[40]} />
    </Stack>
  )
}

Label

Use the label prop to add a label to the slider.

Quantity

import { Slider } from "@/components/ui/slider"

const Demo = () => {
  return <Slider label="Quantity" width="200px" defaultValue={[40]} />
}

Range Slider

Set the value or defaultValue prop to an array to create a range slider.

import { Slider } from "@/components/ui/slider"

const Demo = () => {
  return <Slider width="200px" defaultValue={[30, 60]} />
}

Controlled

Use the value and onValueChange props to control the value of the slider.

"use client"

import { Slider } from "@/components/ui/slider"
import { useState } from "react"

const Demo = () => {
  const [value, setValue] = useState([40])
  return (
    <Slider
      maxW="200px"
      value={value}
      onValueChange={(e) => setValue(e.value)}
    />
  )
}

Store

An alternative way to control the slider is to use the RootProvider component and the useSlider store hook.

This way you can access the slider state and methods from outside the slider.

current: 40

Slider

"use client"

import { Code, Slider, Stack, useSlider } from "@chakra-ui/react"

const Demo = () => {
  const slider = useSlider({
    defaultValue: [40],
    thumbAlignment: "center",
  })

  return (
    <Stack align="flex-start">
      <Code>current: {slider.value}</Code>
      <Slider.RootProvider value={slider} width="200px">
        <Slider.Label>Slider</Slider.Label>
        <Slider.Control>
          <Slider.Track>
            <Slider.Range />
          </Slider.Track>
          <Slider.Thumb index={0}>
            <Slider.HiddenInput />
          </Slider.Thumb>
        </Slider.Control>
      </Slider.RootProvider>
    </Stack>
  )
}

Hook Form

Here's an example of how to integrate a slider with react-hook-form.

"use client"

import { Stack } from "@chakra-ui/react"
import { zodResolver } from "@hookform/resolvers/zod"
import { Button } from "@/components/ui/button"
import { Field } from "@/components/ui/field"
import { Slider } from "@/components/ui/slider"
import { Controller, useForm } from "react-hook-form"
import { z } from "zod"

const formSchema = z.object({
  value: z.array(
    z
      .number({ message: "Value is required" })
      .min(60, { message: "Value must be greater than 60" }),
  ),
})

type FormValues = z.infer<typeof formSchema>

const Demo = () => {
  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>({
    resolver: zodResolver(formSchema),
    defaultValues: { value: [40] },
  })

  const onSubmit = handleSubmit((data) => console.log(data))

  return (
    <form onSubmit={onSubmit}>
      <Stack align="flex-start" gap="4" maxW="300px">
        <Controller
          name="value"
          control={control}
          render={({ field }) => (
            <Field
              label={`Slider: ${field.value[0]}`}
              invalid={!!errors.value?.length}
              errorText={errors.value?.[0]?.message}
            >
              <Slider
                width="full"
                onFocusChange={({ focusedIndex }) => {
                  if (focusedIndex !== -1) return
                  field.onBlur()
                }}
                name={field.name}
                value={field.value}
                onValueChange={({ value }) => {
                  field.onChange(value)
                }}
              />
            </Field>
          )}
        />

        <Button size="sm" type="submit">
          Submit
        </Button>
      </Stack>
    </form>
  )
}

Disabled

Use the disabled prop to disable the slider.

import { Slider } from "@/components/ui/slider"

const Demo = () => {
  return <Slider width="200px" disabled defaultValue={[40]} />
}

Change End

Use the onValueChangeEnd prop to listen to the end of the slider change.

onChange: 50onChangeEnd: 50

"use client"

import { Box, Code, Stack } from "@chakra-ui/react"
import { Slider } from "@/components/ui/slider"
import { useState } from "react"

const initialValue = [50]

const Demo = () => {
  const [value, setValue] = useState(initialValue)
  const [endValue, setEndValue] = useState(initialValue)

  return (
    <Box maxW="240px">
      <Slider
        value={value}
        onValueChange={(e) => setValue(e.value)}
        onValueChangeEnd={(e) => setEndValue(e.value)}
      />
      <Stack mt="3" gap="1">
        <Code>
          onChange: <b>{value}</b>
        </Code>
        <Code>
          onChangeEnd: <b>{endValue}</b>
        </Code>
      </Stack>
    </Box>
  )
}

Steps

Use the step prop to set the step value of the slider.

import { Slider } from "@/components/ui/slider"

const Demo = () => {
  return <Slider width="200px" defaultValue={[40]} step={10} />
}

Thumb Contained

Use the thumbAlignment and thumbSize prop to contain the thumb within the track.

import { Slider } from "@/components/ui/slider"

const Demo = () => {
  return (
    <Slider
      width="200px"
      thumbAlignment="contain"
      thumbSize={{ width: 16, height: 16 }}
      defaultValue={[40]}
    />
  )
}

Marks

Use the marks prop to display marks on the slider.

size = sm

size = md

size = lg

import { For, Stack, Text, VStack } from "@chakra-ui/react"
import { Slider } from "@/components/ui/slider"

const Demo = () => {
  return (
    <Stack gap="4">
      <For each={["sm", "md", "lg"]}>
        {(size) => (
          <VStack key={size} align="flex-start">
            <Slider
              key={size}
              size={size}
              width="200px"
              colorPalette="pink"
              defaultValue={[40]}
              marks={[0, 50, 100]}
            />
            <Text>size = {size}</Text>
          </VStack>
        )}
      </For>
    </Stack>
  )
}

You can also add labels to the marks using the marks prop.

import { Slider } from "@/components/ui/slider"

const Demo = () => {
  return (
    <Slider
      size="md"
      width="200px"
      colorPalette="pink"
      defaultValue={[40]}
      marks={[
        { value: 0, label: "0%" },
        { value: 50, label: "50%" },
        { value: 100, label: "100%" },
      ]}
    />
  )
}

Vertical

Use the orientation prop to change the orientation of the slider.

import { Slider } from "@/components/ui/slider"

const Demo = () => {
  return <Slider height="200px" orientation="vertical" defaultValue={[40]} />
}

Vertical with Marks

Here's an example of a vertical slider with marks.

import { Slider } from "@/components/ui/slider"

const Demo = () => {
  return (
    <Slider
      height="200px"
      orientation="vertical"
      colorPalette="pink"
      defaultValue={[40]}
      marks={[
        { value: 0, label: "0%" },
        { value: 50, label: "50%" },
        { value: 100, label: "100%" },
      ]}
    />
  )
}

Props

Prop	Default	Type
`max`	`'100'`	`number` The maximum value of the slider
`min`	`'0'`	`number` The minimum value of the slider
`minStepsBetweenThumbs`	`'0'`	`number` The minimum permitted steps between multiple thumbs.
`orientation`	`'horizontal'`	`'vertical' \| 'horizontal'` The orientation of the component
`origin`	`'\'start\''`	`'center' \| 'start'` The origin of the slider range - "start": Useful when the value represents an absolute value - "center": Useful when the value represents an offset (relative)
`step`	`'1'`	`number` The step value of the slider
`thumbAlignment`	`'\'contain\''`	`'center' \| 'contain'` 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.
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink' \| 'accent'` The color palette of the component
`size`	`'md'`	`'xs' \| 'sm' \| 'md' \| 'lg'` The size of the component
`variant`	`'outline'`	`'outline' \| 'subtle'` The variant of the component
`aria-label`		`string[]` The aria-label of each slider thumb. Useful for providing an accessible name to the slider
`aria-labelledby`		`string[]` The `id` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`defaultValue`		`number[]` The initial value of the slider when it is first rendered. Use when you do not need to control the state of the slider picker.
`disabled`		`boolean` Whether the slider is disabled
`form`		`string` The associate form of the underlying input element.
`getAriaValueText`		`(details: ValueTextDetails) => string` Function that returns a human readable value for the slider thumb
`id`		`string` 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 }>` The ids of the elements in the range slider. Useful for composition.
`invalid`		`boolean` Whether the slider is invalid
`name`		`string` The name associated with each slider thumb (when used in a form)
`onFocusChange`		`(details: FocusChangeDetails) => void` Function invoked when the slider's focused index changes
`onValueChange`		`(details: ValueChangeDetails) => void` Function invoked when the value of the slider changes
`onValueChangeEnd`		`(details: ValueChangeDetails) => void` Function invoked when the slider value change is done
`readOnly`		`boolean` Whether the slider is read-only
`thumbSize`		`{ width: number; height: number }` The slider thumbs dimensions
`value`		`number[]` The value of the range slider

Skeleton

Spinner

Slider

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}Setup

Setup