Перейти к контенту
Редактировать эту страницу

Slider

Sliders allow users to make selections from a range of values.

Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.

  • 📦 22 kB gzipped (but only +8 kB when used together with other Material-UI components).

Continuous sliders

Continuous sliders allow users to select a value along a subjective range.

<Stack spacing={2} direction="row" sx={{ mb: 1 }}>
  <VolumeDown />
  <Slider aria-label="Volume" value={value} onChange={handleChange} />
  <VolumeUp />
</Stack>
<Slider disabled defaultValue={30} aria-label="Disabled slider" />

Discrete sliders

Discrete sliders can be adjusted to a specific value by referencing its value indicator. By order of demos:

You can generate a mark for each step with marks={true}.

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

Small steps

You can change the default step increment.

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

Restricted values

You can restrict the selectable values to those provided with the marks prop with step={null}.

<Slider
  aria-label="Restricted values"
  defaultValue={20}
  valueLabelFormat={valueLabelFormat}
  getAriaValueText={valuetext}
  step={null}
  valueLabelDisplay="auto"
  marks={marks}
/>

Label always visible

You can force the thumb label to be always visible with valueLabelDisplay="on".

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

Range slider

The slider can be used to set the start and end of a range by supplying an array of values to the value prop.

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

Slider with input field

In this example an input allows a discrete value to be set.

Volume

Customized sliders

Ниже находятся примеры кастомизации компонента. You can learn more about this in the overrides documentation page.

iOS

pretto.fr

Tooltip value label

Airbnb

Vertical sliders

WARNING: Chrome, Safari and newer Edge versions i.e. any browser based on WebKit exposes <Slider orientation="vertical" /> as horizontal (chromium issue #1158217). By applying -webkit-appearance: slider-vertical; the slider is exposed as vertical.

However, by applying -webkit-appearance: slider-vertical; keyboard navigation for horizontal keys (Arrow Left, Arrow Right) is reversed (chromium issue #1162640). Usually, up and right should increase and left and down should decrease the value. If you apply -webkit-appearance you could prevent keyboard navigation for horizontal arrow keys for a truly vertical slider. This might be less confusing to users compared to a change in direction.

<Slider
  sx={{
    '& input[type="range"]': {
      WebkitAppearance: 'slider-vertical',
    },
  }}
  orientation="vertical"
  defaultValue={30}
  aria-label="Temperature"
  onKeyDown={preventHorizontalKeyboardNavigation}
/>

Track

The track shows the range available for user selection.

Removed track

The track can be turned off with track={false}.

Removed track

Removed track range slider

Inverted track

The track can be inverted with track="inverted".

Inverted track

Inverted track range

Non-linear scale

You can use the scale prop to represent the value on a different scale.

In the following demo, the value x represents the value 2^x. Increasing x by one increases the represented value by factor 2.

Storage: 1 MB

<Typography id="non-linear-slider" gutterBottom>
  Storage: {valueLabelFormat(calculateValue(value))}
</Typography>
<Slider
  value={value}
  min={5}
  step={1}
  max={30}
  scale={calculateValue}
  getAriaValueText={valueLabelFormat}
  valueLabelFormat={valueLabelFormat}
  onChange={handleChange}
  valueLabelDisplay="auto"
  aria-labelledby="non-linear-slider"
/>

Unstyled slider

<StyledSlider defaultValue={10} />

Доступность

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#slider)

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