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

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}
  step={10}
  marks
  min={10}
  max={110}
  slots={{ valueLabel: SliderValueLabel }}
/>

<StyledSlider
  aria-label="Temperature"
  defaultValue={30}
  getAriaValueText={valuetext}
  step={10}
  marks
  min={10}
  max={110}
  slots={{ valueLabel: SliderValueLabel }}
/>

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:

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:

<StyledSlider defaultValue={10} slots={{ valueLabel: SliderValueLabel }} />

<StyledSlider defaultValue={10} slots={{ valueLabel: SliderValueLabel }} />

Press Enter to start editing

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.

SliderUnstyled API

Import

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

You can learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

Name	Type	Default	Description
aria-label	string		The label of the slider.
aria-labelledby	string		The id of the element containing a label for the slider.
aria-valuetext	string		A string value that provides a user-friendly name for the current value of the slider.
component	elementType		The component used for the root node. Either a string to use a HTML element or a component.
defaultValue	Array<number> \| number		The default value. Use when the component is not controlled.
disabled	bool	false	If `true`, the component is disabled.
disableSwap	bool	false	If `true`, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb.
getAriaLabel	func		Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider. This is important for screen reader users. Signature: `function(index: number) => string` index: The thumb label's index to format.
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. Signature: `function(value: number, index: number) => string` value: The thumb label's value to format. index: The thumb label's index to format.
isRtl	bool	false	If `true` the Slider will be rendered right-to-left (with the lowest value on the right-hand side).
marks	Array<{ label?: node, value: number }> \| bool	false	Marks indicate predetermined values to which the user can move the slider. If `true` the marks are spaced according the value of the `step` prop. If an array, it should contain objects with `value` and an optional `label` keys.
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.
name	string		Name attribute of the hidden `input` element.
onChange	func		Callback function that is fired when the slider's value changed. Signature: `function(event: Event, value: number \| Array<number>, activeThumb: number) => void` event: The event source of the callback. You can pull out the new value by accessing `event.target.value` (any). Warning: This is a generic event not a change event. value: The new value. activeThumb: Index of the currently moved thumb.
onChangeCommitted	func		Callback function that is fired when the `mouseup` is triggered. Signature: `function(event: React.SyntheticEvent \| Event, value: number \| Array<number>) => void` event: The event source of the callback. Warning: This is a generic event not a change event. value: The new value.
orientation	'horizontal' \| 'vertical'	'horizontal'	The component orientation.
scale	func	function Identity(x) { return x; }	A transformation function, to change the scale of the slider. Signature: `function(x: any) => any`
slotProps	{ input?: func \| object, mark?: func \| object, markLabel?: func \| object, rail?: func \| object, root?: func \| object, thumb?: func \| object, track?: func \| object, valueLabel?: any \| func }	{}	The props used for each slot inside the Slider.
slots	{ input?: elementType, mark?: elementType, markLabel?: elementType, rail?: elementType, root?: elementType, thumb?: elementType, track?: elementType, valueLabel?: elementType }	{}	The components used for each slot inside the Slider. Either a string to use a HTML element or a component. See Slots API below for more details.
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. When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop.
tabIndex	number		Tab index attribute of the hidden `input` element.
track	'inverted' \| 'normal' \| false	'normal'	The track presentation: - `normal` the track will render a bar representing the slider value. - `inverted` the track will render a bar representing the remaining slider value. - `false` the track will render without a bar.
value	Array<number> \| number		The value of the slider. For ranged sliders, provide an array with two values.
valueLabelFormat	func \| string	function Identity(x) { return x; }	The format function the value label's value. When a function is provided, it should have the following signature: - {number} value The value label's value to format - {number} index The value label's index to format

The ref is forwarded to the root element.

Slots

To learn how to customize the slot, check out the Overriding component structure guide.

Name	Default class	Default HTML tag	Description
root	.MuiSlider-root	'span'	The component that renders the root.
track	.MuiSlider-track	'span'	The component that renders the track.
rail	.MuiSlider-rail	'span'	The component that renders the rail.
thumb	.MuiSlider-thumb	'span'	The component that renders the thumb.
mark	.MuiSlider-mark	'span'	The component that renders the mark.
markLabel	.MuiSlider-markLabel	'span'	The component that renders the mark label.
valueLabel			The component that renders the value label.
input		'input'	The component that renders the input.

