Slider [react-aria-components]

Forms 34

About

A slider allows a user to select one or more values within a range. The <input type="range"> HTML element can be used to build a slider, however it is very difficult to style cross browser. Slider helps achieve accessible sliders that can be styled as needed.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Slider [react-aria-components] to your project and fits it to your theme.

Code

How Slider [react-aria-components] is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Label } from "@/components/ui/field"
import {
  Slider,
  SliderFillTrack,
  SliderOutput,
  SliderThumb,
  SliderTrack,
} from "@/components/ui/slider"

export function SliderDemo() {
  return (
    <Slider defaultValue={30} className="flex w-1/5 flex-col items-start gap-2">
      <div className="flex w-full justify-between">
        <Label>Opacity</Label>
        <SliderOutput />
      </div>
      <SliderTrack>
        <SliderFillTrack />
        <SliderThumb />
      </SliderTrack>
    </Slider>
  )
}