| Name | Type | Default | Description |
|---|---|---|---|
onChange* | (value: number) => void | | On change callback. |
value* | number | | Creates a controlled input and sets the value. Requires an onChange handler to update value. value + onChange is the recommended method per React team. |
autoFocus | boolean | | Will automatically focus the thumb on render if true |
className | string | | Additional CSS classes. |
disabled | boolean | | Disable the control. The browser defaults to false. |
id | string | | Sets DOM id for the control and associates label element via 'for' attribute. If an id is not pass, a random id will be generated for any render. |
info | ReactNode | | It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. |
label | ReactNode | | Pass a string or a fragment with an Icon and string. |
labelHidden | boolean | | Visually hides the label region. |
max | number | 100
| Maximum value. |
min | number | 0
| Minimum value. |
name | string | | Sets html name attribute for the underlying control. Useful for mapping to a data field. |
onDragEnd | () => void | | Called when the user stops dragging the slider thumb. |
onDragStart | () => void | | Called when the user starts dragging the slider thumb. |
orientation | 'vertical' |'horizontal' | 'horizontal'
| Slider orientation. |
preview | boolean | false
| Show current value. |
readOnly | boolean | | Makes the input non editable and non clickable. The browser defaults to false. |
required | boolean | | Indicate if the field is required. The browser defaults to false. |
showInput | boolean | true
| Display input to provide value. |
showProgress | boolean | false
| Show slider color progress bar. |
status | 'success' |'warning' |'error' | | Set visual state based on a validation state. |
step | number | 1
| Step value. |
ticks | | | Display defined ticks. |
Slider
Sliders are inputs that allow a user to enter a numerical value within some range, or select a value by moving the Slider control. If you do not have a set range of values for a user to choose a number from, you should use the NumberInput component instead.
For more information on how to use the features and props for this component, check out the developer documentation.
Usage
The Slider component consists of a Progress bar with optional ticks that denote value within a range of numbers. Users can slide the control on the bar to select an individual number within the given range defined by a min and max value. A step prop determines the multitude that each point on the Slider increments or decrements the current value. The Slider component also allows for standard Form field structures such as being set required, disabled, or readOnly, as well as including a label, status, or info.
The bar on the Slider can optionally render an interactive color to help visual the value selected by enabling the showProgress prop. This component is also available in two orientations: horizontal and vertical.
You can show a preview of the value selected that will render as a read-only number. If you would like to accept manual user input, enable the showInput prop. Both the manual NumberInput and the preview will render below the Slider control. If both are enabled simultaneously, the preview will replace the input.
There are additional callback functions available to react to the user drag events.