Slider

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

'use client'

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

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

Anatomy

import { Slider } from '@saas-ui/react/slider'

<Slider defaultValue={[40]} />

Examples

Sizes

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

slider - sm

slider - md

slider - lg

'use client'

import { Stack } from '@chakra-ui/react'
import { Slider } from '@saas-ui/react'

export const SliderWithSizes = () => {
  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

'use client'

import { Stack } from '@chakra-ui/react'
import { Slider } from '@saas-ui/react'

export const SliderWithVariants = () => {
  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.

'use client'

import { Stack } from '@chakra-ui/react'
import { Slider } from '@saas-ui/react'

export const SliderWithColors = () => {
  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

'use client'

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

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

Range Slider

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

'use client'

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

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

Controlled

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

'use client'

import { useState } from 'react'

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

export const SliderControlled = () => {
  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, Field, Slider } from '@saas-ui/react'
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>

export const SliderWithHookForm = () => {
  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.Root invalid={!!errors.value?.length}>
              <Field.Label>Slider: ${field.value[0]}</Field.Label>
              <Slider
                width="full"
                onFocusChange={({ focusedIndex }) => {
                  if (focusedIndex !== -1) return
                  field.onBlur()
                }}
                name={field.name}
                value={field.value}
                onValueChange={({ value }) => {
                  field.onChange(value)
                }}
              />
              <Field.ErrorText>{errors.value?.[0]?.message}</Field.ErrorText>
            </Field.Root>
          )}
        />

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

Disabled

Use the disabled prop to disable the slider.

'use client'

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

export const SliderDisabled = () => {
  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 { useState } from 'react'

import { Box, Code, Stack } from '@chakra-ui/react'
import { Slider } from '@saas-ui/react'

const initialValue = [50]

export const SliderChangeEnd = () => {
  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.

'use client'

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

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

Thumb Contained

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

'use client'

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

export const SliderThumbContained = () => {
  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

'use client'

import { For, Stack, Text, VStack } from '@chakra-ui/react'
import { Slider } from '@saas-ui/react'

export const SliderWithMarks = () => {
  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>
  )
}

Vertical

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

'use client'

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

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

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;}Anatomy

Anatomy