Skip to contents

Slider

An easily stylable range input.

View as MarkdownView source
import { Slider } from 'base-ui-solid/slider';
import styles from './index.module.css';

export default function ExampleSlider() {
  return (
    <Slider.Root defaultValue={25}>
      <Slider.Control class={styles.Control}>
        <Slider.Track class={styles.Track}>
          <Slider.Indicator class={styles.Indicator} />
          <Slider.Thumb aria-label="Volume" class={styles.Thumb} />
        </Slider.Track>
      </Slider.Control>
    </Slider.Root>
  );
}

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-solid/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 />
      <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>
  <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 />
      <Slider.Thumb index={0} aria-label="Minimum price" />
      <Slider.Thumb index={1} aria-label="Maximum price" />
    </Slider.Track>
  </Slider.Control>
</Slider.Root>

Range slider

To create a range slider:

  1. Pass an array of values and place a <Slider.Thumb> for each value in the array
  2. 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>.

import { Slider } from 'base-ui-solid/slider';
import styles from './index.module.css';

export default function RangeSlider() {
  return (
    <Slider.Root defaultValue={[25, 45]}>
      <Slider.Control class={styles.Control}>
        <Slider.Track class={styles.Track}>
          <Slider.Indicator class={styles.Indicator} />
          <Slider.Thumb index={0} aria-label="Minimum value" class={styles.Thumb} />
          <Slider.Thumb index={1} aria-label="Maximum value" class={styles.Thumb} />
        </Slider.Track>
      </Slider.Control>
    </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.

Font weight
400
import { Slider } from 'base-ui-solid/slider';
import styles from './index.module.css';

export default function StepsSlider() {
  return (
    <Slider.Root
      class={styles.Root}
      defaultValue={400}
      min={100}
      max={900}
      step={100}
      largeStep={200}
    >
      <Slider.Label class={styles.Label}>Font weight</Slider.Label>
      <Slider.Value class={styles.Value} />
      <Slider.Control class={styles.Control}>
        <Slider.Track class={styles.Track}>
          <Slider.Indicator class={styles.Indicator} />
          <Slider.Thumb class={styles.Thumb} />
        </Slider.Track>
      </Slider.Control>
    </Slider.Root>
  );
}

Marks

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

import { For } from 'solid-js';
import { Slider } from 'base-ui-solid/slider';
import styles from './index.module.css';

const MIN = 0;
const MAX = 100;
const MARKS = [0, 25, 50, 75, 100];

export default function MarksSlider() {
  return (
    <Slider.Root class={styles.Root} defaultValue={40} min={MIN} max={MAX}>
      <Slider.Control class={styles.Control}>
        <Slider.Track class={styles.Track}>
          <Slider.Indicator class={styles.Indicator} />
          <For each={MARKS}>
            {(mark) => (
              <div
                aria-hidden="true"
                class={styles.Mark}
                style={{ left: `${valueToPercent(mark)}%` }}
              />
            )}
          </For>
          <Slider.Thumb aria-label="Volume" class={styles.Thumb} />
        </Slider.Track>
      </Slider.Control>
      <div class={styles.MarkLabels} aria-hidden="true">
        <For each={MARKS}>
          {(mark) => (
            <span class={styles.MarkLabel} style={{ left: `${valueToPercent(mark)}%` }}>
              {mark}
            </span>
          )}
        </For>
      </div>
    </Slider.Root>
  );
}

function valueToPercent(value: number) {
  return ((value - MIN) / (MAX - MIN)) * 100;
}

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 Solid hydration.

import { Slider } from 'base-ui-solid/slider';
import styles from './index.module.css';

export default function EdgeAlignedThumb() {
  return (
    <Slider.Root thumbAlignment="edge" defaultValue={25}>
      <Slider.Control class={styles.Control}>
        <Slider.Track class={styles.Track}>
          <Slider.Indicator class={styles.Indicator} />
          <Slider.Thumb aria-label="Volume" class={styles.Thumb} />
        </Slider.Track>
      </Slider.Control>
    </Slider.Root>
  );
}

Vertical

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

import { Slider } from 'base-ui-solid/slider';
import styles from './index.module.css';

export default function VerticalSlider() {
  return (
    <Slider.Root orientation="vertical" defaultValue={35}>
      <Slider.Control class={styles.Control}>
        <Slider.Track class={styles.Track}>
          <Slider.Indicator class={styles.Indicator} />
          <Slider.Thumb aria-label="Volume" class={styles.Thumb} />
        </Slider.Track>
      </Slider.Control>
    </Slider.Root>
  );
}

Form integration

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

Using Slider in a form
<Form>
  <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>
  <Fieldset.Root render={(props) => <Slider.Root {...props} defaultValue={[25, 75]} />}>
    <Fieldset.Legend>Price range</Fieldset.Legend>
    <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>
  </Fieldset.Root>
</Field.Root>

API reference

Root

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

Prop
Type
Default
namestring—
Identifies the field when a form is submitted.string
defaultValueUnion—
The uncontrolled value of the slider when it’s initially rendered. To render a controlled slider, use the value prop instead.number | number[]
valueUnion—
The value of the slider. For range sliders, provide an array with one value per thumb.number | number[]
onValueChangefunction—
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: number | number[], eventDetails: Slider.Root.ChangeEventDetails) => void)
onValueCommittedfunction—
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((value: number | number[], eventDetails: Slider.Root.CommitEventDetails) => void)
formstring—
Identifies the form that owns the slider inputs. Useful when the slider is rendered outside the form.string
localeIntl.LocalesArgument—
The locale used by Intl.NumberFormat when formatting the value. Defaults to the user’s runtime locale.Intl.LocalesArgument
thumbAlignmentUnion'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 edgeedge: The thumb is inset within the control such that its edge is aligned with the control edgeedge-client-only: Same as edge but renders after Solid hydration on the client, reducing bundle size in return'center' | 'edge' | 'edge-client-only'
thumbCollisionBehaviorUnion'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.'push' | 'swap' | 'none'
stepnumber1
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.number
largeStepnumber10
The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.number
minStepsBetweenValuesnumber0
The minimum steps between values in a range slider.number
minnumber0
The minimum allowed value of the slider. Should not be equal to max.number
maxnumber100
The maximum allowed value of the slider. Should not be equal to min.number
formatIntl.NumberFormatOptions—
Options to format the value.Intl.NumberFormatOptions
disabledbooleanfalse
Whether the slider should ignore user interaction.boolean
orientationOrientation'horizontal'
The component orientation.Orientation
classfunction—
CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)
stylefunction—
Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)
renderfunction—
Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Data attributes

