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:
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.
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.
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 →