Slider

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

Steps

By passing a number to the step prop, 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"
/>

Marks

By providing an array of objects to the marks prop, you can have custom marks.

<Slider
  aria-label="Custom marks"
  defaultValue={20}
  getAriaValueText={valueText}
  step={10}
  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

By passing an array of values to the value prop, you can use the Slider to set the start and end of a range.

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

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

Component variables

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