Slider

Display the current value and an inputable range.

Accept clicks or drag actions.

Differentiate states by color.

Do not respond to drag and click.

Different granularity.

Specifies the maximum or minimum value of the Slider.

Get event when slide.

Show the chosen value as text next to the Slider, and set min, max and step to the values that make sense.

Attribute	Description	Type	Accepted values	Default
initialValue	initial value	`number`	-	0
value	slider value	`number`	-	0
type	current type	`SliderTypes`	SliderTypes	`default`
step	the granularity the slider can step through values	`number`	-	1
max	the maximum value of slider	`number`	-	100
min	the minimum value of slider	`number`	-	0
disabled	disable slider interaction	`boolean`	`false`
error	mark the field as invalid	`boolean`	-	`false`
errorMessage	message below the slider	`string`	-	-
showMarkers	show each marker	`boolean`	-	`false`
hideValue	hide slider value	`boolean`	-	`false`
onChange	called when the value of silder changes	`(val: number) => void`	-	-
...	native props	`HTMLAttributes`	`'id', 'name', 'className', ...`	-

type SliderTypes =
  | 'default'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'info'

The ref points at the root element of the slider.

• The handle is a slider with aria-valuemin, aria-valuemax and aria-valuenow, and takes the focus with Tab.
• Arrows change the value by step, Page Up and Page Down by ten steps, and Home and End go to the minimum and the maximum.
• Without a visible label, pass aria-label or aria-labelledby.