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)}
    />
  )
}

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