Saltar al contenido
Ayuda a traducir esta página

Slider

Los deslizadores permiten a los usuarios hacer selecciones a partir de una gama de valores.

Sliders reflect a range of values along a bar, from which users may select a single value. Son ideales para ajustar ajustes como volumen, brillo o aplicación de filtros de imagen.

  • 📦 22 kB gzipped (pero solo +8 kB cuando se usa junto con otros componentes de Material-UI).

Deslizadores continuos

Los deslizadores continuos permiten a los usuarios seleccionar un valor a lo largo de un rango más amplio.

Volume

Disabled slider

Deslizadores discretos

Los deslizadores discretos pueden ser ajustados a un valor específico haciendo referencia a su indicador de valor. Por orden de demos:

Puedes generar una marca para cada paso con marks={true}.

Temperature

30

Disabled

30

Pequeños pasos

Puede cambiar el incremento de paso por defecto.

Small steps

5e-8
<Typography id="discrete-slider-small-steps" gutterBottom>
  Small steps
</Typography>
<Slider
  defaultValue={0.00000005}
  getAriaValueText={valuetext}
  aria-labelledby="discrete-slider-small-steps"
  step={0.00000001}
  marks
  min={-0.00000005}
  max={0.0000001}
  valueLabelDisplay="auto"
/>

Marcas personalizadas

You can have custom marks by providing a rich array to the marks prop.

Custom marks

20
<Typography id="discrete-slider-custom" gutterBottom>
  Custom marks
</Typography>
<Slider
  defaultValue={20}
  getAriaValueText={valuetext}
  aria-labelledby="discrete-slider-custom"
  step={10}
  valueLabelDisplay="auto"
  marks={marks}
/>

Valores restringidos

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

Restricted values

2
<Typography id="discrete-slider-restrict" gutterBottom>
  Restricted values
</Typography>
<Slider
  defaultValue={20}
  valueLabelFormat={valueLabelFormat}
  getAriaValueText={valuetext}
  aria-labelledby="discrete-slider-restrict"
  step={null}
  valueLabelDisplay="auto"
  marks={marks}
/>

Etiqueta siempre visible

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

Always visible

80
<Typography id="discrete-slider-always" gutterBottom>
  Always visible
</Typography>
<Slider
  defaultValue={80}
  getAriaValueText={valuetext}
  aria-labelledby="discrete-slider-always"
  step={10}
  marks={marks}
  valueLabelDisplay="on"
/>

Deslizador de rango

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

Temperature range

2037
<Typography id="range-slider-demo" gutterBottom>
  Temperature range
</Typography>
<Slider
  value={value}
  onChange={handleChange}
  valueLabelDisplay="auto"
  aria-labelledby="range-slider-demo"
  getAriaValueText={valuetext}
/>

Deslizador con campo de entrada

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

Volume

Deslizadores personalizados

Here are some examples of customizing the component. Puedes aprender más sobre esto en la sección Personalizando Componentes de la documentación.

iOS

60

pretto.fr

20

Tooltip value label

Airbnb

Deslizadores verticales

Temperature

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

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

Slider sin estilo

<StyledSlider defaultValue={10} />

Accesibilidad

(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