HeroUI Slider

Component

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 Disabled() {
  return (
    <Slider isDisabled className="w-full max-w-xs" defaultValue={30} style={sliderAccent}>
      <Label>Volume</Label>
      <Slider.Output />
      <Slider.Track>
        <Slider.Fill />
        <Slider.Thumb />
      </Slider.Track>
    </Slider>
  )
}