Docs
πŸ—οΈ ⏐ Components
Form
Range

Range Slider

The Range Slider component empowers users to select a single value or a range of values with ease, enhancing interactive data input within applications. It's especially useful in scenarios requiring users to define parameters such as price ranges, filters, or any adjustable settings.

Examples

Basic Usage

This example illustrates how to implement a Range Slider for selecting a single value, providing a straightforward way for users to specify a precise figure within a defined limit:

Advanced Customization

Range Selection

Demonstrates a dual-handle Range Slider enabling users to select a range between two values, ideal for defining intervals such as price filters or age brackets:

Theme Customization

The Range Slider comes with a default theme that can be customized to fit the aesthetic of any application:

  • root{}(7 keys)
      Show all

Learn more about how to customize in the Theme documentation.

API

Configure the Range Slider to meet specific needs with these adjustable properties:

RangeSingle

PropDescriptionDefault
showHighlightDisplay the highlight when true
boolean
false
disabledWhether the range is disabled
boolean
classNameAdditional class name to apply to the range
string
handleClassNameAdditional class name to apply to the handle
string
min *The minimum value of the range
number
max *The maximum value of the range
number
stepThe value will be a multiple of step The default is 1
number
1
value *The value of the range
number
valueDisplayWhen to display the current value
"always" | "hover"
hover
valueFormatFormat the value to display
(value: number) => string
value => value.toLocaleString()
styleAdditional css styles to apply to the range
CSSProperties
onChangeEvent fired when the range value changes
(value: number) => void
themeTheme for the range
RangeTheme

RangeDouble

PropDescriptionDefault
disabledWhether the range is disabled
boolean
classNameAdditional class name to apply to the range
string
handleClassNameAdditional class name to apply to the handle
string
min *The minimum value of the range
number
max *The maximum value of the range
number
stepThe value will be a multiple of step The default is 1
number
1
value *The value of the range
[number, number]
valueDisplayWhen to display the current value
"always" | "hover"
hover
valueFormatFormat the value to display
(value: number) => string
value => value.toLocaleString()
styleAdditional css styles to apply to the range
CSSProperties
onChangeEvent fired when the range value changes
(value: [number, number]) => void
themeTheme for the range
RangeTheme

Design and Usability Tips

  • Clear Value Indication: Always display the current value or range selected by the Range Slider prominently near the component. Consider using tooltips that appear while dragging the slider handles for immediate feedback, or dedicated areas adjacent to the slider that update in real time.
  • Step Intervals and Limits: Define sensible step intervals and min/max limits based on the context in which the Range Slider is used. For instance, a price filter might use whole number steps, while a control requiring precision (like volume adjustment) may benefit from finer gradations.