Slider

The Slider component provides users with an input for a one or more numerical values within a given range.

Volume50

'use client';
import * as React from 'react';
import { useTheme } from '@mui/system';
import * as Slider from '@base_ui/react/Slider';

export default function UnstyledSliderIntroduction() {
  // Replace this with your app logic for determining dark mode
  const isDarkMode = useIsDarkMode();
  return (
    <div
      className={isDarkMode ? 'dark' : ''}
      style={{ display: 'flex', flexDirection: 'column', gap: '4rem', width: 320 }}
    >
      <Slider.Root
        className="Slider"
        defaultValue={50}
        aria-labelledby="VolumeSliderLabel"
      >
        <Label id="VolumeSliderLabel" className="Slider-label">
          Volume
        </Label>
        <Slider.Output className="Slider-output" />
        <Slider.Control className="Slider-control">
          <Slider.Track className="Slider-track">
            <Slider.Indicator className="Slider-indicator" />
            <Slider.Thumb className="Slider-thumb" />
          </Slider.Track>
        </Slider.Control>
      </Slider.Root>
      <Styles />
    </div>
  );
}

function Label(props: React.HTMLAttributes<HTMLLabelElement>) {
  const { id, ...otherProps } = props;
  const { subitems, disabled } = Slider.useSliderContext();

  const htmlFor = Array.from(subitems.values())
    .reduce((acc, item) => {
      return `${acc} ${item.inputId}`;
    }, '')
    .trim();

  return (
    <label id={id} htmlFor={htmlFor} data-disabled={disabled} {...otherProps} />
  );
}

const grey = {
  50: '#F3F6F9',
  100: '#E5EAF2',
  200: '#DAE2ED',
  300: '#C7D0DD',
  400: '#B0B8C4',
  500: '#9DA8B7',
  600: '#6B7A90',
  700: '#434D5B',
  800: '#303740',
  900: '#1C2025',
};

function useIsDarkMode() {
  const theme = useTheme();
  return theme.palette.mode === 'dark';
}

function Styles() {
  return (
    <style suppressHydrationWarning>{`
    .Slider {
      font-family: 'IBM Plex Sans', sans-serif;
      font-size: 1rem;
      width: 100%;
      align-items: center;
      position: relative;
      -webkit-tap-highlight-color: transparent;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    .Slider-output {
      text-align: right;
    }

    .Slider-control {
      grid-column: 1/3;
      display: flex;
      align-items: center;
      position: relative;
      width: 100%;
      height: 16px;
      border-radius: 9999px;
      touch-action: none;
    }

    .Slider-track {
      width: 100%;
      height: 2px;
      border-radius: 9999px;
      background-color: ${grey[400]};
      touch-action: none;
    }

    .dark .Slider-track {
      background-color: ${grey[700]};
    }

    .Slider-control[data-disabled] {
      cursor: not-allowed;
    }

    .Slider-indicator {
      height: 2px;
      border-radius: 9999px;
      background-color: black;
    }

    .dark .Slider-indicator {
      background-color: ${grey[100]};
    }

    .Slider-thumb {
      width: 16px;
      height: 16px;
      box-sizing: border-box;
      border-radius: 50%;
      background-color: black;
      touch-action: none;

      &:focus-visible {
        outline: 2px solid black;
        outline-offset: 2px;
      }

      &[data-dragging] {
        background-color: pink;
      }

      &[data-disabled] {
        background-color: ${grey[300]};
      }
    }

    .dark .Slider-thumb {
      background-color: ${grey[100]};

      &:focus-visible {
        outline-color: ${grey[300]};
        outline-width: 1px;
        outline-offset: 3px;
      }

      &[data-disabled] {
        background-color: ${grey[600]};
      }
    }

    .Slider-label {
      cursor: unset;
      font-weight: bold;
    }

    .Slider-label[data-disabled='true'] {
      color: ${grey[600]};
    }
    `}</style>
  );
}

