Introduction
Range input can be used to select a value between two values. The value can be changed by using the mouse or keyboard navigation.
Notable features:
- Mouse and keyboard interaction support
- Customizable min, max, and step values
- Optional tick marks and labels
- Accessible with proper ARIA attributes
- Smooth animations and visual feedback
Basic Example
Here's a simple example of a Range component. Drag the handle or use arrow keys to change the value:
0
10
20
30
40
50
60
70
80
90
100
Selected Value: 50
Properties
The Range component provides several properties to customize its behavior and appearance.
Core Properties
- value: Current selected value of the range
- min: Minimum value of the range (default: 0)
- max: Maximum value of the range (default: 100)
- steps: Step size of the range (default: 0 for continuous)
Visual Properties
- tickStep: Step size of tick marks (default: no ticks)
- labelSkip: Number of labels to skip (default: 0)
- class: Custom CSS classes for styling
Here's the basic property configuration:
Tick Marks
You can add visual tick marks to help users understand the scale of the range. Tick marks can be configured with custom step sizes.
0
10
20
30
40
50
60
70
80
90
100
Selected Value: 25
Configure tick marks using the tickStep property:
Labels
Labels can be displayed at regular intervals to show specific values along the range. You can control label frequency with the labelSkip property.
0
20
40
60
80
100
Selected Value: 60
Configure labels with appropriate skipping:
Ready for more?
Now that you understand how the Range component works, explore other input components like Rating and Calendar, or learn about form integration.
Rating → Input Field →