MoonUI

Slider

Free + Pro

Enhanced slider component with smooth animations and improved accessibility. Perfect for numeric inputs, settings, and range selections.

Unlock Advanced Slider Features

Get access to powerful pro features that enhance your slider component with advanced capabilities, premium styling options, and optimized performance.

  • Floating value labels with formatting
  • Custom color variants and gradients
  • Smooth animations and transitions

Pro Features

Unlock advanced capabilities with the Pro version

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

moonui add slider

Usage

Basic Usage

Pro Required

Pro Usage

PRO
Pro Required
$250
75 HP
22°C

Examples

Basic Slider

With Value Display

Slider with current value display

50%

Range Slider

Select a range of values

$25 - $75

With Icons

Sliders with icons for context

60%
75%

Step Values

Disabled State

PRO
Pro Examples

Value Labels

PRO

Floating value labels with custom formatting

Pro Required
$250
75 HP
22°C

Advanced Features

PRO

Gradient fills, segmented tracks, and smooth animations

Pro Required
Poor85%Excellent
BehindOn TrackAhead