RangeInput component allows users to be able to search through items that within min and max value.
Ticks & Steps
tick props to allow setting pre-determined steps and ticks in the UI. By default only the minimum and maximum values are displayed.
showInputs will render number inputs for manual input.
You can also use your own input by passing a function to
rightInput props. Make sure to call
getProps, then spread the
labelProps to its corresponding element to preserve accessibility. The
ref is meant to be spread on the input element.
Note that as we uses
Adobe's React-Aria package internally,
useTextField doesn't accept
max for unknown reason, therefore as a workaround we must spread those manually.
onChange vs onInput
The difference between
onInput callbacks, is when they are called.
onInput will be called while the handle is being moved, and
onChange only when the handle has been dropped.
Customize number of handles
|The min range.|
|The max range.|
|The stepping interval, used both for user interface and validation purposes.|
|An array of custom steps to use. This will override |
|The current value of the range input.|
|The interval to show small value ticks.|
|An array of custom ticks to use. This will override |
|A callback, called after the value has changed and the handle is released.|
|A callback, called as the value changes, while dragging.|
|The left input to set the range's low value if dual handle, or value if single handle.|
|The right input to set the range's high value.|
|Show number inputs to manually set the handle values.|
|ISO language code to use for i18n and formatting (e.g. en or en-US). Defaults to browser language.|
|How to format the values.|
|The currency code to use for any formatted price values.|
|Whether to use fixed-point notation in labels and inputs.|