Slider

A slider is an input control that allows users to adjust a single value or a value range along a defined linear scale. It provides a draggable handle mapped to a continuous or discrete interval.

import {Slider} from "@qualcomm-ui/react/slider"

Usage

Sliders allow users to select a value or range from a continuous or discrete set by moving an indicator (thumb) along a track. They are best used for settings that reflect a range of values rather than precise input.

Examples

Simple

Use the simple API to create a slider using minimal markup.

Choose a value25

Some contextual help here

<Slider
  className="sm:w-80"
  defaultValue={[25]}
  hint="Some contextual help here"
  label="Choose a value"
/>

Composite

Build with the composite API for granular control. This API requires you to provide each subcomponent, but gives you full control over the structure and layout.

Choose a value25

Some contextual help here

<Slider.Root className="sm:w-80" defaultValue={[25]}>
  <Slider.Label>Choose a value</Slider.Label>
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumbs />
  </Slider.Control>
  <Slider.Hint>Some contextual help here</Slider.Hint>
  <Slider.Markers />
</Slider.Root>

Min/Max/Step

The min, max, and step props control the slider's value range and increments:

min: The minimum value of the slider (default is 0).
max: The maximum value of the slider (default is 100).
step: The increment/decrement step value (default is 1).

<Slider
  className="sm:w-80"
  defaultValue={[50]}
  max={70}
  min={20}
  step={5}
/>

Origin

Use origin to control where the track is filled from for single-value sliders:

start: Fills from the start of the track to the thumb. Useful when the value represents an absolute value (default).
center: Fills from the center of the track to the thumb. Useful when the value represents an offset or relative value.
end: Fills from the end of the track to the thumb. Useful when the value represents an offset from the end.

Start (default)50

Center50

End50

<Slider
  className="sm:w-80"
  defaultValue={[50]}
  label="Start (default)"
  origin="start"
/>
<Slider
  className="sm:w-80"
  defaultValue={[50]}
  label="Center"
  origin="center"
/>
<Slider
  className="sm:w-80"
  defaultValue={[50]}
  label="End"
  origin="end"
/>

Use the tooltip prop to display the slider's value in a tooltip rather than above the component.

<Slider className="mt-3 sm:w-80" defaultValue={[25]} tooltip />

Display

You can customize the tooltip's content by using the composite API and passing a function to display on the SliderThumbIndicator component.

From 25%

To 65%

import type {ReactElement} from "react"

import {Slider} from "@qualcomm-ui/react/slider"

export function SliderTooltipDisplayDemo(): ReactElement {
  return (
    <Slider.Root className="mt-3 sm:w-80" defaultValue={[25, 65]}>
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
          <Slider.ThumbIndicator display={(value) => `From ${value}%`} />
        </Slider.Thumb>
        <Slider.Thumb index={1}>
          <Slider.HiddenInput />
          <Slider.ThumbIndicator display={(value) => `To ${value}%`} />
        </Slider.Thumb>
      </Slider.Control>
      <Slider.Markers />
    </Slider.Root>
  )
}

Markers

Track Markers

By default, the component generates 11 marks based on the slider's min and max values. provide your own set of marks by passing them in an array to the marks prop.

<Slider
  className="sm:w-80"
  defaultValue={[30]}
  marks={[20, 30, 40, 50, 60, 70]}
  max={70}
  min={20}
/>

Side Markers

For more compact designs, you can display the min and max markers at the ends of the track using the sideMarkers prop.

<Slider
  className="sm:w-80"
  defaultValue={[30]}
  max={70}
  min={20}
  sideMarkers
/>

Range

Set the value or defaultValue prop with two values to create a range slider.

20 - 50

<Slider className="sm:w-80" defaultValue={[20, 50]} />

Minimum Steps Between Thumbs

To prevent overlapping thumbs, you can use the minStepsBetweenThumbs prop to set a minimum distance between them.

20 - 50

<Slider
  className="sm:w-80"
  defaultValue={[20, 50]}
  minStepsBetweenThumbs={10}
/>

Display

By default, range values are displayed separated by a dash (-). You can customize this by passing a separator string or a function to the display prop.

from 20 to 50

