RangeInput
The RangeInput
component allows users to be able to search through items that within min and max value.
Import
Usage
Editable Example
0
100
"[50,75]"
Ticks & Steps
The step
and tick
props to allow setting pre-determined steps and ticks in the UI. By default only the minimum and maximum values are displayed.
Editable Example
0
1
2
3
4
5
6
7
8
9
10
"[2,8]"
Manual Inputs
Setting showInputs
will render number inputs for manual input.
Editable Example
$0
$2.50
$5
$7.50
$10
"[0,10]"
Custom input
You can also use your own input by passing a function to leftInput
or rightInput
props. Make sure to call getProps
, then spread the inputProps
and 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 min
or max
for unknown reason, therefore as a workaround we must spread those manually.
Editable Example
0
100
200
300
400
500
"[100,400]"
onChange vs onInput
The difference between onChange
and 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.
Editable Example
0
500
"[125,225]"
Customize number of handles
Editable Example
0
500
"100"
Props
Name | Type | Default | Description |
---|---|---|---|
min | number | 0 | The min range. |
max | number | 100 | The max range. |
step | number | 1 | The stepping interval, used both for user interface and validation purposes. |
steps | number[] | 1 | An array of custom steps to use. This will override step . |
value | number or [number, number] | [min, max] | The current value of the range input. |
tick | number | The interval to show small value ticks. | |
ticks | number[] | [min,max] | An array of custom ticks to use. This will override tick . The default value is also overridden if tick is set. |
onChange | (value) => void | () => {} | A callback, called after the value has changed and the handle is released. |
onInput | (value) => void | () => {} | A callback, called as the value changes, while dragging. |
leftInput | ({ getProps, ref }) => React.ReactNode | <Input/> | The left input to set the range's low value if dual handle, or value if single handle. |
rightInput | ({ getProps, ref }) => React.ReactNode | <Input/> | The right input to set the range's high value. |
showInputs | boolean | false | Show number inputs to manually set the handle values. |
language | string | ISO language code to use for i18n and formatting (e.g. en or en-US). Defaults to browser language. | |
format | 'numeric' or 'price' | 'numeric' | How to format the values. |
currency | string | USD | The currency code to use for any formatted price values. |
fixedPoint | boolean | false | Whether to use fixed-point notation in labels and inputs. |