Slider

Slider supports a single number or an array of numbers for a range. Compose its label, track, indicator, and thumbs inside Root.

Single value

import { Slider } from 'twenty-ui/input';

export const VolumeSlider = () => (
  <Slider.Root name="volume" defaultValue={40} min={0} max={100} step={1}>
    <Slider.Label>Volume</Slider.Label>
    <Slider.Value />
    <Slider.Control>
      <Slider.Track>
        <Slider.Indicator />
        <Slider.Thumb />
      </Slider.Track>
    </Slider.Control>
  </Slider.Root>
);

Use value and onValueChange for controlled state. onValueCommitted handles the value when an interaction finishes. Set color="success" for the alternative palette; the default is accent.

Range

import { Slider } from 'twenty-ui/input';

export const PriceRange = () => (
  <Slider.Root
    defaultValue={[25, 75]}
    min={0}
    max={100}
    minStepsBetweenValues={10}
  >
    <Slider.Label>Price range</Slider.Label>
    <Slider.Value />
    <Slider.Control>
      <Slider.Track>
        <Slider.Indicator />
        <Slider.Thumb index={0} aria-label="Minimum price" />
        <Slider.Thumb index={1} aria-label="Maximum price" />
      </Slider.Track>
    </Slider.Control>
  </Slider.Root>
);

Give range thumbs distinct accessible names and an index corresponding to their value. minStepsBetweenValues sets the minimum gap in steps. The root’s generic value type is a number or a readonly array of numbers.

Parts and keyboard

Part	Purpose
`Root`	Owns the value, bounds, step, and orientation.
`Label`	Names the slider.
`Value`	Displays the current value.
`Control`	Handles pointer interaction.
`Track`	Shows the full value range.
`Indicator`	Shows the selected portion of the track.
`Thumb`	Provides a focusable handle for one value.

Arrow keys adjust a focused thumb by a step. Home and End move it toward the bounds while respecting range constraints. orientation="vertical" changes the layout and keyboard direction. Use disabled on Root to prevent changes.

Props

The reference is generated from the public component types. Native attributes, including accessible names and event handlers, are also accepted on parts that render elements.

Slider.Root

string | ((state: SliderRootState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on the component’s state.

"accent" | "success"

default:"accent"

Color of the indicator and thumbs.

number | readonly number[]

The uncontrolled value of the slider when it’s initially rendered.To render a controlled slider, use the value prop instead.

boolean

default:"false"

Whether the slider should ignore user interaction.

string

Identifies the form that owns the slider inputs. Useful when the slider is rendered outside the form.

NumberFormatOptions

Options to format the value.

number

default:"10"

The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.

LocalesArgument

The locale used by Intl.NumberFormat when formatting the value. Defaults to the user’s runtime locale.

number

default:"100"

The maximum allowed value of the slider. Should not be equal to min.

number

default:"0"

The minimum allowed value of the slider. Should not be equal to max.

number

default:"0"

The minimum steps between values in a range slider.

string

Identifies the field when a form is submitted.

((value: TValue extends number ? number : TValue, eventDetails: SliderRootChangeEventDetails) => void)

Callback function that is fired when the slider’s value changed. Receives the new value as the first argument; the originating event is available as eventDetails.event. The value is also reflected on eventDetails.event.target.value for form integration.The eventDetails.reason indicates what triggered the change:

'input-change' when the hidden range input emits a change event (for example, via form integration)
'track-press' when the control track is pressed
'drag' while dragging a thumb
'keyboard' for keyboard input
'none' when the change is triggered without a specific interaction

((value: TValue extends number ? number : TValue, eventDetails: SliderRootCommitEventDetails) => void)

Callback function that is fired when a value change is committed. Does not fire if the value did not change, or if the change was canceled. Warning: This is a generic event, not a change event.The eventDetails.reason indicates what triggered the commit:

'drag' while dragging a thumb
'track-press' when the control track is pressed
'keyboard' for keyboard input
'input-change' when the hidden range input emits a change event (for example, via form integration)
'none' when the commit occurs without a specific interaction

"horizontal" | "vertical"

default:"horizontal"

The component orientation.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SliderRootState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

number

default:"1"

The granularity with which the slider can step through values. (A “discrete” slider.) The min prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.

CSSProperties | ((state: SliderRootState) => CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

"center" | "edge" | "edge-client-only"

default:"edge"

How the thumb(s) are aligned relative to Slider.Control when the value is at min or max:

center: The center of the thumb is aligned with the control edge
edge: The thumb is inset within the control such that its edge is aligned with the control edge
edge-client-only: Same as edge but renders after React hydration on the client, reducing bundle size in return

"push" | "none" | "swap"

default:"push"

Controls how thumbs behave when they collide during pointer interactions.

'push' (default): Thumbs push each other without restoring their previous positions when dragged back.
'swap': Thumbs swap places when dragged past each other.
'none': Thumbs cannot move past each other; excess movement is ignored.

number | readonly number[]

The value of the slider. For range sliders, provide an array with one value per thumb.

Slider.Control

string | ((state: SliderControlState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on the component’s state.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SliderControlState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

CSSProperties | ((state: SliderControlState) => CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

Slider.Track

string | ((state: SliderTrackState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on the component’s state.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SliderTrackState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

CSSProperties | ((state: SliderTrackState) => CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

Slider.Indicator

string | ((state: SliderIndicatorState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on the component’s state.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SliderIndicatorState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

CSSProperties | ((state: SliderIndicatorState) => CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

Slider.Thumb

string

A string value forwarded to the aria-valuetext attribute of the input. Ignored when getAriaValueText is provided.

string | ((state: SliderThumbState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on the component’s state.

boolean

default:"false"

Whether the thumb should ignore user interaction.

((index: number) => string) | null

A function which returns a string value for the aria-label attribute of the input.

((formattedValue: string, value: number, index: number) => string) | null

A function which returns a string value for the aria-valuetext attribute of the input. This is important for screen reader users.

number

The index of the thumb which corresponds to the index of its value in the value or defaultValue array. This prop is required to support server-side rendering for range sliders with multiple thumbs.

Ref<HTMLInputElement>

A ref to access the nested input element.

FocusEventHandler<HTMLInputElement>

A blur handler forwarded to the input.

FocusEventHandler<HTMLInputElement>

A focus handler forwarded to the input.

KeyboardEventHandler<HTMLInputElement>

A keydown handler forwarded to the input.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SliderThumbState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

CSSProperties | ((state: SliderThumbState) => CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

number

Optional tab index attribute forwarded to the input.

Slider.Label

string | ((state: SliderRootState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on the component’s state.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SliderRootState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

CSSProperties | ((state: SliderRootState) => CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

Slider.Value

string | ((state: SliderValueState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on the component’s state.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SliderValueState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

CSSProperties | ((state: SliderValueState) => CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

Guides

Forms

Navigation

Surfaces

Feedback

Typography

Single value

Range

Parts and keyboard

Props

Slider.Root

Slider.Control

Slider.Track

Slider.Indicator

Slider.Thumb

Slider.Label

Slider.Value

​Single value

​Range

​Parts and keyboard

​Props

​Slider.Root

​Slider.Control

​Slider.Track

​Slider.Indicator

​Slider.Thumb

​Slider.Label

​Slider.Value

Single value

Range

Parts and keyboard

Props

Slider.Root

Slider.Control

Slider.Track

Slider.Indicator

Slider.Thumb

Slider.Label

Slider.Value