HeroUI Slider

Forms

About

Accessible slider from HeroUI v3 for selecting one or more values within a range. Compound API (Slider.Track / Slider.Fill / Slider.Thumb / Slider.Output) with single-value, range, vertical and disabled variants, currency and custom value formatting, full keyboard and screen-reader support. Built on React Aria.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds HeroUI Slider to your project and fits it to your theme.

Code

How HeroUI Slider is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Slider, Label } from "@/components/ui/heroui-slider"

const sliderAccent = {
  "--accent": "#0485f7",
  "--accent-hover": "#0473d4",
  "--accent-foreground": "#ffffff",
}

export default function Vertical() {
  return (
    <div className="flex h-64 items-center justify-center">
      <Slider defaultValue={30} orientation="vertical" aria-label="Volume" style={sliderAccent}>
        <Label>Volume</Label>
        <Slider.Output />
        <Slider.Track>
          <Slider.Fill />
          <Slider.Thumb />
        </Slider.Track>
      </Slider>
    </div>
  )
}