Installation

Base UI components are all available as a single package.

npm install @base_ui/react

Once you have the package installed, import the component.

import * as Slider from '@base_ui/react/Slider';

Anatomy

Sliders are implemented using a collection of related components:

<Slider.Root /> is a top-level component that wraps the other components.
<Slider.Output /> renders the value of the slider.
<Slider.Control /> renders the click/touch area that contains the track and thumb.
<Slider.Track /> renders the visible rail on the Control along which the thumb(s) can be moved.
<Slider.Indicator /> renders the filled portion of the track which represents the value(s).
<Slider.Thumb /> renders the element that can be moved along the track to change the value.

<Slider.Root>
  <Slider.Output />
  <Slider.Control>
    <Slider.Track>
      <Slider.Indicator />
      <Slider.Thumb />
    <Slider.Track/>
  </Slider.Control>
</Slider.Root>

Value

Default value

When Slider is uncontrolled, the defaultValue prop sets the initial value of the component.

function App() {
  return (
    <Slider.Root defaultValue={50}>
      <Slider.Output />
      <Slider.Control>
        <Slider.Track>
          <Slider.Indicator />
          <Slider.Thumb />
        <Slider.Track/>
      </Slider.Control>
    </Slider.Root>
  );
}

Controlled

When Slider is uncontrolled, the value prop holds the numerical value(s), and two callbacks are provided for when the value changes:

onValueChange is called when the value is changing while the thumb is being moved along the control area
onValueCommitted is called when thumb stops moving and either pointerup or keydown are triggered

function App() {
  const [value, setValue] = useState(50);
  return (
    <Slider.Root value={value} onValueChange={setValue}>
      <Slider.Output />
      <Slider.Control>
        <Slider.Track>
          <Slider.Indicator />
          <Slider.Thumb />
        <Slider.Track/>
      </Slider.Control>
    </Slider.Root>
  );
}

Validation

Min and max

The min and max props can be used to restrict the value(s) within a range.

<Slider.Root min={1} max={9}>
  <Slider.Output />
  <Slider.Control>
    <Slider.Track>
      <Slider.Indicator />
      <Slider.Thumb />
    <Slider.Track/>
  </Slider.Control>
</Slider.Root>

The step prop snaps each value to multiples of the given number. In the below example, the input value snaps to increments of 4 starting from the initial defaultValue: 3, 7, 11, 15, and so on.

<Slider.Root step={4} defaultValue={3}>
  <Slider.Output />
  <Slider.Control>
    <Slider.Track>
      <Slider.Indicator />
      <Slider.Thumb />
    <Slider.Track/>
  </Slider.Control>
</Slider.Root>

You can specify the largeStep prop to change the step when the user holds the shift key, snapping to multiples of 10 by default.

Range Sliders

To let users set the start and end of a range on a Slider, provide an array of values to the value or defaultValue prop, and place a <Slider.Thumb /> for each value in the array:

<Slider.Root defaultValue={[45, 70]}>
  <Slider.Output />
  <Slider.Control>
    <Slider.Track>
      <Slider.Indicator />
      <Slider.Thumb />
      <Slider.Thumb />
    <Slider.Track/>
  </Slider.Control>
</Slider.Root>

Controlled Range20 – 37

Uncontrolled Range20 – 37

'use client';
import * as React from 'react';
import { styled, useTheme, Box } from '@mui/system';
import * as BaseSlider from '@base_ui/react/Slider';

