Volume Control
Composable slider for controlling media volume.
Installation
npx shadcn add @limeplay/volume-controlRequires volumeFeature registered in your
createMediaKit.
Usage
import { cn } from "@/lib/utils"
import * as VolumeSlider from "@/components/limeplay/volume-control"
export function VolumeSliderControl() {
return (
<VolumeSlider.Root
className={cn("relative h-1 focus-area -focus-area-x-2 -focus-area-y-12")}
orientation="horizontal"
>
<VolumeSlider.Track>
<VolumeSlider.Progress />
</VolumeSlider.Track>
<VolumeSlider.Thumb />
</VolumeSlider.Root>
)
}Components
Root
Slider container with built-in drag/click handling. Supports orientation prop ("horizontal" | "vertical").
Track
Visual track representing the full volume range.
Progress
Filled portion indicating the current volume level.
Thumb
Draggable indicator positioned at the current volume level.