Slider

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

Introduction

The 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 Slider from '@mui/base/Slider';

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

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 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>

Custom structure

Use the slots prop to override the root or any other interior slot:

<Slider 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:

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

Usage with TypeScript

In TypeScript, you can specify the custom component type used in the slots.root as a generic parameter of the unstyled component. This way, you can safely provide the custom root's props directly on the component:

<Slider<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />

The same applies for props specific to custom primitive elements:

<Slider<'input'> slots={{ root: 'input' }} autoFocus={true} />

Hook

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

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

Vertical

Slider components can be arranged vertically as well as horizontally.

When vertical, you must set orientation="vertical" on the <Slider /> component so the user can navigate with the up and down arrow keys (rather than the default left-to-right behavior for horizontal sliders).

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}:

Custom marks

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

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:

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:

Value label

A label for the value can be rendered around the thumb by using the optional slots prop with the valueLabel slot. These are the typical use cases for showing the value label:

• always
• only when hovering over the thumb (using CSS)
• while interacting with the thumb (hovering or dragging)

The following demo shows how to render the value label when the mouse is hovering over the thumb:

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.