export default function RangeSlider() {
  // Replace this with your app logic for determining dark mode
  const isDarkMode = useIsDarkMode();
  const [value, setValue] = React.useState<number | number[]>([20, 37]);

  return (
    <Box
      className={isDarkMode ? 'dark' : ''}
      sx={{ display: 'flex', flexDirection: 'column', gap: '4rem', width: 320 }}
    >
      {/* controlled: */}
      <Slider
        value={value}
        onValueChange={setValue}
        aria-labelledby="ControlledRangeLabel"
      >
        <Label id="ControlledRangeLabel">Controlled Range</Label>
        <SliderOutput />
        <SliderControl>
          <SliderTrack>
            <SliderIndicator />
            <SliderThumb />
            <SliderThumb />
          </SliderTrack>
        </SliderControl>
      </Slider>
      {/* uncontrolled: */}
      <Slider defaultValue={[20, 37]} aria-labelledby="UncontrolledRangeLabel">
        <Label id="UncontrolledRangeLabel">Uncontrolled Range</Label>
        <SliderOutput />
        <SliderControl>
          <SliderTrack>
            <SliderIndicator />
            <SliderThumb />
            <SliderThumb />
          </SliderTrack>
        </SliderControl>
      </Slider>
    </Box>
  );
}

const grey = {
  50: '#F3F6F9',
  100: '#E5EAF2',
  200: '#DAE2ED',
  300: '#C7D0DD',
  400: '#B0B8C4',
  500: '#9DA8B7',
  600: '#6B7A90',
  700: '#434D5B',
  800: '#303740',
  900: '#1C2025',
};

function useIsDarkMode() {
  const theme = useTheme();
  return theme.palette.mode === 'dark';
}

const Slider = styled(BaseSlider.Root)`
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1rem;
  width: 100%;
  align-items: center;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
`;

const SliderOutput = styled(BaseSlider.Output)`
  text-align: right;
`;

const SliderControl = styled(BaseSlider.Control)`
  grid-column: 1/3;
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  height: 16px;
  border-radius: 9999px;
  touch-action: none;

  &[data-disabled] {
    cursor: not-allowed;
  }
`;

const SliderTrack = styled(BaseSlider.Track)`
  width: 100%;
  height: 2px;
  border-radius: 9999px;
  background-color: ${grey[400]};
  touch-action: none;

  .dark & {
    background-color: ${grey[700]};
  }
`;

const SliderIndicator = styled(BaseSlider.Indicator)`
  border-radius: 9999px;
  background-color: black;

  .dark & {
    background-color: ${grey[100]};
  }
`;

const SliderThumb = styled(BaseSlider.Thumb)`
  position: absolute;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: black;
  transform: translateX(-50%);
  touch-action: none;

  &:focus-visible {
    outline: 2px solid black;
    outline-offset: 2px;
  }

  .dark & {
    background-color: ${grey[300]};
  }

  .dark &:focus-visible {
    outline-color: ${grey[300]};
    outline-width: 1px;
    outline-offset: 3px;
  }

  &[data-dragging='true'] {
    background-color: pink;
  }

  &[data-disabled],
  .dark &[data-disabled] {
    background-color: ${grey[600]};
  }

  .dark &[data-dragging='true'] {
    background-color: pink;
  }
`;

// we can't use a <label> element in a range slider since the `for` attribute
// cannot reference more than one <input> element
// the html spec doesn't forbid <label> without `for` https://html.spec.whatwg.org/multipage/forms.html#the-label-element
// but eslint complains by default and a11y validators may complain e.g. WAVE
const Label = styled('span')`
  cursor: unset;
  font-weight: bold;

  &[data-disabled='true'] {
    color: ${grey[600]};
  }
`;

Overlapping values

The minStepsBetweenValues prop can be used to to set the mininum number of steps between values in a range slider, so thumbs do not overlap in the same position:

<Slider.Root minStepsBetweenValues={2} step={5} defaultValue={[10, 20]}>
  <Slider.Control>
    <Slider.Track>
      <Slider.Indicator />
      <Slider.Thumb />
      <Slider.Thumb />
    <Slider.Track/>
  </Slider.Control>
</Slider.Root>

Vertical

To create vertical sliders, set the orientation prop to "vertical". This will track thumb movements vertically instead of horizontally.

