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.

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.

NameTypeDefaultDescription
onChange*(value: number) => voidOn change callback.
value*numberCreates a controlled input and sets the value. Requires an onChange handler to update value. value + onChange is the recommended method per React team.
autoFocusbooleanWill automatically focus the thumb on render if true
classNamestringAdditional CSS classes.
disabledbooleanDisable the control. The browser defaults to false.
idstringSets 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.
infoReactNodeIt is recommended to pass a simple string to offer guidance. Text will be styled based on status prop.
labelReactNodePass a string or a fragment with an Icon and string.
labelHiddenbooleanVisually hides the label region.
maxnumber100 Maximum value.
minnumber0 Minimum value.
namestringSets html name attribute for the underlying control. Useful for mapping to a data field.
onDragEnd() => voidCalled when the user stops dragging the slider thumb.
onDragStart() => voidCalled when the user starts dragging the slider thumb.
orientation
'vertical' |'horizontal' 
'horizontal' Slider orientation.
previewbooleanfalse Show current value.
readOnlybooleanMakes the input non editable and non clickable. The browser defaults to false.
requiredbooleanIndicate if the field is required. The browser defaults to false.
showInputbooleantrue Display input to provide value.
showProgressbooleanfalse Show slider color progress bar.
status
'success' |'warning' |'error' 
Set visual state based on a validation state.
stepnumber1 Step value.
ticksDisplay defined ticks.