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)

Learn more about how to customize in the Theme documentation.

API

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

RangeSingle

Name	Type	Default
`showHighlight`	`boolean` Display the highlight when true	`false`
`disabled`	`boolean` Whether the range is disabled
`className`	`string` Additional class name to apply to the range
`handleClassName`	`string` Additional class name to apply to the handle
`min`	`number` The minimum value of the range
`max`	`number` The maximum value of the range
`step`	`number` The value will be a multiple of step The default is 1	`1`
`value`	`number` The value of the range
`valueDisplay`	`"always" \| "hover"` When to display the current value	`'hover'`
`valueFormat`	`(value: number) => string` Format the value to display	`value => value.toLocaleString()`
`style`	`CSSProperties` Additional css styles to apply to the range
`onChange`	`(value: number) => void` Event fired when the range value changes
`theme`	`RangeTheme` Theme for the range

RangeDouble

Name	Type	Default
`disabled`	`boolean` Whether the range is disabled
`className`	`string` Additional class name to apply to the range
`handleClassName`	`string` Additional class name to apply to the handle
`min`	`number` The minimum value of the range
`max`	`number` The maximum value of the range
`step`	`number` The value will be a multiple of step The default is 1	`1`
`value`	`Value` The value of the range
`valueDisplay`	`"always" \| "hover"` When to display the current value	`'hover'`
`valueFormat`	`(value: number) => string` Format the value to display	`value => value.toLocaleString()`
`style`	`CSSProperties` Additional css styles to apply to the range
`onChange`	`(value: Value) => void` Event fired when the range value changes
`theme`	`RangeTheme` Theme for the range

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.