How do I install the Vibe UI Slider component?

You can install Slider into your React or Next.js project using the Vibe UI CLI: run "npx vibe-ui-kit add slider" in your terminal.

Does Vibe UI Slider support Tailwind CSS v4?

Yes, Vibe UI natively supports both modern Tailwind CSS v4 (@theme directives) and Tailwind CSS v3 with zero configuration.

Is the Vibe UI Slider component accessible?

Yes, Vibe UI primitives are built upon WAI-ARIA compliant Radix UI primitives with full keyboard navigation and screen reader support.

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

Preset Variations

Explore the visual design presets of the Slider, including Default, Glassmorphic, Retro Neobrutalist, Neon Glow, and Cyberpunk controller styles.

Default style

Glassmorphic

Retro Neobrutalist

Neon Glow

Cyberpunk Monospace

Advanced Features

Our Slider is highly configurable, supporting double range handles, custom ticks step values, and continuous value tooltips in both horizontal and vertical directions.

Range Slider (Double Handle)20 - 80

Discrete Steps & Ticks

0%20%40%60%80%100%

Vertical Sliders (Single & Double Dot)

Single Dot

Double Dot

Props

Slider

Prop	Type	Default	Description
variant	'default' \| 'retro' \| 'glass' \| 'glow' \| 'cyberpunk'	'default'	The visual preset style variant of the slider track, active range, and thumb handle.
showTooltip	boolean	false	Render a floating, continuous value tooltip above the active thumb handle.
tooltipFormat	(value: number) => string	undefined	Optional callback function to custom format the floating tooltip string.
marks	boolean \| { value: number; label?: string }[]	undefined	Draw tick marks along discrete step points. Passing an array of objects prints text labels at the respective values.