Slider
Enhanced slider component with smooth animations and improved accessibility. Perfect for numeric inputs, settings, and range selections.
Pro features
What the Pro version adds to this component.
Floating Value Labels
Dynamic value labels that follow the thumb with custom formatting
Custom Styling
Advanced color variants, gradients, and themed designs
Smooth Animations
Fluid transitions and micro-interactions for premium feel
Segmented Tracks
Visual segments and markers for better data visualization
Advanced Controls
Multiple thumbs, custom ranges, and precise value control
Performance Optimized
Smooth dragging even with complex value calculations
Installation
Install via CLI
npx @moontra/moonui-cli add sliderUsage
Basic Usage
Pro Usage
Examples
Basic Slider
With Value Display
Slider with current value display
Range Slider
Select a range of values
With Icons
Sliders with icons for context
Sizes
Control the track height and thumb dimensions with the size and thumbSize props
Color Variants
Apply theme colors to the track, range, and thumb via thumbVariant (which cascades to track and range)
Built-in Value Label
Show the current value above the slider with showValueLabel and format it with valueLabelFormat
Step Values
Disabled State
Value Labels
Floating value labels with custom formatting
Advanced Features
Gradient fills, segmented tracks, and smooth animations