GitHub

Slider

PreviousNext

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

References

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:
  • Custom Component: This component is not part of the default shadcn/ui registry. It extends the official shadcn/ui Slider component with audio-specific features. 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.
  • Usage in Audio Player: This slider is used by the AudioPlayerSeekBar component to display playback progress and buffer status.

Last updated 12/4/2025

KnobSortable List