Range Component

A customizable range slider component with support for dual-thumb selection and various visual customizations.

Overview

The Range component provides:

• Dual-thumb range selection functionality
• Smooth sliding interaction for selecting values
• Support for custom ranges and step increments
• Visual feedback with thumb labels
• Keyboard navigation support
• Accessible design with proper ARIA attributes

When to Use

Use the Range component when you need to:

• Allow users to select a range of values (e.g., price range, time range)
• Create interactive controls for numerical ranges
• Implement filters with min/max values
• Provide visual feedback for range selection
• Create custom range selectors with specific step increments

Key Features

• Dual-Thumb Selection: Select both minimum and maximum values
• Custom Ranges: Set minimum and maximum values for the range
• Step Control: Define precise step increments for value selection
• Variants: Apply library-provided variants (such as default and success) via the variant prop
• Visual Customization:
  • Customizable thumb label appearance
  • Flexible label positioning and styling
• Interactive States:
  • Hover and focus states
  • Disabled and readonly modes
  • Drag and touch support
• Accessibility:
  • Keyboard navigation (arrow keys)
  • ARIA attributes for screen readers
  • Focus management
• Custom Labels: Use slots to create custom label layouts
• Thumb Label Options: Control thumb label visibility (always, hover/focus, or never)

API Reference →

View Code →