<Slider
  className="sm:w-80"
  defaultValue={[20, 50]}
  display={(values) => `from ${values[0]} to ${values[1]}`}
/>

Size

Set the size prop to adjust the size of the thumbs. Available sizes are sm (small) and md (medium, default).

import type {ReactElement} from "react"

import {Slider} from "@qualcomm-ui/react/slider"

export function SliderSizeDemo(): ReactElement {
  return <Slider className="sm:w-80" defaultValue={[50]} size="sm" />
}

Variant

Set the variant prop to adjust the visual style of the slider. Available variants are neutral and primary (default).

<Slider className="sm:w-80" defaultValue={[50]} variant="neutral" />

Hint

Use the hint prop to add additional guidance or context to the user below the slider.

Additional context

<Slider className="sm:w-80" defaultValue={[50]} hint="Additional context" />

Disabled

Use the disabled prop to prevent user interaction.

<Slider className="sm:w-80" defaultValue={[50]} disabled />

Focus Callback

The onFocusChange prop allows you to listen for focus events on the slider's thumbs.

25 - 75

currently focused: none

<Slider
  defaultValue={[25, 75]}
  onFocusChange={(e) => {
    setCurrentOutput(
      e.focusedIndex === -1 ? "none" : `thumb ${e.focusedIndex}`,
    )
  }}
/>

Controlled State

Use value and onValueChange or onValueChangeEnd to control the value of the slider. This allows for more complex interactions and integration with form libraries.

25 - 75

live value: 25, 75final value: 25, 75

<Slider
  onValueChange={(e) => {
    setValue(e.value)
  }}
  onValueChangeEnd={(e) => {
    setFinalValue(e.value)
  }}
  value={value}
/>

Forms

Choose the form library that fits your needs—we've built examples with React Hook Form and Tanstack Form to get you started.

React Hook Form

Use React Hook Form to handle the slider state and validation. ArkType works great for schema validation if you need it.

import type {ReactElement} from "react"

import {arktypeResolver} from "@hookform/resolvers/arktype"
import {type} from "arktype"
import {Controller, useForm} from "react-hook-form"

import {Button} from "@qualcomm-ui/react/button"
import {Slider} from "@qualcomm-ui/react/slider"

interface FormData {
  minMaxNumber: number
  minRange: [number, number]
}

const minMaxNumber = type("20 <= number <= 80").configure({
  message: "Value must be between 20 and 80",
})

const minRange = type(["number", "number"])
  .narrow((values: [number, number]) => Math.abs(values[0] - values[1]) >= 30)
  .configure({
    message: "Range must be at least 30",
  })

const FormSchema = type({
  minMaxNumber,
  minRange,
})

export function SliderReactHookFormDemo(): ReactElement {
  const {control, handleSubmit} = useForm<FormData>({
    defaultValues: {
      minMaxNumber: 30,
      minRange: [30, 70],
    },
    mode: "onChange",
    resolver: arktypeResolver(FormSchema),
  })

  return (
    <form
      className="flex flex-col gap-10 sm:w-80"
      onSubmit={(e) => {
        void handleSubmit((data) => console.log(data))(e)
      }}
    >
      <Controller
        control={control}
        name="minMaxNumber"
        render={({
          field: {onChange, value, ...fieldProps},
          fieldState: {error},
        }) => {
          return (
            <Slider
              errorText={error?.message}
              hint="Between 20 and 80"
              invalid={!!error?.message}
              label="Select a value"
              onValueChange={({value}: {value: number[]}) => {
                return onChange(value[0])
              }}
              value={[value]}
              {...fieldProps}
            />
          )
        }}
      />
      <Controller
        control={control}
        name="minRange"
        render={({
          field: {onChange, value, ...fieldProps},
          fieldState: {error},
        }) => {
          return (
            <Slider
              errorText={error?.message}
              hint="At least 30"
              invalid={!!error?.message}
              label="Select a range"
              onValueChange={({value}: {value: number[]}) => {
                return onChange(value)
              }}
              value={value}
              {...fieldProps}
            />
          )
        }}
      />
      <Button
        className="mt-1"
        emphasis="primary"
        size="sm"
        type="submit"
        variant="fill"
      >
        Submit
      </Button>
    </form>
  )
}