Name
Type
Default
data-dragging-—
Present while the user is dragging.-
data-orientationUnion—
Indicates the orientation of the slider.'horizontal' | 'vertical'
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).-
Attribute
Description
data-dragging
Present while the user is dragging.
data-orientation
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.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 };

Label

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

Prop
Type
Default
classfunction—
CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)
stylefunction—
Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)
renderfunction—
Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)
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;
};

Value

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

Prop
Type
Default
childrenfunction—
-((formattedValues: string[], values: number[]) => JSX.Element) | null
classfunction—
CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)
stylefunction—
Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)
renderfunction—
Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Data attributes

Name
Type
Default
data-dragging-—
Present while the user is dragging.-
data-orientationUnion—
Indicates the orientation of the slider.'horizontal' | 'vertical'
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).-
Attribute
Description
data-dragging
Present while the user is dragging.
data-orientation
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.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;
};

Control

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

Prop
Type
Default
classfunction—
CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)
stylefunction—
Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)
renderfunction—
Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Data attributes

Name
Type
Default
data-dragging-—
Present while the user is dragging.-
data-orientationUnion—
Indicates the orientation of the slider.'horizontal' | 'vertical'
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).-
Attribute
Description
data-dragging
Present while the user is dragging.
data-orientation
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.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;
};

Track

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

Prop
Type
Default
classfunction—
CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)
stylefunction—
Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)
renderfunction—
Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Data attributes

Name
Type
Default
data-dragging-—
Present while the user is dragging.-
data-orientationUnion—
Indicates the orientation of the slider.'horizontal' | 'vertical'
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).-
Attribute
Description
data-dragging
Present while the user is dragging.
data-orientation
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.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;
};

Indicator

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

Prop
Type
Default
classfunction—
CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)
stylefunction—
Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)
renderfunction—
Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Data attributes

Name
Type
Default
data-dragging-—
Present while the user is dragging.-
data-orientationUnion—
Indicates the orientation of the slider.'horizontal' | 'vertical'
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).-
Attribute
Description
data-dragging
Present while the user is dragging.
data-orientation
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.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;
};

Thumb

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

Prop
Type
Default
aria-valuetextstring—
A string value forwarded to the [aria-valuetext](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuetext) attribute of the input. Ignored when getAriaValueText is provided.string
getAriaLabelfunction—
A function which returns a string value for the [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label) attribute of the input.((index: number) => string) | null
getAriaValueTextfunction—
A function which returns a string value for the [aria-valuetext](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuetext) attribute of the input. This is important for screen reader users.((formattedValue: string, value: number, index: number) => string) | null
indexnumber—
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.number
onBlurFocusEventHandler<HTMLInputElement>—
A blur handler forwarded to the input.FocusEventHandler<HTMLInputElement>
onFocusFocusEventHandler<HTMLInputElement>—
A focus handler forwarded to the input.FocusEventHandler<HTMLInputElement>
onKeyDownKeyboardEventHandler<HTMLInputElement>—
A keydown handler forwarded to the input.KeyboardEventHandler<HTMLInputElement>
tabIndexnumber—
Optional tab index attribute forwarded to the input.number
disabledbooleanfalse
Whether the thumb should ignore user interaction.boolean
inputRefRef<HTMLInputElement>—
A ref to access the nested input element.Ref<HTMLInputElement>
classfunction—
CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)
stylefunction—
Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)
renderfunction—
Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Data attributes

Name
Type
Default
data-dragging-—
Present while the user is dragging.-
data-orientationUnion—
Indicates the orientation of the slider.'horizontal' | 'vertical'
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.-
Attribute
Description
data-dragging
Present while the user is dragging.
data-orientation
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.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;
};