You can override the style of the component using one of these customization options:

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.

CSS classes

These class names are useful for styling with CSS. They are applied to the root slot when specific states are triggered.

Global class	Description
.Mui-active STATE	State class applied to the thumb element if it's active.
.Mui-disabled STATE	State class applied to the root and thumb element if `disabled={true}`.
.Mui-focusVisible STATE	State class applied to the thumb element if keyboard focused.
.MuiSlider-dragging	State class applied to the root if a thumb is being dragged.
.MuiSlider-markActive	Class name applied to the mark element if active (depending on the value).
.MuiSlider-marked	Class name applied to the root element if `marks` is provided with at least one label.
.MuiSlider-markLabelActive	Class name applied to the mark label element if active (depending on the value).
.MuiSlider-trackFalse	Class name applied to the root element if `track={false}`.
.MuiSlider-trackInverted	Class name applied to the root element if `track="inverted"`.
.MuiSlider-vertical	Class name applied to the root element if `orientation="vertical"`.

useSlider API

Import

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

You can learn about the difference by reading this guide on minimizing bundle size.

Parameters

Name	Type	Default	Description
ref^*	React.Ref<any>		The ref attached to the root of the Slider.
aria-labelledby	string		The id of the element containing a label for the slider.
defaultValue	number \| number[]		The default value. Use when the component is not controlled.
disabled	boolean	false	If `true`, the component is disabled.
disableSwap	boolean	false	If `true`, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb.
isRtl	boolean	false	If `true` the Slider will be rendered right-to-left (with the lowest value on the right-hand side).
marks	boolean \| Mark[]	false	Marks indicate predetermined values to which the user can move the slider. If `true` the marks are spaced according the value of the `step` prop. If an array, it should contain objects with `value` and an optional `label` keys.
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.
name	string		Name attribute of the hidden `input` element.
onChange	(event: Event, value: number \| number[], activeThumb: number) => void		Callback function that is fired when the slider's value changed.
onChangeCommitted	(event: React.SyntheticEvent \| Event, value: number \| number[]) => void		Callback function that is fired when the `mouseup` is triggered.
orientation	'horizontal' \| 'vertical'	'horizontal'	The component orientation.
scale	(value: number) => number	function Identity(x) { return x; }	A transformation function, to change the scale of the slider.
step	number \| null	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. When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop.
tabIndex	number		Tab index attribute of the hidden `input` element.
value	number \| number[]		The value of the slider. For ranged sliders, provide an array with two values.

Return value

Name	Type	Default	Description
active	number	-1	The active index of the slider.
axis	Axis	horizontal	The orientation of the slider.
axisProps	{ [key in Axis]: AxisProps<key> }		Returns the `offset` and `leap` methods to calculate the positioning styles based on the slider axis.
dragging	boolean	false	If `true`, the slider is being dragged.
focusedThumbIndex	number		The index of the thumb which is focused on the slider.
getHiddenInputProps	<TOther extends EventHandlers = {}>(otherHandlers?: TOther) => UseSliderHiddenInputProps<TOther>		Resolver for the hidden input slot's props.
getRootProps	<TOther extends EventHandlers = {}>(otherHandlers?: TOther) => UseSliderRootSlotProps<TOther>		Resolver for the root slot's props.
getThumbProps	<TOther extends EventHandlers = {}>(otherHandlers?: TOther) => UseSliderThumbSlotProps<TOther>		Resolver for the thumb slot's props.
marks	Mark[]		The marks of the slider. Marks indicate predetermined values to which the user can move the slider.
open	number	-1	The thumb index for the current value when in hover state.
range	boolean		If `true`, the slider is a range slider when the `value` prop passed is an array.
trackLeap	number		The track leap for the current value of the slider.
trackOffset	number		The track offset for the current value of the slider.
values	number[]		The possible values of the slider.