Tanstack Form

Tanstack Form handles slider validation with its built-in validators.

import type {ReactElement} from "react"

import {useForm} from "@tanstack/react-form"

import {Button} from "@qualcomm-ui/react/button"
import {Slider} from "@qualcomm-ui/react/slider"

interface FormData {
  minMaxNumber: number
  minRange: [number, number]
}

const defaultFormData: FormData = {
  minMaxNumber: 30,
  minRange: [30, 70],
}

const minmaxErrorMessage = "Value must be between 20 and 80"
const minRangeErrorMessage = "Range must be at least 30"

export function SliderTanstackFormDemo(): ReactElement {
  const form = useForm({
    defaultValues: defaultFormData,
    onSubmit: (data) => console.log(data.value),
  })

  const isInRange = (value: number) => value >= 20 && value <= 80
  const isRangeAtLeast30 = (value: [number, number]) =>
    Math.abs(value[0] - value[1]) >= 30

  return (
    <form
      className="flex flex-col gap-10 sm:w-80"
      onSubmit={(event) => {
        event.preventDefault()
        event.stopPropagation()
        void form.handleSubmit()
      }}
    >
      <form.Field
        name="minMaxNumber"
        validators={{
          onChange: ({value}) =>
            isInRange(value) ? undefined : minmaxErrorMessage,
          onSubmit: ({value}) =>
            isInRange(value) ? undefined : minmaxErrorMessage,
        }}
      >
        {({handleChange, name, state}) => {
          const fieldError =
            state.meta.errorMap["onChange"] || state.meta.errorMap["onSubmit"]
          return (
            <Slider
              errorText={fieldError}
              hint="Between 20 and 80"
              invalid={!!fieldError}
              label="Select a value"
              name={name}
              onValueChange={({value}) => handleChange(value[0])}
              value={[state.value]}
            />
          )
        }}
      </form.Field>
      <form.Field
        name="minRange"
        validators={{
          onChange: ({value}) =>
            isRangeAtLeast30(value) ? undefined : minRangeErrorMessage,
          onSubmit: ({value}) =>
            isRangeAtLeast30(value) ? undefined : minRangeErrorMessage,
        }}
      >
        {({handleChange, name, state}) => {
          const fieldError =
            state.meta.errorMap["onChange"] || state.meta.errorMap["onSubmit"]
          return (
            <Slider
              errorText={fieldError}
              hint="At least 30"
              invalid={!!fieldError}
              label="Select a range"
              name={name}
              onValueChange={({value}) =>
                handleChange(value as [number, number])
              }
              value={state.value}
            />
          )
        }}
      </form.Field>
      <Button
        className="mt-1"
        emphasis="primary"
        size="sm"
        type="submit"
        variant="fill"
      >
        Submit
      </Button>
    </form>
  )
}

Tanstack form also supports ArkType.

Composite API and Shortcuts

The Slider component provides a composite API should you need more control over the slider's behavior and appearance.

Anatomy

The composite API is based on the following components:

Slider.Root: The main component that wraps the slider subcomponents.
Slider.Label: The slider main label.
Slider.ValueText: The slider current value as text.
Slider.Control: The container for the thumb(s) and its track and range.
Slider.Track: The track along which the thumb(s) move.
Slider.Range: The filled portion of the track.
Slider.Thumbs or Slider.Thumb + Slider.HiddenInput: The draggable handle(s).
Slider.ThumbIndicator: The thumb tooltip.
Slider.Hint: The hint text below the slider.
Slider.ErrorText: The error message below the slider.
Slider.Markers or Slider.MarkerGroup + Slider.Marker: The markers along the track.

Thumbs

If you need more control over the thumbs, you can use the Slider.Thumb component instead of the Slider.Thumbs shortcut. Also note that Slider.Thumbs will automatically create a range slider when the slider's value or defaultValue is set accordingly.

import {Slider} from "@qualcomm-ui/react/slider"

function RangeSlider() {
  return (
    <Slider.Root defaultValue={[25, 50]}>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0} name="min">
          <Slider.HiddenInput />
        </Slider.Thumb>
        <Slider.Thumb index={1} name="max">
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}

