Headless

Slider

An easily stylable range input.

In Nyte

Import

import { Slider } from "@nyte-ai/ui/slider";

@nyte-ai/ui/slider re-exports the Base UI namespace unchanged. There is no Nyte styling on this subpath; the consumer owns every class, StyleX style, and layout decision. Base UI owns the interaction model, keyboard handling, focus management, and ARIA below.

Consumed by:

desktop/src/renderer/src/chrome/appearance-panel.tsx

The rest of this page is Base UI's documentation for @base-ui/react/slider, reproduced verbatim under the MIT license, © Material-UI SAS. Component paths in examples refer to the Base UI package; in Nyte, import from the subpath above.

Usage guidelines

Form controls must have an accessible name: Prefer <Slider.Label>, or provide an aria-label on each <Slider.Thumb> when no visible label is rendered. See Labeling a slider and the forms guide.

Anatomy

Import the component and assemble its parts:

Anatomy

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

<Slider.Root>
  <Slider.Label />
  <Slider.Value />
  <Slider.Control>
    <Slider.Track>
      <Slider.Indicator />
      <Slider.Thumb />
    </Slider.Track>
  </Slider.Control>
</Slider.Root>;

Examples

Labeling a slider

A single-thumb slider without a visible label (such as a volume control) can be labeled using aria-label on <Slider.Thumb>:

Slider with invisible label

<Slider.Root>
  <Slider.Control>
    <Slider.Track>
      <Slider.Indicator />
      {/* @highlight */}
      <Slider.Thumb aria-label="Volume" />
    </Slider.Track>
  </Slider.Control>
</Slider.Root>

A visible label can be created using <Slider.Label>:

Slider with visible label

<Slider.Root>
  {/* @highlight */}
  <Slider.Label>Volume</Slider.Label>
  <Slider.Control>
    <Slider.Track>
      <Slider.Indicator />
      <Slider.Thumb />
    </Slider.Track>
  </Slider.Control>
</Slider.Root>

For a multi-thumb range slider with a visible label, add aria-label on each <Slider.Thumb> to distinguish them:

Labeling multi-thumb range sliders

<Slider.Root defaultValue={[25, 75]}>
  <Slider.Label>Price range</Slider.Label>
  <Slider.Control>
    <Slider.Track>
      <Slider.Indicator />
      {/* @highlight-start */}
      <Slider.Thumb index={0} aria-label="Minimum price" />
      <Slider.Thumb index={1} aria-label="Maximum price" />
      {/* @highlight-end */}
    </Slider.Track>
  </Slider.Control>
</Slider.Root>

Range slider

To create a range slider:

Pass an array of values and place a <Slider.Thumb> for each value in the array
Additionally for server-side rendering, specify a numeric index for each thumb that corresponds to the index of its value in the value array

Thumbs can be configured to behave differently when they collide during pointer interactions using the thumbCollisionBehavior prop on <Slider.Root>.

Steps

Use the step prop to snap the value to multiples of a given increment, and largeStep to control the increment when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.

Marks

Render your own tick marks, positioning each mark along the track as a percentage of the value range.

Marks are independent of the value's granularity—pair them with the step prop to snap the thumb to each mark.

Thumb alignment

Set thumbAlignment="edge" to inset the thumb such that its edge aligns with the edge of the control when the value is at min or max, without overflowing the control like the default "center" alignment.

A client-only alternative thumbAlignment="edge-client-only" can be used to reduce bundle size but only renders after React hydration.

Vertical

Set orientation="vertical" on <Slider.Root> to build a vertical slider.

Form integration

To use a slider in a form, pass the slider name to <Slider.Root>:

Using Slider in a form

<Form>
  {/* @highlight */}
  <Slider.Root name="volume">
    <Slider.Label>Volume</Slider.Label>
    <Slider.Control>
      <Slider.Track>
        <Slider.Indicator />
        <Slider.Thumb />
      </Slider.Track>
    </Slider.Control>
  </Slider.Root>
</Form>

For grouped multi-thumb range sliders in forms, Fieldset can provide the shared visible label while each thumb keeps its own aria-label:

Using Fieldset with a multi-thumb slider

