Shadcn UI Variants

Slider

A versatile slider component with a variety of styles and advanced behaviours.

Slider API Reference

Styles inspired by Origin UI

Playground

Customize the Slider properties to see different variations.

Customize

variant

showTooltip

withOutput

withInput

startLabel

endLabel

showTicks

numberOfTicks

Installation

pnpm dlx shadcn@latest add https://shadcn-ui-variants.vercel.app/r/slider.json

Examples

With labels and tooltip

With ticks and input

Temperature

Controlled with output and interactive icons

50

Slider Props

Prop	Type	Default
variant	`enum`	`"default"`
showTooltip	`boolean`	`false`
withOutput	`boolean`	`false`
withInput	`boolean`	`false`
startLabel	`React.ReactNode`	—
endLabel	`React.ReactNode`	—
startIcon	`React.ReactNode`	—
endIcon	`React.ReactNode`	—
showTicks	`boolean`	`false`
numberOfTicks	`number`	`11`