Slider

The Slider component allows users to select a value from a range.

() => {
  const [value, setValue] = React.useState(0.5);
  return <Slider value={value} onChange={setValue} />;
}

Features

The Slider component is a versatile component that can be used in a variety of ways.

You can display a tooltip that shows the current value.

() => {
  const [value, setValue] = React.useState(0.5);
  return (
    <Slider
      value={value}
      onChange={setValue}
      tooltip={(progress) => <Tooltip label={Math.round(progress * 100)} />}
    />
  );
}

Note

For more information, see the Tooltip component.

The tooltip can be made to be always visible.

() => {
  const [value, setValue] = React.useState(0.5);
  return (
    <Slider
      value={value}
      onChange={setValue}
      persistentTooltip
      tooltip={(progress) => <Tooltip label={Math.round(progress * 100)} />}
    />
  );
}

Disabled State

You can disable the slider to prevent user interaction.

() => {
  const [value, setValue] = React.useState(0.5);
  return <Slider value={value} onChange={setValue} disabled />;
}

Drag End

You can listen for when the user stops dragging the handle. This can be useful if you don’t want to update the value on every drag. For example, if you’re using a slider to control the seek position of a video, you don’t want to update the value on every drag, but only when the user stops dragging.

() => {
  const [value, setValue] = React.useState(0.5);
  const [finalValue, setFinalValue] = React.useState(value);
  return (
    <Column gap={400} align="center">
      <Slider value={value} onChange={setValue} onDragEnd={setFinalValue} />
      <Text font={5}>{finalValue.toFixed(2)}</Text>
    </Column>
  );
}

Limitations

Range

Warning

At the moment, the Slider does not support min and max props. The value must always be between 0 and 1. If you’re after a different range, you will need to map the value to your desired range manually.

() => {
  const [value, setValue] = React.useState(0);
  return (
    <Column gap={400} align="center">
      <Slider
        value={(value + 1) / 2}
        onChange={(value) => setValue(value * 2 - 1)}
      />
      <Text font={5}>{value.toFixed(2)}</Text>
    </Column>
  );
}

Step

Warning

The Slider component does not support a step prop just yet. The value is always continuous. You can however, use the onChange prop to round the value to a specific step. The example below shows how to round the value to the nearest 10.

() => {
  const [value, setValue] = React.useState(50);
  return (
    <Column gap={400} align="center">
    <Slider
      value={value / 100}
        onChange={(value) => setValue(Math.round(value * 10) * 10)}
      />
      <Text font={5}>{value}</Text>
    </Column>
  );
}

Control

Warning

The Slider component can only be used as a controlled component. You must provide a value and onChange prop.

Anatomy

1.SliderThe slider itself is a `Box` component.

2.TrackThe track that the handle slides on is a `LinearProgress` component.

3.HandleThe handle that the user can drag.

Reference

Props

The Slider component inherits all of the props from the Box component and adds the following props.

Name	Type	Default	Description
`value`	`number`	-	The current value of the slider.
`onChange`	`(value: number) => void`	-	Callback fired when the value changes.
`onDragEnd`	`(value: number) => void`	-	Callback fired when the user stops dragging the handle.
`persistentTooltip`	`boolean`	`false`	Whether the tooltip is always visible.
`disabled`	`boolean`	`false`	Whether the slider is disabled.
`tooltip`	`(progress: number) => ReactNode`	-	A function that returns a tooltip to display.
`initial`	`boolean`	`false`	Whether to animate the initial progress.
`transition`	`Transition`	-	The transition to use for the progress animation.

Tokens

Key	Default Value
`slider.row.base.borderRadius`	`none`
`slider.row.variants.disabled.true.opacity`	`var(--_1i4ikbk2i)`
`slider.track.base.height`	`calc(var(--gpqiqca) / 4)`
`slider.track.variants.active.true.backgroundColor`	`var(--_1i4ikbk0)`
`slider.track.variants.active.true.:hover.backgroundColor`	`color-mix(in srgb, var(--_1i4ikbk0) 95%, var(--_1i4ikbkv) 5%)`
`slider.track.variants.active.true.:focus-visible.backgroundColor`	`color-mix(in srgb, var(--_1i4ikbk0) 95%, var(--_1i4ikbkv) 5%)`
`slider.track.variants.active.true.:active.backgroundColor`	`color-mix(in srgb, var(--_1i4ikbk0) 95%, var(--_1i4ikbkv) 5%)`
`slider.track.variants.active.true.:disabled.backgroundColor`	`var(--_1i4ikbk0)`
`slider.track.variants.active.false.backgroundColor`	`var(--_1i4ikbk12)`
`slider.track.variants.active.false.:hover.backgroundColor`	`var(--_1i4ikbk12)`
`slider.track.variants.active.false.:focus-visible.backgroundColor`	`var(--_1i4ikbk12)`
`slider.track.variants.active.false.:active.backgroundColor`	`var(--_1i4ikbk12)`
`slider.track.variants.active.false.:disabled.backgroundColor`	`var(--_1i4ikbk12)`
`slider.handle.base.backgroundColor`	`var(--_1i4ikbk0)`
`slider.handle.base.borderRadius`	`var(--gpqiqdz)`
`slider.handle.base.height`	`var(--gpqiqca)`
`slider.handle.base.width`	`var(--gpqiqca)`
`slider.handle.base.:hover.backgroundColor`	`color-mix(in srgb, var(--_1i4ikbk0) 95%, var(--_1i4ikbkv) 5%)`
`slider.handle.base.:focus-visible.backgroundColor`	`color-mix(in srgb, var(--_1i4ikbk0) 95%, var(--_1i4ikbkv) 5%)`
`slider.handle.base.:focus-visible.outlineWidth`	`var(--_1i4ikbk2e)`
`slider.handle.base.:focus-visible.outlineStyle`	`var(--_1i4ikbk2f)`
`slider.handle.base.:focus-visible.outlineColor`	`var(--_1i4ikbk2g)`
`slider.handle.base.:focus-visible.outlineOffset`	`var(--_1i4ikbk2h)`
`slider.handle.base.:active.backgroundColor`	`color-mix(in srgb, var(--_1i4ikbk0) 95%, var(--_1i4ikbkv) 5%)`
`slider.handle.base.:disabled.backgroundColor`	`var(--_1i4ikbk0)`

Slider

Features

Tooltip

Persistent Tooltip

Disabled State

Drag End

Limitations

Range

Step

Control

Anatomy

Reference

Props

Tokens