Limeplay - Open Source Video Player UI ComponentsLimeplay

Volume Control

Composable slider for controlling media volume.

Installation

npx shadcn add @limeplay/volume-control

Requires volumeFeature registered in your createMediaKit.

Usage

components/player/volume-slider.tsx
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.

On this page