Thumbs with tooltips

Setting the tooltip prop on the Slider.Thumbs component is the equivalent of the following composition:

import {Slider} from "@qualcomm-ui/react/slider"

function SliderWithTooltip() {
  return (
    <Slider.Root defaultValue={[25, 50]}>
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
          <Slider.ThumbIndicator />
        </Slider.Thumb>
        <Slider.Thumb index={1}>
          <Slider.HiddenInput />
          <Slider.ThumbIndicator />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}

Markers

The Markers component is a convenient shortcut to display custom track markers. But you can also create your own markers using the Slider.MarkerGroup and Slider.Marker components.

import {Slider} from "@qualcomm-ui/react/slider"

function SliderWithCustomMarkers() {
  return (
    <Slider.Root defaultValue={[25, 50]}>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumbs />
      </Slider.Control>
      <Slider.MarkerGroup>
        <Slider.Marker value={0}>0</Slider.Marker>
        <Slider.Marker value={25}>25</Slider.Marker>
        <Slider.Marker value={50}>50</Slider.Marker>
        <Slider.Marker value={75}>75</Slider.Marker>
        <Slider.Marker value={100}>100</Slider.Marker>
      </Slider.MarkerGroup>
    </Slider.Root>
  )
}

Explorer

Choose a value25

Some contextual help here

Component Anatomy

Hover to highlight, click to view API

root label value-text control track range thumb marker-group marker hint

API

<Slider>

The Slider extends the Slider.Root with the following props:

Prop	Type	Default
controlProps Props applied to the control element.	SliderControlProps
display How to display range values: a separator string or a function that receives the value array and returns a React node.	\| string \| (( value: number[], ) => ReactNode)	'—'
errorText The error message to display when the slider value is invalid.	ReactNode
errorTextProps Props applied to the error text element.	SliderErrorTextProps
hiddenInputProps Props applied to all hidden input elements.	SliderHiddenInputProps
hint Optional hint text to display below the slider.	ReactNode
hintProps Props applied to the hint element.	SliderHintProps
label The label text for the slider.	ReactNode
labelProps Props applied to the label element.	SliderLabelProps
markerGroupProps Props applied to the marker group element.	SliderMarkerGroupProps
markerProps Props applied to all marker elements.	Omit< SliderMarkerProps, 'value' >
marks The list of marks to display along the slider track.	number[]
maxProps Props applied to the max element.	SliderMaxProps
minProps Props applied to the min element.	SliderMinProps
rangeProps Props applied to the range element.	SliderRangeProps
sideMarkers Whether to display markers on the sides of the slider.	boolean
thumbProps Props applied to all thumb elements.	Omit< SliderThumbProps, 'index' \| 'tooltip' >
tooltip Whether to display the thumb value as a tooltip.	boolean
trackProps Props applied to the track element.	SliderTrackProps
valueTextProps Props applied to the value text element.	SliderValueTextProps

controlProps

Type

SliderControlProps

Description

Props applied to the control element.

display

Type

| string
| ((
    value: number[],
  ) => ReactNode)

Description

How to display range values: a separator string or a function that receives the value array and returns a React node.

errorText

Type

ReactNode

Description

The error message to display when the slider value is invalid.

errorTextProps

Type

SliderErrorTextProps

Description

Props applied to the error text element.

hiddenInputProps

Type

SliderHiddenInputProps

Description

Props applied to all hidden input elements.

hint

Type

ReactNode

Description

Optional hint text to display below the slider.

hintProps

Type

SliderHintProps

Description

Props applied to the hint element.

label

Type

ReactNode

Description

The label text for the slider.

labelProps

Type

SliderLabelProps

Description

Props applied to the label element.

markerGroupProps

Type

SliderMarkerGroupProps

Description

Props applied to the marker group element.

markerProps

Type

Omit<
  SliderMarkerProps,
  'value'
>

Description

Props applied to all marker elements.

marks

Type

number[]

Description

The list of marks to display along the slider track.

maxProps

Type

SliderMaxProps

Description

Props applied to the max element.

minProps

Type

SliderMinProps

Description

Props applied to the min element.

rangeProps

Type

SliderRangeProps

Description

Props applied to the range element.

sideMarkers

Type

boolean

Description

Whether to display markers on the sides of the slider.

thumbProps

Type

Omit<
  SliderThumbProps,
  'index' | 'tooltip'
>

Description

Props applied to all thumb elements.

tooltip

Type

boolean

Description

Whether to display the thumb value as a tooltip.

trackProps

Type

SliderTrackProps

Description

Props applied to the track element.

valueTextProps

Type

SliderValueTextProps

Description

Props applied to the value text element.

Composite API

<Slider.Root>

The main component that wraps the slider subcomponents. Renders a <div> element by default.

Prop	Type	Default
aria-label The aria-label of each slider thumb. Useful for providing an accessible name to the slider	\| string \| string[]
aria-labelledby The `id` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider	\| string \| string[]
children React children prop.	ReactNode
defaultValue The initial value of the slider when rendered. Use when you don't need to control the value of the slider.	number[]
dir The document's text/writing direction.	'ltr' \| 'rtl'	'ltr'
disabled Whether the slider is disabled	boolean
form The form associated to the underlying input element.	string
getAriaValueText Function that returns a human readable value for the slider thumb	({ index: number value: number }) => string
getRootNode A root node to correctly resolve document in custom environments. i.e., Iframes, Electron.	() => \| Node \| ShadowRoot \| Document
invalid Whether the slider is invalid	boolean
max The maximum value of the slider	number	100
min The minimum value of the slider	number	0
minStepsBetweenThumbs The minimum permitted steps between multiple thumbs. `minStepsBetweenThumbs` * `step` should reflect the gap between the thumbs. - `step: 1` and `minStepsBetweenThumbs: 10` => gap is `10` - `step: 10` and `minStepsBetweenThumbs: 2` => gap is `20`	number	0
name The input name(s) for the slider thumbs. - For a single thumb, pass a string. - For two thumbs (range slider), pass the two names in an array or a single name to be prefixed with its index (e.g., "slider" → "slider0", "slider1")	\| string \| string[]
onFocusChange Function invoked when the slider's focused index changes	({ focusedNode: T focusedValue: string }) => void
onValueChange Function invoked when the value of the slider changes	({ value: number[] }) => void
onValueChangeEnd Function invoked when the slider value change is done	({ value: number[] }) => void
orientation The orientation of the slider	\| 'horizontal' \| 'vertical'	"horizontal"
origin The origin of the slider range. The track is filled from the origin to the thumb for single values. - "start": Useful when the value represents an absolute value - "center": Useful when the value represents an offset (relative) - "end": Useful when the value represents an offset from the end	\| 'start' \| 'end' \| 'center'	"start"
readOnly Whether the slider is read-only	boolean
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)
size The size of the slider.	'sm' \| 'md'
step The step value of the slider	number	1
thumbAlignment 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.	\| 'contain' \| 'center'	"contain"
thumbSize The slider thumbs dimensions	{ height: number width: number }
value The controlled value of the slider	number[]
variant The variant of the slider.	\| 'primary' \| 'neutral'

