React SDK

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

NameTypeDefaultDescription
minnumber0The min range.
maxnumber100The max range.
stepnumber1The stepping interval, used both for user interface and validation purposes.
stepsnumber[]1An array of custom steps to use. This will override step.
valuenumber or [number, number][min, max]The current value of the range input.
ticknumberThe interval to show small value ticks.
ticksnumber[][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.
showInputsbooleanfalseShow number inputs to manually set the handle values.
languagestringISO 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.
currencystringUSDThe currency code to use for any formatted price values.
fixedPointbooleanfalseWhether to use fixed-point notation in labels and inputs.