Slider

Interface of Slider
🏗 Coming Soon

Slider is used for selecting a single value. If you need to specify a range of values, use the RangeSlider component instead.

Default Slider

The <Slider /> component renders a styled range slider on the page, with no accompanying label.

0

Value, Min, Max

The <Slider /> component accepts a value property, allowing the user to set the initial value at which the slider is initialized. It also accepts min and max values.

15

Min and max default to the following values:

  • min: 0
  • max: 10

The slider component will disregard any value prop that goes outside of the defined min or max. The following example illustrates default settings when max=10 but value=5000

10

Controlled component with an onChange callback

If you'd like to read and control the input value externally, Slider accepts an onChange event callback.

0

Value: 0

Step

Just like the standard HTML range input, you change the granularity of slider options by using the step prop.

0

Accessibility

Slider accepts the standard aria-labelledby to help screen readers associate the range input with the relevant form label.

0

Disabled

Use the disable property to gray out the Input, making it a fixed value.

3