aria-label

Type

| string
| string[]

Description

The aria-label of each slider thumb. Useful for providing an accessible name to the slider

aria-labelledby

Type

| string
| string[]

Description

The id of the elements that labels each slider thumb. Useful for providing an accessible name to the slider

children

Type

ReactNode

Description

React children prop.

defaultValue

Type

number[]

Description

The initial value of the slider when rendered. Use when you don't need to control the value of the slider.

dir

Type

'ltr' | 'rtl'

Description

The document's text/writing direction.

disabled

Type

boolean

Description

Whether the slider is disabled

form

Type

string

Description

The form associated to the underlying input element.

getAriaValueText

Type

({
  index: number
  value: number
}) => string

Description

Function that returns a human readable value for the slider thumb

getRootNode

Type

() =>
| Node
| ShadowRoot
| Document

Description

A root node to correctly resolve document in custom environments. i.e., Iframes, Electron.

invalid

Type

boolean

Description

Whether the slider is invalid

max

Type

number

Description

The maximum value of the slider

min

Type

number

Description

The minimum value of the slider

minStepsBetweenThumbs

Type

number

Description

The minimum permitted steps between multiple thumbs.

minStepsBetweenThumbs * step should reflect the gap between the thumbs.

- step: 1 and minStepsBetweenThumbs: 10 => gap is 10
- step: 10 and minStepsBetweenThumbs: 2 => gap is 20