<Slider.Root orientation="vertical">{/* Subcomponents */}</Slider.Root>

Volume50

'use client';
import * as React from 'react';
import * as Slider from '@base_ui/react/Slider';
import { useTheme } from '@mui/system';

export default function VerticalSlider() {
  // Replace this with your app logic for determining dark mode
  const isDarkMode = useIsDarkMode();
  return (
    <div className={isDarkMode ? 'dark' : ''}>
      <Slider.Root
        defaultValue={50}
        orientation="vertical"
        aria-labelledby="VolumeSliderLabel"
        className="VerticalSlider"
      >
        <Label id="VolumeSliderLabel" className="Label">
          Volume
        </Label>
        <Slider.Control className="VerticalSlider-control">
          <Slider.Track className="VerticalSlider-track">
            <Slider.Indicator className="VerticalSlider-indicator" />
            <Slider.Thumb className="VerticalSlider-thumb" />
          </Slider.Track>
        </Slider.Control>
        <Slider.Output className="VerticalSlider-output" />
      </Slider.Root>
      <Styles />
    </div>
  );
}

function Styles() {
  return (
    <style suppressHydrationWarning>{`
      .VerticalSlider {
        font-family: 'IBM Plex Sans', sans-serif;
        font-size: 1rem;
        height: 100%;
        width: 5rem;
        align-items: center;
        position: relative;
        -webkit-tap-highlight-color: transparent;
        display: flex;
        flex-flow: column-reverse nowrap;
        gap: 1rem;
      }

      .VerticalSlider-output {
        font-size: 1.125rem;
      }

      .VerticalSlider-control {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        position: relative;
        width: 16px;
        height: 300px;
        border-radius: 9999px;
        touch-action: none;
      }

      .VerticalSlider-control[data-disabled='true'] {
        cursor: not-allowed;
      }

      .VerticalSlider-track {
        height: 100%;
        width: 2px;
        border-radius: 9999px;
        background-color: ${grey[400]};
        touch-action: none;
      }

      .dark .VerticalSlider-track {
        background-color: ${grey[700]};
      }

      .VerticalSlider-indicator {
        border-radius: 9999px;
        background-color: black;
      }

      .dark .VerticalSlider-indicator {
        background-color: ${grey[100]};
      }

      .VerticalSlider-thumb {
        position: absolute;
        width: 16px;
        height: 16px;
        box-sizing: border-box;
        border-radius: 50%;
        background-color: black;
        transform: translateY(50%);
        touch-action: none;
      }

      .VerticalSlider-thumb[data-dragging='true'],
      .dark .VerticalSlider-thumb[data-dragging='true'] {
        background-color: pink;
      }

      .dark .VerticalSlider-thumb {
        background-color: ${grey[100]};
      }

      .VerticalSlider-thumb:focus-visible {
        outline: 2px solid black;
        outline-offset: 2px;
      }

      .dark .VerticalSlider-thumb:focus-visible {
        outline-color: ${grey[300]};
        outline-width: 1px;
        outline-offset: 3px;
      }

      .VerticalSlider-thumb[data-disabled='true'] {
        background-color: ${grey[600]};
      }

      .Label {
        cursor: unset;
        font-weight: 700;
        font-size: 1rem;
        color: inherit;
      }

      .Label[data-disabled='true'] {
        color: ${grey[600]};
      }
    `}</style>
  );
}

function Label(props: React.HTMLAttributes<HTMLLabelElement>) {
  const { id, ...otherProps } = props;
  const { subitems, disabled } = Slider.useSliderContext();

  const htmlFor = Array.from(subitems.values())
    .reduce((acc, item) => {
      return `${acc} ${item.inputId}`;
    }, '')
    .trim();

  return (
    <label id={id} htmlFor={htmlFor} data-disabled={disabled} {...otherProps} />
  );
}

function useIsDarkMode() {
  const theme = useTheme();
  return theme.palette.mode === 'dark';
}

