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
Prop | Description | Default |
---|---|---|
showHighlight | Display the highlight when trueboolean | false |
disabled | Whether the range is disabledboolean | |
className | Additional class name to apply to the rangestring | |
handleClassName | Additional class name to apply to the handlestring | |
min * | The minimum value of the rangenumber | |
max * | The maximum value of the rangenumber | |
step | The value will be a multiple of step
The default is 1number | 1 |
value * | The value of the rangenumber | |
valueDisplay | When to display the current value"always" | "hover" | hover |
valueFormat | Format the value to display(value: number) => string | value => value.toLocaleString() |
style | Additional css styles to apply to the rangeCSSProperties | |
onChange | Event fired when the range value changes(value: number) => void | |
theme | Theme for the rangeRangeTheme |
RangeDouble
Prop | Description | Default |
---|---|---|
disabled | Whether the range is disabledboolean | |
className | Additional class name to apply to the rangestring | |
handleClassName | Additional class name to apply to the handlestring | |
min * | The minimum value of the rangenumber | |
max * | The maximum value of the rangenumber | |
step | The value will be a multiple of step
The default is 1number | 1 |
value * | The value of the range[number, number] | |
valueDisplay | When to display the current value"always" | "hover" | hover |
valueFormat | Format the value to display(value: number) => string | value => value.toLocaleString() |
style | Additional css styles to apply to the rangeCSSProperties | |
onChange | Event fired when the range value changes(value: [number, number]) => void | |
theme | Theme for the rangeRangeTheme |
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.