name

Type

| string
| string[]

Description

The input name(s) for the slider thumbs.
- For a single thumb, pass a string.
- For two thumbs (range slider), pass the two names in an array or a single name to be prefixed with its index (e.g., "slider" → "slider0", "slider1")

onFocusChange

Type

({
  focusedNode: T
  focusedValue: string
}) => void

Description

Function invoked when the slider's focused index changes

onValueChange

Type

({
  value: number[]
}) => void

Description

Function invoked when the value of the slider changes

onValueChangeEnd

Type

({
  value: number[]
}) => void

Description

Function invoked when the slider value change is done

orientation

Type

| 'horizontal'
| 'vertical'

Description

The orientation of the slider

origin

Type

| 'start'
| 'end'
| 'center'

Description

The origin of the slider range. The track is filled from the origin to the thumb for single values.
- "start": Useful when the value represents an absolute value
- "center": Useful when the value represents an offset (relative)
- "end": Useful when the value represents an offset from the end

readOnly

Type

boolean

Description

Whether the slider is read-only

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

size

Type

'sm' | 'md'

Description

The size of the slider.

step

Type

number

Description

The step value of the slider

thumbAlignment

Type

| 'contain'
| 'center'

Description

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.

thumbSize

Type

{
  height: number
  width: number
}

Description

The slider thumbs dimensions

value

Type

number[]

Description

The controlled value of the slider

variant

Type

| 'primary'
| 'neutral'

Description

The variant of the slider.

Attribute / Property	Value
`data-disabled`
`data-dragging`
`data-focus`
`data-invalid`
`data-orientation`	Orientation
`data-readonly`
`data-slider-part`	'root'
`style`	CSSProperties

data-disabled

Value

data-dragging

Value

data-focus

Value

data-invalid

Value

data-orientation

Value

Orientation

data-readonly

Value

data-slider-part

Value

'root'

style

Value

CSSProperties

<Slider.Label>

The slider main label. Renders a <label> element by default.

Prop	Type
children React children prop.	ReactNode
id id attribute. If omitted, a unique identifier will be automatically generated for accessibility.	string
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

Type

string

Description

id attribute. If omitted, a unique identifier will be automatically generated for accessibility.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`data-disabled`
`data-dragging`
`data-focus`
`data-invalid`
`data-orientation`	Orientation
`data-readonly`
`data-slider-part`	'label'
`style`	CSSProperties

data-disabled

Value

data-dragging

Value

data-focus

Value

data-invalid

Value

data-orientation

Value

Orientation

data-readonly

Value

data-slider-part

Value

'label'

style

Value

CSSProperties

<Slider.ValueText>

The slider current value as text. Renders a <output> element by default.

Prop	Type	Default
display How to display range values: a separator string or a function that receives the value array and returns a React node.	\| string \| (( value: number[], ) => ReactNode)	' - '
id id attribute. If omitted, a unique identifier will be automatically generated for accessibility.	string
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

display

Type

| string
| ((
    value: number[],
  ) => ReactNode)

Description

How to display range values: a separator string or a function that receives the value array and returns a React node.

Type

string

Description

id attribute. If omitted, a unique identifier will be automatically generated for accessibility.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`data-disabled`
`data-focus`
`data-invalid`
`data-orientation`	Orientation
`data-readonly`
`data-slider-part`	'value-text'

data-disabled

Value

data-focus

Value

data-invalid

Value

data-orientation

Value

Orientation

data-readonly

Value

data-slider-part

Value

'value-text'

<Slider.Control>

The container for the thumb(s) and its track and range. Renders a <div> element by default.

Prop	Type
children React children prop.	ReactNode
id id attribute. If omitted, a unique identifier will be automatically generated for accessibility.	string
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

Type

string

Description

id attribute. If omitted, a unique identifier will be automatically generated for accessibility.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`data-disabled`
`data-dragging`
`data-focus`
`data-invalid`
`data-orientation`	Orientation
`data-readonly`
`data-slider-part`	'control'
`style`	CSSProperties

