Usage

Props

NameTypeRequiredDefaultDescription
disabled
boolean
false

Whether or not to put the slider into a disabled state.

since

10.19.0

max
number
false100

The maximum value of the slider (right side)

defaultvalue

100

since

10.19.0

min
number
false0

The minimum value of the slider (left side)

defaultvalue

0

since

10.19.0

showLabel
boolean
false

Whether or not to show value labels below the slider increments.

since

10.19.0

step
number
false1

The distance between each stopping point on the Slider.

defaultvalue

1

since

10.19.0

value
number
false(max < min) ? min : min + (max - min)/2;

The currently set value of the Slider. Defaults to the middle between min and max.

defaultvalue

(max < min) ? min : min + (max - min)/2;

since

10.19.0

value

You can provide a default value to the Slider using value.

If you don't provide a default value to the Slider, the default will be calculated by the formula min + (max - min) / 2.

min, max, steps

The Slider component will take a in a minimum value, a maximum value, and an optional distance between each stopping point or "increment" on the Slider.

For example, you can have a min of 10, a max of 60, and step of 10. Which would give you values of 10, 20, 30, 40, 50, 60 on your Slider.

Label

You can add labels underneath the increments by using the showLabel prop.

disabled

You can add a disabled state with the disabled prop.