Skip to main content
react-md
react-md - Form - Slider Demos

Simple Sliders

A Slider is a component that allows the user to select a number value from a specific range of numbers. This component is fully controlled and requires the use of the useSlider hook to provide the value and "controls" to updating the value. The hook allows for customizing the min, max, and step options.

The Slider also requires a baseId and either a label, an aria-label, or an aria-labelledby for accessibility.

Check out the examples below to see how to use the useSlider hook and a few of the styling props available for the Slider.

Horizontal
Horizontal
Disabled
Volume
Vertical Slider
Vertical Slider
Disabled Vertical Slider

Range Sliders

A RangeSlider is another implementation of a slider that allows the user to select a min and max value from a specific range of numbers. Like the Slider, this component is fully controlled and requires the use of the useRangeSlider hook to provide the value and "controls" to updating the value. The hook allows for customizing the min, max, and step options.

The RangeSlider also requires providing accessible labels for each "thumb" by one of the available label props:

  • thumb1Label - defaults to "Min"
  • thumb1LabelledBy
  • thumb2Label - defaults to "Max"
  • thumb2LabelledBy

Check out the examples below to see how to use the useRangeSlider hook and a few of the styling props available for the RangeSlider.

Horizontal
Horizontal
Horizontal
Vertical
Vertical
Vertical

Color Dialog Slider

As mentioned above, the useSlider provides an object of controls as the second argument which is required to update the slider's value. The controls include the following functions:

  • increment - increment the value by the current step amount unless already at the max value
  • decrement - decrement the value by the current step amount unless already at the min value
  • minimum - set the value to the min amount
  • maximum - set the value to the max amount
  • setValue - a React "set state dispatcher" which can be used to set the value of the slider manually

This example will show how you can use the controls provided by the useSlider to link a TextField to the Slider and render it inline.

Discrete Sliders

The Slider and RangeSlider also support rendering a tooltip of the current value while the user is dragging or focusing the slider thumb. This can be enabled with the discrete prop.

Horizontal
Horizontal
Vertical
Vertical

Configurable Slider

The useSlider (and useRangeSlider) support an updateOn option that can be used to make the slider's value only update once the user has blurred the slider's thumb or completed dragging. This is useful when you don't need to use the value immediately and can be activated by setting updateOn: "blur".

There is also an onChange callback that can be used along with this updated behavior if desired.

This example allows you to configure some of the different props for the Slider component and showcasing the updateOn behavior.

Update Onchange

This is the distance the slider jumps when the PageUp or PageDown keys are pressed. Defaults to 1/10th of the slider's range.

Current value: 0

Configurable