data-disabled

Value

data-dragging

Value

data-focus

Value

data-invalid

Value

data-orientation

Value

Orientation

data-readonly

Value

data-slider-part

Value

'control'

style

Value

CSSProperties

<Slider.Track>

The track along which the thumb(s) move. Renders a <div> element by default.

Prop	Type
children React children prop.	ReactNode
id id attribute. If omitted, a unique identifier will be automatically generated for accessibility.	string
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

Type

string

Description

id attribute. If omitted, a unique identifier will be automatically generated for accessibility.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`data-disabled`
`data-dragging`
`data-focus`
`data-invalid`
`data-orientation`	Orientation
`data-readonly`
`data-slider-part`	'track'
`style`	CSSProperties

data-disabled

Value

data-dragging

Value

data-focus

Value

data-invalid

Value

data-orientation

Value

Orientation

data-readonly

Value

data-slider-part

Value

'track'

style

Value

CSSProperties

<Slider.Range>

The filled portion of the track. Renders a <div> element by default.

Prop	Type
children React children prop.	ReactNode
id id attribute. If omitted, a unique identifier will be automatically generated for accessibility.	string
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

Type

string

Description

id attribute. If omitted, a unique identifier will be automatically generated for accessibility.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`data-disabled`
`data-dragging`
`data-focus`
`data-invalid`
`data-orientation`	Orientation
`data-readonly`
`data-slider-part`	'range'
`style`	CSSProperties

data-disabled

Value

data-dragging

Value

data-focus

Value

data-invalid

Value

data-orientation

Value

Orientation

data-readonly

Value

data-slider-part

Value

'range'

style

Value

CSSProperties

<Slider.Thumbs> shortcut

A shortcut element for the draggable handle(s) and their associated hidden input(s).

Prop	Type
hiddenInputProps Props applied to all hidden input elements.	SliderHiddenInputProps
thumbProps Props applied to all thumb elements.	Omit< SliderThumbProps, 'index' \| 'tooltip' >
tooltip Whether to display the thumb value as a tooltip.	boolean

hiddenInputProps

Type

SliderHiddenInputProps

Description

Props applied to all hidden input elements.

thumbProps

Type

Omit<
  SliderThumbProps,
  'index' | 'tooltip'
>

Description

Props applied to all thumb elements.

tooltip

Type

boolean

Description

Whether to display the thumb value as a tooltip.

<Slider.Thumb>

The draggable handle. Renders a <div> element by default.

Prop	Type
index ^* The slider thumb's index.	number
children React children prop.	ReactNode
id id attribute. If omitted, a unique identifier will be automatically generated for accessibility.	string
name The name associated with the slider thumb's input (when used in a form).	string
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

index

Type

number

Description

The slider thumb's index.

children

Type

ReactNode

Description

React children prop.

Type

string

Description

id attribute. If omitted, a unique identifier will be automatically generated for accessibility.

name

Type

string

Description

The name associated with the slider thumb's input (when used in a form).

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`data-disabled`
`data-dragging`
`data-focus`
`data-index`	number
`data-name`	string
`data-orientation`	Orientation
`data-readonly`
`data-slider-part`	'thumb'
`style`	CSSProperties
`tabIndex`	number

data-disabled

Value

data-dragging

Value

data-focus

Value

data-index

Value

number

data-name

Value

string

data-orientation

Value

Orientation

data-readonly

Value

data-slider-part

Value

'thumb'

style

Value

CSSProperties

tabIndex

Value

number

<Slider.ThumbIndicator>

The indicator shown above the slider thumb. Renders a <div> element by default.

Prop	Type	Default
children React children prop.	ReactNode
display Custom value display: a function that receives the value array and returns a React node.	( value: number, ) => ReactNode	' - '
id id attribute. If omitted, a unique identifier will be automatically generated for accessibility.	string
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

display

Type

(
  value: number,
) => ReactNode

Description

Custom value display: a function that receives the value array and returns a React node.

Type

string

Description

id attribute. If omitted, a unique identifier will be automatically generated for accessibility.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`data-orientation`	Orientation
`data-slider-part`	'thumb-indicator'
`style`	CSSProperties

