RangeInput
The RangeInput
component allows users to be able to search through items that within min and max value.
Import
Usage
Editable Example
"[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
"[2,8]"
Manual Inputs
Setting showInputs
will render number inputs for manual input.
Editable Example
"[0,10]"
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
"[125,225]"
Customize number of handles
Editable Example
100
Customize tick's display value
Editable Example
Weak
Medium
Strong
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. |
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. |