Vibe UI
Initializing Vibe UI System...
Vibe UI

Slider

An input component that allows users to select a single value or range of values from a scale.

Slider

An input component that allows users to select a single value or range of values from a scale.

Preview

Installation

pnpm dlx vibe-ui-kit@latest add slider

All Variations

Explore 10 different variations and styling presets of the Slider component.

1. Default Style

2. Range Double Handle

3. Glassmorphic Style

4. Retro Neobrutalist Style

5. Stepped Slider Marks (Step=10)

6. Disabled State Slider

7. Custom Styled Accent Track Fill

8. Vertical Orientation

9. Custom Large Handles

10. Slider with Text Value Indicator

Volume setting80%

11. Continuous Value Tooltips

12. Discrete Step Ticks

13. Rich Labels & Custom Marks

14. Range Slider with Tooltips

Contributors

JS
Jenish Sabhadiya

Theme Customizer

8px
@theme {
  --radius: 0.5rem;
  --glass-blur: 8px;
}
Changes apply instantly to this documentation workspace.
Slider | Vibe UI