<Slider.HiddenInput>

The hidden input element associated with the thumb. Renders an <input> element by default.

Prop	Type
children React children prop.	ReactNode
id id attribute. If omitted, a unique identifier will be automatically generated for accessibility.	string

children

Type

ReactNode

Description

React children prop.

Type

string

Description

id attribute. If omitted, a unique identifier will be automatically generated for accessibility.

Attribute / Property	Value
`hidden`	boolean

<Slider.Markers> shortcut

A shortcut element for the marker group and the markers.

Prop	Type
id id attribute. If omitted, a unique identifier will be automatically generated for accessibility.	string
markerGroupProps Props applied to the marker group element.	SliderMarkerGroupProps
markerProps Props applied to all marker elements.	Omit< SliderMarkerProps, 'value' >
marks An array of numbers indicating where to place the markers. If not provided, the component will generate 11 evenly spaced markers based on the `min` and `max` slider values.	number[]

Type

string

Description

id attribute. If omitted, a unique identifier will be automatically generated for accessibility.

markerGroupProps

Type

SliderMarkerGroupProps

Description

Props applied to the marker group element.

markerProps

Type

Omit<
  SliderMarkerProps,
  'value'
>

Description

Props applied to all marker elements.

marks

Type

number[]

Description

An array of numbers indicating where to place the markers. If not provided, the component will generate 11 evenly spaced markers based on the min and max slider values.

<Slider.MarkerGroup>

The container element for the markers. Renders a <div> element by default.

Prop	Type
children React children prop.	ReactNode
id id attribute. If omitted, a unique identifier will be automatically generated for accessibility.	string
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

Type

string

Description

id attribute. If omitted, a unique identifier will be automatically generated for accessibility.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`data-orientation`	Orientation
`data-slider-part`	'marker-group'
`style`	CSSProperties

<Slider.Marker>

A marker along the track. Renders a <span> element by default.

Prop	Type
value ^* The value the marker should indicate.	number
children React children prop.	ReactNode
id id attribute. If omitted, a unique identifier will be automatically generated for accessibility.	string
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

value

Type

number

Description

The value the marker should indicate.

children

Type

ReactNode

Description

React children prop.

Type

string

Description

id attribute. If omitted, a unique identifier will be automatically generated for accessibility.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`data-disabled`
`data-orientation`	Orientation
`data-readonly`
`data-slider-part`	'marker'
`data-state`	\| 'over-value' \| 'under-value' \| 'at-value'
`data-value`	number
`style`	CSSProperties

data-disabled

Value

data-orientation

Value

Orientation

data-readonly

Value

data-slider-part

Value

'marker'

data-state

Value

| 'over-value'
| 'under-value'
| 'at-value'

data-value

Value

number

style

Value

CSSProperties

<Slider.Hint>

The hint text below the slider. Renders a <span> element by default.

Prop	Type
children React children prop.	ReactNode
id id attribute. If omitted, a unique identifier will be automatically generated for accessibility.	string
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

Type

string

Description

id attribute. If omitted, a unique identifier will be automatically generated for accessibility.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`data-disabled`
`data-dragging`
`data-invalid`
`data-orientation`	Orientation
`data-readonly`
`data-slider-part`	'hint'
`hidden`	boolean

data-disabled

Value

data-dragging

Value

data-invalid

Value

data-orientation

Value

Orientation

data-readonly

Value

data-slider-part

Value

'hint'

hidden

Value

boolean

<Slider.ErrorText>

The error message below the slider. Renders a <span> element by default.

Prop	Type
children React children prop.	ReactNode
id id attribute. If omitted, a unique identifier will be automatically generated for accessibility.	string
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

Type

string

Description

id attribute. If omitted, a unique identifier will be automatically generated for accessibility.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`data-disabled`
`data-dragging`
`data-invalid`
`data-orientation`	Orientation
`data-slider-part`	'error-text'
`hidden`	boolean

data-disabled

Value

data-dragging

Value

data-invalid

Value

data-orientation

Value

Orientation

data-slider-part

Value

'error-text'

hidden

Value

boolean

Last updated on May 23, 2026 by Ryan Bower

Side Nav

Stepper