Slider

Slider is a component used for allowing users to select a value from a range.

<Slider.Root defaultValue={50} />

Usage

import { Slider } from "@yamada-ui/react"

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

import { Slider } from "@workspaces/ui"

<Slider.Root>
  <Slider.Track>
    <Slider.Range />
    <Slider.Thumb />
  </Slider.Track>
  <Slider.Marks />
</Slider.Root>

Change Variant

<VStack>
  <For each={["outline", "solid"]}>
    {(variant) => (
      <Slider.Root key={variant} variant={variant} defaultValue={50} />
    )}
  </For>
</VStack>

Change Size

<VStack>
  <For each={["sm", "md", "lg"]}>
    {(size) => <Slider.Root key={size} size={size} defaultValue={50} />}
  </For>
</VStack>

Change Color Scheme

<VStack>
  <For each={["success", "warning"]}>
    {(colorScheme) => (
      <Slider.Root
        key={colorScheme}
        colorScheme={colorScheme}
        defaultValue={50}
      />
    )}
  </For>
</VStack>

Set Default Value

To set a default value, set a number to defaultValue.

<Slider.Root defaultValue={50} />

Set Minimum and Maximum Values

To set minimum and maximum values, set a number to min or max.

<Slider.Root defaultValue={50} min={0} max={200} />

Enable Range Selection

To enable range selection, set an array to defaultValue or value.

<Slider.Root defaultValue={[25, 75]} />

Set Minimum Distance

To set the minimum distance between thumbs, set a number to betweenThumbs.

<Slider.Root defaultValue={[25, 75]} betweenThumbs={25} />

Change Orientation

To change the orientation, set orientation to "horizontal" or "vertical". The default is "horizontal".

<Slider.Root defaultValue={50} orientation="vertical" h="xs" />

Use Marks

To use marks, set an array to marks.

const marks = useMemo(() => [25, 50, 75], [])

return (
  <VStack>
    <Slider.Root defaultValue={50} marks={marks} />

    <Slider.Root
      defaultValue={50}
      marks={[
        { value: 25, label: "25" },
        { value: 50, label: "50" },
        { value: 75, label: "75" },
      ]}
    />
  </VStack>
)

Change Shape

<VStack>
  <For each={["circle", "rounded", "square"]}>
    {(shape) => <Slider.Root key={shape} shape={shape} defaultValue={50} />}
  </For>
</VStack>

Disable

To disable the slider, set disabled to true.

<VStack>
  <For each={["outline", "solid"]}>
    {(variant) => (
      <Slider.Root key={variant} variant={variant} defaultValue={50} disabled />
    )}
  </For>
</VStack>

Read-Only

To make read-only, set readOnly to true.

<VStack>
  <For each={["outline", "solid"]}>
    {(variant) => (
      <Slider.Root key={variant} variant={variant} defaultValue={50} readOnly />
    )}
  </For>
</VStack>

Display Tooltips

const [value, setValue] = useState(50)

return (
  <Slider.Root value={value} onChange={setValue}>
    <Slider.Track>
      <Slider.Range />
      <Tooltip content={value}>
        <Slider.Thumb />
      </Tooltip>
    </Slider.Track>

    <Slider.Marks marks={[25, 50, 75]} />
  </Slider.Root>
)

If you use this code, you need to add "use client" to the top of the file.

Handle Start and End Events

To handle start and end events, use onChangeStart or onChangeEnd.

Value: 50, Start Value: 50, End Value: 50

const [value, onChange] = useState(50)
const [startValue, onChangeStart] = useState(50)
const [endValue, onChangeEnd] = useState(50)

return (
  <VStack>
    <Text>
      Value: {value}, Start Value: {startValue}, End Value: {endValue}
    </Text>

    <Slider.Root
      value={value}
      onChange={onChange}
      onChangeStart={onChangeStart}
      onChangeEnd={onChangeEnd}
    />
  </VStack>
)

If you use this code, you need to add "use client" to the top of the file.

Set Step Value

To set a step value, set a number to step.

<Slider.Root defaultValue={50} step={10} />

Customize Styling

<Slider.Root
  defaultValue={50}
  trackFill="red.bg"
  rangeFill="red.bg"
  thumbFill="red"
  trackSize="5"
/>

<Slider.Root defaultValue={50}>
  <Slider.Track>
    <Slider.Range />
    <Slider.Thumb>
      <AudioLinesIcon fontSize="sm" />
    </Slider.Thumb>
  </Slider.Track>
</Slider.Root>

Control

const [value, setValue] = useState(50)

return <Slider.Root value={value} onChange={setValue} />

If you use this code, you need to add "use client" to the top of the file.

Props

