GitHub

Slider

PreviousNext

An input where the user selects a value from within a given range. Extended from shadcn/ui to support buffer indicators.

DocsAPI Reference

Installation

pnpm dlx shadcn@latest add @audio/slider

Usage

import { Slider } from "@/components/ui/slider"
<Slider defaultValue={[33]} max={100} step={1} />

Buffer Indicator

This slider extends the shadcn/ui slider component to add support for a bufferValue prop, which displays a buffer indicator behind the current value. This is particularly useful for media players to show loading progress:

import { Slider } from "@/components/ui/slider"
 
export function SliderWithBuffer() {
  return (
    <Slider
      bufferValue={75}
      className="w-[60%]"
      defaultValue={[25]}
      max={100}
      step={1}
    />
  )
}

API Reference

Slider

This component extends the shadcn/ui Slider component and inherits all its props. Additionally, it supports:

PropTypeDefaultDescription
bufferValuenumber-Buffer indicator value (0-100). Displays a semi-transparent overlay behind the current value. Useful for showing loading progress in media players.

For all other props, see the Radix UI Slider API Reference.

Notes

Important Information:
  • Extension: This component extends the official shadcn/ui Slider component. All standard slider functionality is preserved, with the addition of the bufferValue prop for buffer indicators.
  • Buffer Indicator: The buffer indicator displays a semi-transparent overlay behind the current value. This is particularly useful for media players to show loading progress or buffered content.

Last updated 11/19/2025

Audio TrackSortable List