const grey = {
  50: '#F3F6F9',
  100: '#E5EAF2',
  200: '#DAE2ED',
  300: '#C7D0DD',
  400: '#B0B8C4',
  500: '#9DA8B7',
  600: '#6B7A90',
  700: '#434D5B',
  800: '#303740',
  900: '#1C2025',
};

RTL

Set the direction prop to 'rtl' to change the slider's direction for right-to-left languages:

<Slider.Root direction="rtl">{/* Subcomponents */}</Slider.Root>

In a RTL Slider, Left Arrow increases the value while Right Arrow decreases the value.

Volume (RTL)50

'use client';
import * as React from 'react';
import * as BaseSlider from '@base_ui/react/Slider';
import { styled, useTheme, Box } from '@mui/system';

export default function RtlSlider() {
  // Replace this with your app logic for determining dark mode
  const isDarkMode = useIsDarkMode();
  return (
    <Box className={isDarkMode ? 'dark' : ''} sx={{ width: 320, margin: '32px' }}>
      <Slider defaultValue={50} aria-labelledby="VolumeSliderLabel" direction="rtl">
        <Label id="VolumeSliderLabel">Volume (RTL)</Label>
        <SliderOutput />
        <SliderControl>
          <SliderTrack>
            <SliderIndicator />
            <SliderThumb />
          </SliderTrack>
        </SliderControl>
      </Slider>
    </Box>
  );
}

function BaseLabel(props: React.HTMLAttributes<HTMLLabelElement>) {
  const { id, ...otherProps } = props;
  const { subitems, disabled } = BaseSlider.useSliderContext();

  const htmlFor = Array.from(subitems.values())
    .reduce((acc, item) => {
      return `${acc} ${item.inputId}`;
    }, '')
    .trim();

  return (
    <label id={id} htmlFor={htmlFor} data-disabled={disabled} {...otherProps} />
  );
}

const grey = {
  50: '#F3F6F9',
  100: '#E5EAF2',
  200: '#DAE2ED',
  300: '#C7D0DD',
  400: '#B0B8C4',
  500: '#9DA8B7',
  600: '#6B7A90',
  700: '#434D5B',
  800: '#303740',
  900: '#1C2025',
};

function useIsDarkMode() {
  const theme = useTheme();
  return theme.palette.mode === 'dark';
}

const Slider = styled(BaseSlider.Root)`
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1rem;
  width: 100%;
  align-items: center;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
`;

const SliderOutput = styled(BaseSlider.Output)`
  text-align: left;
`;

const SliderControl = styled(BaseSlider.Control)`
  grid-column: 1/3;
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  height: 16px;
  border-radius: 9999px;
  touch-action: none;

  &[data-disabled='true'] {
    cursor: not-allowed;
  }
`;

const SliderTrack = styled(BaseSlider.Track)`
  width: 100%;
  height: 2px;
  border-radius: 9999px;
  background-color: ${grey[400]};
  touch-action: none;

  .dark & {
    background-color: ${grey[700]};
  }
`;

const SliderIndicator = styled(BaseSlider.Indicator)`
  border-radius: 9999px;
  background-color: black;

  .dark & {
    background-color: ${grey[100]};
  }
`;

const SliderThumb = styled(BaseSlider.Thumb)`
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: black;
  touch-action: none;

  &:focus-visible {
    outline: 2px solid black;
    outline-offset: 2px;
  }

  .dark & {
    background-color: ${grey[100]};
  }

  .dark &:focus-visible {
    outline-color: ${grey[300]};
    outline-width: 1px;
    outline-offset: 3px;
  }

  &[data-dragging='true'] {
    background-color: pink;
  }

  &[data-disabled='true'],
  .dark &[data-disabled='true'] {
    background-color: ${grey[600]};
  }

  .dark &[data-dragging='true'] {
    background-color: pink;
  }
`;