Slider.Root

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	`"md"`	`"lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`variant`	`"outline"`	`"outline" \| "solid"` The variant of the component.
`betweenThumbs`	`0`	`number` The minimum distance between slider thumbs. Useful for preventing the thumbs from being too close together.
`defaultValue`	-	`Y` The initial value of the slider.
`disabled`	`false`	`boolean` If `true`, the field will be disabled.
`getAriaValueText`	-	`(value: number, index: number) => string \| undefined` This is used to format the value so that screen readers can speak out a more human-friendly value. It is used to set the `aria-valuetext` property of the input.
`indicatorFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill color of the indicator.
`indicatorRounded`	-	`"-moz-initial" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "full" \| "inherit" \| "initial" \| "l1" \| "l2" ...` The rounded of the indicator.
`inputProps`	-	`SliderInputProps` Props for the input element.
`invalid`	`false`	`boolean` If `true`, the field will be invalid.
`marks`	-	`SliderMarksProps["marks"]` The marks to display on the slider.
`marksProps`	-	`Partial<SliderMarksProps>` Props for the marks element.
`max`	`100`	`number` The maximum allowed value of the slider. Cannot be less than min.
`min`	`0`	`number` The minimum allowed value of the slider. Cannot be greater than max.
`name`	-	`string` The name attribute of the hidden `input` field. This is particularly useful in forms.
`onChange`	-	`(value: Y) => void` Function called whenever the slider value changes.
`onChangeEnd`	-	`(value: Y) => void` Function called when the user is done selecting a new value.
`onChangeStart`	-	`(value: Y) => void` Function called when the user starts selecting a new value.
`rangeFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill color of the range.
`rangeProps`	-	`SliderRangeProps` Props for the range element.
`readOnly`	`false`	`boolean` If `true`, the field will be readonly.
`required`	`false`	`boolean` If `true`, the field will be required.
`step`	`1`	`number` The step in which increments or decrements have to be made.
`thumbFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill color of the thumb.
`thumbProps`	-	`SliderThumbProps` Props for the thumb element.
`thumbRounded`	-	`"-moz-initial" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "full" \| "inherit" \| "initial" \| "l1" \| "l2" ...` The rounded of the thumb.
`thumbSize`	-	`"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-fit-content" \| "-webkit-max-content" \| "0.5" \| "1.5" \| "1" \| "1/12" ...` The size of the thumb.
`thumbStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke color of the thumb.
`trackFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill color of the track.
`trackProps`	-	`SliderTrackProps` Props for the track element.
`trackRounded`	-	`"-moz-initial" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "full" \| "inherit" \| "initial" \| "l1" \| "l2" ...` The rounded of the track.
`trackSize`	-	`"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-fit-content" \| "-webkit-max-content" \| "0.5" \| "1.5" \| "1" \| "1/12" ...` The size of the track.
`value`	-	`Y` The value of the slider.

Slider.Mark

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`value`	-	`number` The value of the mark.
`indicator`	`true`	`boolean` Whether the mark is an indicator.

Slider.Marks

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`marks`	-	`(number \| { label: ReactNode; value: number; indicator?: boolean })[]` The marks to display on the slider.
`indicator`	`true`	`boolean` Whether the mark is an indicator.

Slider.Range

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Slider.Thumb

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`index`	-	`number` The index of the thumb.

Slider.Thumbs

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`index`	-	`number` The index of the thumb.

Slider.Track

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Accessibility

The Slider follows the WAI-ARIA - Slider Pattern for accessibility.

Key	Description	State
`ArrowRight`	Increases the value based on the `step` value.	-
`ArrowLeft`	Decreases the value based on the `step` value.	-
`ArrowUp`	Increases the value based on the `step` value.	-
`ArrowDown`	Decreases the value based on the `step` value.	-
`Home`	Sets the value to `min`.	-
`End`	Sets the value to `max`.	-
`PageUp`	Increases the value based on the `min` and `max` values.	-
`PageDown`	Decreases the value based on the `min` and `max` values.	-

ARIA Roles and Attributes

Component and Element	Roles and Attributes	Usage
`Slider.Thumb`	`role="slider"`	Indicates that this is a slider.
	`aria-label`	Sets `"Slider thumb"`.
	`aria-orientation`	Sets `"horizontal"` or `"vertical"` based on the `orientation` value. Default is `"horizontal"`.
	`aria-valuemin`	Sets the `min` value. Default is `0`.
	`aria-valuemax`	Sets the `max` value. Default is `100`.
	`aria-valuenow`	Sets the current value.
	`aria-valuetext`	Sets the current value.
	`aria-describedby`	If this is within a `Field.Root` and `Field.Root` has an `errorMessage`, `helperMessage`, or a `Field.ErrorMessage`, `Field.HelperMessage`, sets its `id`.
	`aria-readonly`	Set to `"true"` if `readOnly` is set.
	`aria-disabled`	Set to `"true"` if `disabled` is set.
	`aria-invalid`	Set to `"true"` if `invalid` is set.
	`aria-required`	Set to `"true"` if `required` is set.
`Slider.Mark`	`aria-hidden`	Excludes the element from the accessibility tree.
	`role="presentation"`	Indicates that this is a presentation.
`input`	`aria-hidden`	Excludes the element from the accessibility tree.
	`aria-describedby`	If this is within a `Field.Root` and `Field.Root` has an `errorMessage`, `helperMessage`, or a `Field.ErrorMessage`, `Field.HelperMessage`, sets its `id`.
	`aria-readonly`	Set to `"true"` if `readOnly` is set.
	`aria-disabled`	Set to `"true"` if `disabled` is set.
	`aria-invalid`	Set to `"true"` if `invalid` is set.
	`aria-required`	Set to `"true"` if `required` is set.

Similar Components

AlphaSlider is a component used to allow the user to select color transparency.

HueSlider is a component used to allow the user to select a color hue.

SaturationSlider is a component used to allow the user to select a color saturation.

Checkbox is a component used for allowing users to select multiple values from multiple options.

ColorSelector is a component used by the user to select a color.

Dropzone is a component used for uploading files via drag and drop.

Editable is a component used to obtain inline editable text input.

Field is a component used to group form elements with label, helper message, error message, etc.

Uses Components & Hooks

Field is a component used to group form elements with label, helper message, error message, etc.

useValue is a custom hook that combines useBreakpointValue and useColorModeValue.

Used By Components & Hooks

ColorSelector is a component used by the user to select a color.

HueSlider is a component used to allow the user to select a color hue.

SaturationSlider is a component used to allow the user to select a color saturation.