Slider Component

A customizable slider component with support for various ranges, steps, and visual customizations.

Overview

The Slider component provides:

• 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 Slider component when you need to:

• Allow users to select a value within a range
• Provide visual feedback for value selection
• Create interactive controls for numerical inputs
• Implement volume controls, brightness adjustments, or similar features

Key Features

• Custom Ranges: Set minimum and maximum values for the slider
• 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, drag/focus, or never)

API Reference →

View Code →