Slider

Slider generates a background element that can be used for various purposes.

Introduction

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

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

import Slider from '@mui/joy/Slider';

export default function MyApp() {
  return <Slider defaultValue={3} max={10} />;
}

Steps

Change the default step increments by setting a desired value to the step prop.

5e-8

<Slider
  aria-label="Small steps"
  defaultValue={0.00000005}
  getAriaValueText={valueText}
  step={0.00000001}
  marks
  min={-0.00000005}
  max={0.0000001}
  valueLabelDisplay="auto"
/>

Custom marks

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

<Slider
  aria-label="Custom marks"
  defaultValue={20}
  getAriaValueText={valueText}
  step={10}
  valueLabelDisplay="auto"
  marks={marks}
/>

Always visible label

To make the thumb label always visible, toggle on the valueLabelDisplay prop.

<Slider
  aria-label="Always visible"
  defaultValue={80}
  getAriaValueText={valueText}
  step={10}
  marks={marks}
  valueLabelDisplay="on"
/>

Vertical

Set orientation="vertical" to display the vertical slider.

<Slider
  orientation="vertical"
  aria-label="Always visible"
  defaultValue={80}
  getAriaValueText={valueText}
  step={10}
  marks={marks}
  valueLabelDisplay="on"
/>

Keep the label at edges

Apply the following styles to ensure that the label doesn't get cut off on mobile when it hits the edge of the slider.

0100

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:

2037

<Slider
  getAriaLabel={() => 'Temperature range'}
  value={value}
  onChange={handleChange}
  valueLabelDisplay="auto"
  getAriaValueText={valueText}
/>

Track

The slider's track shows how much of it has been selected. You can either invert it by assigning inverted to the track prop or remove it entirely by assigning a value of false.

Inverted track

Inverted track range

Removed track

Removed track range slider

CSS variables

Play around with all the CSS variables available in the slider component to see how the design changes.

You can use those to customize the component on both the sx prop and the theme.

<Slider />

CSS Variables

--Slider-track-size

--Slider-mark-size

--Slider-thumb-size

--Slider-thumb-width

--Slider-valueLabel-arrowSize

Unstyled

The component also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size.