const Label = styled(BaseLabel)`
  cursor: unset;
  font-weight: bold;

  &[data-disabled='true'] {
    color: ${grey[600]};
  }
`;

Overriding default components

Use the render prop to override the rendered elements with your own components.

<Slider.Control render={(props) => <MyCustomTrack {...props} />}> />

All subcomponents accept the render prop.

The Slider.Thumb component's render prop contains an additional inputProps argument for rendering an input element attached to the thumb:

<Slider.Thumb
  render={(props, inputProps) => {
    const { children, ...other } = props;
    return (
      <MyCustomThumb {...other}>
        {children}
        <input {...inputProps}>
      <MyCustomThumb/>
    )
  }}>
/>

It's handled automatically if you use the shorthand:

<Slider.Thumb render={<MyCustomThumb />} />

Accessibility

See the WAI-ARIA guide on the Slider (Multi-Thumb) pattern for complete details on accessibility best practices.

The component handles most of the work necessary to make it accessible. However, you need to make sure that:

Each thumb has a user-friendly label (aria-label, aria-labelledby or getAriaLabel prop).
Each thumb has a user-friendly text for its current value. This is not required if the value matches the semantics of the label. You can change the name with the getAriaValueText or aria-valuetext prop.

API Reference

SliderRoot

Prop	Type	Default	Description
`aria-labelledby`	`string`		The id of the element containing a label for the slider.
`className`	`union`		Class names applied to the element or a function that returns them based on the component's state.
`defaultValue`	`union`		The default value of the slider. Use when the component is not controlled.
`direction`	`enum`	`'ltr'`	Sets the direction. For right-to-left languages, the lowest value is on the right-hand side.
`disabled`	`bool`	`false`	If `true`, the component is disabled.
`id`	`string`		The id of the slider element.
`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.
`max`	`number`	`100`	The maximum allowed value of the slider. Should not be equal to min.
`min`	`number`	`0`	The minimum allowed value of the slider. Should not be equal to max.
`minStepsBetweenValues`	`number`	`0`	The minimum steps between values in a range slider.
`name`	`string`		Name attribute of the hidden `input` element.
`onValueChange`	`func`		Callback function that is fired when the slider's value changed.
`onValueCommitted`	`func`		Callback function that is fired when the `pointerup` is triggered.
`orientation`	`enum`	`'horizontal'`	The component orientation.
`render`	`union`		A function to customize rendering of the component.
`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.
`tabIndex`	`number`		Tab index attribute of the Thumb component's `input` element.
`value`	`union`		The value of the slider. For ranged sliders, provide an array with two values.

SliderOutput

Prop	Type	Default	Description
`className`	`union`		Class names applied to the element or a function that returns them based on the component's state.
`render`	`union`		A function to customize rendering of the component.

SliderControl

Prop	Type	Default	Description
`className`	`union`		Class names applied to the element or a function that returns them based on the component's state.
`render`	`union`		A function to customize rendering of the component.

SliderTrack

Prop	Type	Default	Description
`className`	`union`		Class names applied to the element or a function that returns them based on the component's state.
`render`	`union`		A function to customize rendering of the component.

SliderThumb

Prop	Type	Description
`aria-label`	`string`	The label for the input element.
`aria-valuetext`	`string`	A string value that provides a user-friendly name for the current value of the slider.
`className`	`union`	Class names applied to the element or a function that returns them based on the component's state.
`getAriaLabel`	`func`	Accepts a function which returns a string value that provides a user-friendly name for the input associated with the thumb
`getAriaValueText`	`func`	Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider. This is important for screen reader users.
`render`	`union`	A function to customize rendering of the component.

SliderIndicator

Prop	Type	Default	Description
`className`	`union`		Class names applied to the element or a function that returns them based on the component's state.
`render`	`union`		A function to customize rendering of the component.

Edit this page on GitHub

Separator

Switch

Getting started

Components

How-to guides