<Field.Root>
  {/* @highlight-start */}
  <Fieldset.Root render={<Slider.Root defaultValue={[25, 75]} />}>
    <Fieldset.Legend>Price range</Fieldset.Legend>
    {/* @highlight-end */}
    <Slider.Control>
      <Slider.Track>
        <Slider.Indicator />
        {/* @highlight-start */}
        <Slider.Thumb index={0} aria-label="Minimum price" />
        <Slider.Thumb index={1} aria-label="Maximum price" />
        {/* @highlight-end */}
      </Slider.Track>
    </Slider.Control>
  </Fieldset.Root>
</Field.Root>

API reference

Root

Groups all parts of the slider. Renders a <div> element.

Root Props:

Prop	Type	Default	Description
name	`string`	-	Identifies the field when a form is submitted.
defaultValue	`number \| number[]`	-	The uncontrolled value of the slider when it's initially rendered. To render a controlled slider, use the `value` prop instead.
value	`number \| number[]`	-	The value of the slider. For range sliders, provide an array with one value per thumb.
onValueChange	`((value: number \| number[], eventDetails: Slider.Root.ChangeEventDetails) => 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
onValueCommitted	`((value: number \| number[], eventDetails: Slider.Root.CommitEventDetails) => 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
form	`string`	-	Identifies the form that owns the slider inputs. Useful when the slider is rendered outside the form.
locale	`Intl.LocalesArgument`	-	The locale used by `Intl.NumberFormat` when formatting the value. Defaults to the user's runtime locale.
thumbAlignment	`'center' \| 'edge' \| 'edge-client-only'`	`'center'`	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
thumbCollisionBehavior	`'push' \| 'swap' \| 'none'`	`'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.
step	`number`	`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.
largeStep	`number`	`10`	The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.
minStepsBetweenValues	`number`	`0`	The minimum steps between values in a range slider.
min	`number`	`0`	The minimum allowed value of the slider. Should not be equal to max.
max	`number`	`100`	The maximum allowed value of the slider. Should not be equal to min.
format	`Intl.NumberFormatOptions`	-	Options to format the value.
disabled	`boolean`	`false`	Whether the slider should ignore user interaction.
orientation	`Orientation`	`'horizontal'`	The component orientation.
className	`string \| ((state: Slider.Root.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: Slider.Root.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: Slider.Root.State) => ReactElement)`	-	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.

Root Data Attributes:

Attribute	Type	Description
data-dragging	-	Present while the user is dragging.
data-orientation	`'horizontal' \| 'vertical'`	Indicates the orientation of the slider.
data-disabled	-	Present when the slider is disabled.
data-valid	-	Present when the slider is in a valid state (when wrapped in Field.Root).
data-invalid	-	Present when the slider is in an invalid state (when wrapped in Field.Root).
data-dirty	-	Present when the slider's value has changed (when wrapped in Field.Root).
data-touched	-	Present when the slider has been touched (when wrapped in Field.Root).
data-focused	-	Present when the slider is focused (when wrapped in Field.Root).

Root.Props

Re-export of Root props.

Root.State

type SliderRootState = {
  /** The index of the active thumb. */
  activeThumbIndex: number;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** Whether the thumb is currently being dragged. */
  dragging: boolean;
  /** The maximum value. */
  max: number;
  /** The minimum value. */
  min: number;
  /**
   * The minimum steps between values in a range slider.
   * @default 0
   */
  minStepsBetweenValues: number;
  /** The component orientation. */
  orientation: Orientation;
  /**
   * The step increment of the slider when incrementing or decrementing. It will snap
   * to multiples of this value. Decimal values are supported.
   * @default 1
   */
  step: number;
  /** The raw number value of the slider. */
  values: number[];
  /** Whether the field has been touched. */
  touched: boolean;
  /** Whether the field value has changed from its initial value. */
  dirty: boolean;
  /** Whether the field is valid. */
  valid: boolean | null;
  /** Whether the field has a value. */
  filled: boolean;
  /** Whether the field is focused. */
  focused: boolean;
};

Root.ChangeEventReason

type SliderRootChangeEventReason = 'input-change' | 'track-press' | 'drag' | 'keyboard' | 'none';

Root.ChangeEventDetails

type SliderRootChangeEventDetails = (
  | { reason: 'none'; event: Event }
  | { reason: 'input-change'; event: Event | InputEvent }
  | { reason: 'track-press'; event: PointerEvent | MouseEvent | TouchEvent }
  | { reason: 'drag'; event: PointerEvent | TouchEvent }
  | { reason: 'keyboard'; event: KeyboardEvent }
) & {
  /** Cancels Base UI from handling the event. */
  cancel: () => void;
  /** Allows the event to propagate in cases where Base UI will stop the propagation. */
  allowPropagation: () => void;
  /** Indicates whether the event has been canceled. */
  isCanceled: boolean;
  /** Indicates whether the event is allowed to propagate. */
  isPropagationAllowed: boolean;
  /** The element that triggered the event, if applicable. */
  trigger: Element | undefined;
  /** The index of the active thumb at the time of the change. */
  activeThumbIndex: number;
};

Root.CommitEventReason

type SliderRootCommitEventReason = 'input-change' | 'track-press' | 'drag' | 'keyboard' | 'none';

Root.CommitEventDetails

type SliderRootCommitEventDetails =
  | { reason: 'none'; event: Event }
  | { reason: 'input-change'; event: Event | InputEvent }
  | { reason: 'track-press'; event: PointerEvent | MouseEvent | TouchEvent }
  | { reason: 'drag'; event: PointerEvent | TouchEvent }
  | { reason: 'keyboard'; event: KeyboardEvent };

Value

Displays the current value of the slider as text. Renders an <output> element.

Value Props:

Prop	Type	Default	Description
children	`((formattedValues: string[], values: number[]) => React.ReactNode) \| null`	-	-
className	`string \| ((state: Slider.Value.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: Slider.Value.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: Slider.Value.State) => ReactElement)`	-	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.

Value Data Attributes:

Attribute	Type	Description
data-dragging	-	Present while the user is dragging.
data-orientation	`'horizontal' \| 'vertical'`	Indicates the orientation of the slider.
data-disabled	-	Present when the slider is disabled.
data-valid	-	Present when the slider is in a valid state (when wrapped in Field.Root).
data-invalid	-	Present when the slider is in an invalid state (when wrapped in Field.Root).
data-dirty	-	Present when the slider's value has changed (when wrapped in Field.Root).
data-touched	-	Present when the slider has been touched (when wrapped in Field.Root).
data-focused	-	Present when the slider is focused (when wrapped in Field.Root).

Value.Props

Re-export of Value props.

Value.State

type SliderValueState = {
  /** The index of the active thumb. */
  activeThumbIndex: number;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** Whether the thumb is currently being dragged. */
  dragging: boolean;
  /** The maximum value. */
  max: number;
  /** The minimum value. */
  min: number;
  /**
   * The minimum steps between values in a range slider.
   * @default 0
   */
  minStepsBetweenValues: number;
  /** The component orientation. */
  orientation: Orientation;
  /**
   * The step increment of the slider when incrementing or decrementing. It will snap
   * to multiples of this value. Decimal values are supported.
   * @default 1
   */
  step: number;
  /** The raw number value of the slider. */
  values: number[];
  /** Whether the field has been touched. */
  touched: boolean;
  /** Whether the field value has changed from its initial value. */
  dirty: boolean;
  /** Whether the field is valid. */
  valid: boolean | null;
  /** Whether the field has a value. */
  filled: boolean;
  /** Whether the field is focused. */
  focused: boolean;
};

Indicator

Visualizes the current value of the slider. Renders a <div> element.

Indicator Props:

Prop	Type	Default	Description
className	`string \| ((state: Slider.Indicator.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: Slider.Indicator.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: Slider.Indicator.State) => ReactElement)`	-	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.

Indicator Data Attributes:

Attribute	Type	Description
data-dragging	-	Present while the user is dragging.
data-orientation	`'horizontal' \| 'vertical'`	Indicates the orientation of the slider.
data-disabled	-	Present when the slider is disabled.
data-valid	-	Present when the slider is in a valid state (when wrapped in Field.Root).
data-invalid	-	Present when the slider is in an invalid state (when wrapped in Field.Root).
data-dirty	-	Present when the slider's value has changed (when wrapped in Field.Root).
data-touched	-	Present when the slider has been touched (when wrapped in Field.Root).
data-focused	-	Present when the slider is focused (when wrapped in Field.Root).

Indicator.Props

Re-export of Indicator props.

Indicator.State

type SliderIndicatorState = {
  /** The index of the active thumb. */
  activeThumbIndex: number;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** Whether the thumb is currently being dragged. */
  dragging: boolean;
  /** The maximum value. */
  max: number;
  /** The minimum value. */
  min: number;
  /**
   * The minimum steps between values in a range slider.
   * @default 0
   */
  minStepsBetweenValues: number;
  /** The component orientation. */
  orientation: Orientation;
  /**
   * The step increment of the slider when incrementing or decrementing. It will snap
   * to multiples of this value. Decimal values are supported.
   * @default 1
   */
  step: number;
  /** The raw number value of the slider. */
  values: number[];
  /** Whether the field has been touched. */
  touched: boolean;
  /** Whether the field value has changed from its initial value. */
  dirty: boolean;
  /** Whether the field is valid. */
  valid: boolean | null;
  /** Whether the field has a value. */
  filled: boolean;
  /** Whether the field is focused. */
  focused: boolean;
};

Track

Contains the slider indicator and represents the entire range of the slider. Renders a <div> element.

Track Props:

Prop	Type	Default	Description
className	`string \| ((state: Slider.Track.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: Slider.Track.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: Slider.Track.State) => ReactElement)`	-	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.

Track Data Attributes:

Attribute	Type	Description
data-dragging	-	Present while the user is dragging.
data-orientation	`'horizontal' \| 'vertical'`	Indicates the orientation of the slider.
data-disabled	-	Present when the slider is disabled.
data-valid	-	Present when the slider is in a valid state (when wrapped in Field.Root).
data-invalid	-	Present when the slider is in an invalid state (when wrapped in Field.Root).
data-dirty	-	Present when the slider's value has changed (when wrapped in Field.Root).
data-touched	-	Present when the slider has been touched (when wrapped in Field.Root).
data-focused	-	Present when the slider is focused (when wrapped in Field.Root).

Track.Props

Re-export of Track props.

Track.State

type SliderTrackState = {
  /** The index of the active thumb. */
  activeThumbIndex: number;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** Whether the thumb is currently being dragged. */
  dragging: boolean;
  /** The maximum value. */
  max: number;
  /** The minimum value. */
  min: number;
  /**
   * The minimum steps between values in a range slider.
   * @default 0
   */
  minStepsBetweenValues: number;
  /** The component orientation. */
  orientation: Orientation;
  /**
   * The step increment of the slider when incrementing or decrementing. It will snap
   * to multiples of this value. Decimal values are supported.
   * @default 1
   */
  step: number;
  /** The raw number value of the slider. */
  values: number[];
  /** Whether the field has been touched. */
  touched: boolean;
  /** Whether the field value has changed from its initial value. */
  dirty: boolean;
  /** Whether the field is valid. */
  valid: boolean | null;
  /** Whether the field has a value. */
  filled: boolean;
  /** Whether the field is focused. */
  focused: boolean;
};

Thumb

The draggable part of the slider at the tip of the indicator. Renders a <div> element and a nested <input type="range">.

Thumb Props:

Prop	Type	Default	Description
aria-valuetext	`string`	-	A string value forwarded to the `aria-valuetext` attribute of the `input`. Ignored when `getAriaValueText` is provided.
getAriaLabel	`((index: number) => string) \| null`	-	A function which returns a string value for the `aria-label` attribute of the `input`.
getAriaValueText	`((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.
index	`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.
onBlur	`React.FocusEventHandler<HTMLInputElement>`	-	A blur handler forwarded to the `input`.
onFocus	`React.FocusEventHandler<HTMLInputElement>`	-	A focus handler forwarded to the `input`.
onKeyDown	`React.KeyboardEventHandler<HTMLInputElement>`	-	A keydown handler forwarded to the `input`.
tabIndex	`number`	-	Optional tab index attribute forwarded to the `input`.
disabled	`boolean`	`false`	Whether the thumb should ignore user interaction.
inputRef	`React.Ref<HTMLInputElement>`	-	A ref to access the nested input element.
className	`string \| ((state: Slider.Thumb.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: Slider.Thumb.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: Slider.Thumb.State) => ReactElement)`	-	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.

index Prop Example:

<Slider.Root value={[10, 20]}>
  <Slider.Thumb index={0} />
  <Slider.Thumb index={1} />
</Slider.Root>

Thumb Data Attributes:

Attribute	Type	Description
data-dragging	-	Present while the user is dragging.
data-orientation	`'horizontal' \| 'vertical'`	Indicates the orientation of the slider.
data-disabled	-	Present when the slider is disabled.
data-valid	-	Present when the slider is in a valid state (when wrapped in Field.Root).
data-invalid	-	Present when the slider is in an invalid state (when wrapped in Field.Root).
data-dirty	-	Present when the slider's value has changed (when wrapped in Field.Root).
data-touched	-	Present when the slider has been touched (when wrapped in Field.Root).
data-focused	-	Present when the slider is focused (when wrapped in Field.Root).
data-index	-	Indicates the index of the thumb in range sliders.

Thumb.Props

Re-export of Thumb props.

Thumb.State

type SliderThumbState = {
  /** The index of the active thumb. */
  activeThumbIndex: number;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** Whether the thumb is currently being dragged. */
  dragging: boolean;
  /** The maximum value. */
  max: number;
  /** The minimum value. */
  min: number;
  /**
   * The minimum steps between values in a range slider.
   * @default 0
   */
  minStepsBetweenValues: number;
  /** The component orientation. */
  orientation: Orientation;
  /**
   * The step increment of the slider when incrementing or decrementing. It will snap
   * to multiples of this value. Decimal values are supported.
   * @default 1
   */
  step: number;
  /** The raw number value of the slider. */
  values: number[];
  /** Whether the field has been touched. */
  touched: boolean;
  /** Whether the field value has changed from its initial value. */
  dirty: boolean;
  /** Whether the field is valid. */
  valid: boolean | null;
  /** Whether the field has a value. */
  filled: boolean;
  /** Whether the field is focused. */
  focused: boolean;
};

Control

The clickable, interactive part of the slider. Renders a <div> element.

Control Props:

Prop	Type	Default	Description
className	`string \| ((state: Slider.Control.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: Slider.Control.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: Slider.Control.State) => ReactElement)`	-	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.

Control Data Attributes:

Attribute	Type	Description
data-dragging	-	Present while the user is dragging.
data-orientation	`'horizontal' \| 'vertical'`	Indicates the orientation of the slider.
data-disabled	-	Present when the slider is disabled.
data-valid	-	Present when the slider is in a valid state (when wrapped in Field.Root).
data-invalid	-	Present when the slider is in an invalid state (when wrapped in Field.Root).
data-dirty	-	Present when the slider's value has changed (when wrapped in Field.Root).
data-touched	-	Present when the slider has been touched (when wrapped in Field.Root).
data-focused	-	Present when the slider is focused (when wrapped in Field.Root).

Control.Props

Re-export of Control props.

Control.State

type SliderControlState = {
  /** The index of the active thumb. */
  activeThumbIndex: number;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** Whether the thumb is currently being dragged. */
  dragging: boolean;
  /** The maximum value. */
  max: number;
  /** The minimum value. */
  min: number;
  /**
   * The minimum steps between values in a range slider.
   * @default 0
   */
  minStepsBetweenValues: number;
  /** The component orientation. */
  orientation: Orientation;
  /**
   * The step increment of the slider when incrementing or decrementing. It will snap
   * to multiples of this value. Decimal values are supported.
   * @default 1
   */
  step: number;
  /** The raw number value of the slider. */
  values: number[];
  /** Whether the field has been touched. */
  touched: boolean;
  /** Whether the field value has changed from its initial value. */
  dirty: boolean;
  /** Whether the field is valid. */
  valid: boolean | null;
  /** Whether the field has a value. */
  filled: boolean;
  /** Whether the field is focused. */
  focused: boolean;
};

Label

An accessible label that is automatically associated with the slider thumbs. Renders a <div> element.

Label Props:

Prop	Type	Default	Description
className	`string \| ((state: Slider.Root.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: Slider.Root.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: Slider.Root.State) => ReactElement)`	-	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.

Label.Props

Re-export of Label props.

Label.State

type SliderLabelState = {
  /** The index of the active thumb. */
  activeThumbIndex: number;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** Whether the thumb is currently being dragged. */
  dragging: boolean;
  /** The maximum value. */
  max: number;
  /** The minimum value. */
  min: number;
  /**
   * The minimum steps between values in a range slider.
   * @default 0
   */
  minStepsBetweenValues: number;
  /** The component orientation. */
  orientation: Orientation;
  /**
   * The step increment of the slider when incrementing or decrementing. It will snap
   * to multiples of this value. Decimal values are supported.
   * @default 1
   */
  step: number;
  /** The raw number value of the slider. */
  values: number[];
  /** Whether the field has been touched. */
  touched: boolean;
  /** Whether the field value has changed from its initial value. */
  dirty: boolean;
  /** Whether the field is valid. */
  valid: boolean | null;
  /** Whether the field has a value. */
  filled: boolean;
  /** Whether the field is focused. */
  focused: boolean;
};

Additional Types

SliderRootChangeEventCustomProperties

type SliderRootChangeEventCustomProperties = {
  /** The index of the active thumb at the time of the change. */
  activeThumbIndex: number;
};

ThumbMetadata

type ThumbMetadata = { inputId: string | undefined };

External Types

Orientation

type Orientation = 'horizontal' | 'vertical';

Export Groups

Slider.Root: Slider.Root, Slider.Root.State, Slider.Root.Props, Slider.Root.ChangeEventReason, Slider.Root.ChangeEventDetails, Slider.Root.CommitEventReason, Slider.Root.CommitEventDetails
Slider.Label: Slider.Label, Slider.Label.State, Slider.Label.Props
Slider.Value: Slider.Value, Slider.Value.State, Slider.Value.Props
Slider.Control: Slider.Control, Slider.Control.State, Slider.Control.Props
Slider.Track: Slider.Track, Slider.Track.State, Slider.Track.Props
Slider.Thumb: Slider.Thumb, Slider.Thumb.State, Slider.Thumb.Props
Slider.Indicator: Slider.Indicator, Slider.Indicator.State, Slider.Indicator.Props
Default: SliderRootState, SliderRootProps, SliderRootChangeEventCustomProperties, SliderRootChangeEventReason, SliderRootChangeEventDetails, SliderRootCommitEventReason, SliderRootCommitEventDetails, SliderLabelState, SliderLabelProps, SliderValueState, SliderValueProps, SliderControlState, SliderControlProps, SliderTrackState, SliderTrackProps, ThumbMetadata, SliderThumbState, SliderThumbProps, SliderIndicatorState, SliderIndicatorProps

Canonical Types

Maps Canonical: Alias — Use Canonical when its namespace is already imported; otherwise use Alias.

Slider.Root.State: SliderRootState
Slider.Root.Props: SliderRootProps
Slider.Root.ChangeEventReason: SliderRootChangeEventReason
Slider.Root.ChangeEventDetails: SliderRootChangeEventDetails
Slider.Root.CommitEventReason: SliderRootCommitEventReason
Slider.Root.CommitEventDetails: SliderRootCommitEventDetails
Slider.Label.State: SliderLabelState
Slider.Label.Props: SliderLabelProps
Slider.Value.State: SliderValueState
Slider.Value.Props: SliderValueProps
Slider.Control.State: SliderControlState
Slider.Control.Props: SliderControlProps
Slider.Track.State: SliderTrackState
Slider.Track.Props: SliderTrackProps
Slider.Thumb.State: SliderThumbState
Slider.Thumb.Props: SliderThumbProps
Slider.Indicator.State: SliderIndicatorState
Slider.Indicator.Props: SliderIndicatorProps