Unstyled Slider

A slider is a UI element that lets users select a single value or a range of values along a bar.

Introduction

The Unstyled Slider component lets users make selections from a range of values along a horizontal or vertical bar.

Sliders are ideal for interface controls that benefit from a visual representation of adjustable content, such as volume or brightness settings, or for applying image filters such as gradients or saturation.

Component

Usage

After installation, you can start building with this component using the following basic elements:

import SliderUnstyled from '@mui/base/SliderUnstyled';

export default function MyApp() {
  return <SliderUnstyled />;
}

Basics

The following demo shows how to create and style two basic sliders. Notice that both are set to a default value of 10 with the defaultValue prop, and the second slider cannot be adjusted due to the disabled prop:

Anatomy

The Unstyled Slider component is composed of a root <span> that houses several interior <span> elements:

rail: the full length of the slider
track: the section of the slider that's active
thumb: the button that the user moves across the slider
mark: optional pre-defined stops along the track
markLabel: optional label to display the mark's value
valueLabel: optional label to display the values on a range slider

<span class="MuiSlider-root">
  <span class="MuiSlider-rail"></span>
  <span class="MuiSlider-track"></span>
  <span
    data-index="0"
    class="MuiSlider-mark MuiSlider-markActive"
    style="left: 0%;"
  ></span>
  <span
    aria-hidden="true"
    data-index="0"
    class="MuiSlider-markLabel MuiSlider-markLabelActive"
    style="left: 0%;"
    >0</span
  >
  <span data-index="1" class="MuiSlider-mark" style="left: 50%;"></span>
  <span
    aria-hidden="true"
    data-index="1"
    class="MuiSlider-markLabel"
    style="left: 50%;"
    >50</span
  >
  <span data-index="2" class="MuiSlider-mark" style="left: 100%;"></span>
  <span
    aria-hidden="true"
    data-index="2"
    class="MuiSlider-markLabel"
    style="left: 100%;"
    >100</span
  >
  <span class="MuiSlider-thumb">
    <input />
  </span>
</span>

Slot props

Use the component prop to override the root slot with a custom element:

<SliderUnstyled component="div" />

Use the slots prop to override any interior slots in addition to the root:

<SliderUnstyled slots={{ root: 'div', thumb: 'div' }} />

Use the slotProps prop to pass custom props to internal slots. The following code snippet applies a CSS class called my-rail to the rail slot:

<SliderUnstyled slotProps={{ rail: { className: 'my-rail' } }} />

Hook

import { useSlider } from '@mui/base/SliderUnstyled';

The useSlider hook lets you apply the functionality of a slider to a fully custom component. It returns props to be placed on the custom component, along with fields representing the component's internal state.

Hooks do not support slot props, but they do support customization props.

Customization

Discrete sliders

The most basic slider is continuous, which means it does not have pre-defined (discrete) values for the user to select from. This is suitable for situations in which an approximate value is good enough for the user, such as brightness or volume.

But if your users need more precise options, you can create a discrete slider that snaps the thumb to pre-defined stops along the bar.

To generate a mark for each stop, use marks={true}:

<StyledSlider
  aria-label="Temperature"
  defaultValue={30}
  getAriaValueText={valuetext}
  valueLabelDisplay="auto"
  step={10}
  marks
  min={10}
  max={110}
/>

<StyledSlider
  aria-label="Temperature"
  defaultValue={30}
  getAriaValueText={valuetext}
  valueLabelDisplay="auto"
  step={10}
  marks
  min={10}
  max={110}
/>

Press Enter to start editing

Custom marks

You can create custom marks by providing a rich array to the marks prop:

<StyledSlider
  aria-label="Temperature"
  defaultValue={37}
  getAriaValueText={valuetext}
  marks={marks}
/>

<StyledSlider
  aria-label="Temperature"
  defaultValue={37}
  getAriaValueText={valuetext}
  marks={marks}
/>

Press Enter to start editing

Restricted values

If the user should only be able to select from the values provided with the marks prop, add step={null} to disable all other options:

<StyledSlider
  aria-label="Temperature"
  defaultValue={37}
  getAriaValueText={valuetext}
  step={null}
  marks={marks}
/>

<StyledSlider
  aria-label="Temperature"
  defaultValue={37}
  getAriaValueText={valuetext}
  step={null}
  marks={marks}
/>

Press Enter to start editing

Range slider

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:

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

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

<SliderUnstyled />