---
title: VolumeSlider
frameworkTitle:
  html: volume-slider
description: A slider component for controlling media volume
---

import { VolumeSliderDemo } from '@/examples/react/VolumeSlider/VolumeSliderDemo';
import componentModuleStr from '@/examples/react/VolumeSlider/BasicVolumeSlider.tsx?raw';
import cssModuleStr from '@/examples/react/VolumeSlider/VolumeSlider.module.css?raw';
import htmlHorizontalStr from '@/examples/html/volume-slider/snippet-horizontal.html?raw';
import htmlVerticalStr from '@/examples/html/volume-slider/snippet-vertical.html?raw';
import htmlCssStr from '@/examples/html/volume-slider/volume-slider.css?raw';
import FrameworkCase from '@/components/docs/FrameworkCase.astro';
import ServerCode from '@/components/Code/ServerCode.astro';
import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs';

## Features

- Supports both horizontal and vertical orientations
- Displays current volume level
- Reflects muted state
- Keyboard accessible (Arrow keys for volume adjustment)
- Touch-friendly drag interaction

## Example

<FrameworkCase frameworks={["react"]}>
  <TabsRoot client:idle>
    <TabsList client:idle label="React implementation">
      <Tab client:idle value="component" initial>Component</Tab>
      <Tab client:idle value="css">CSS Module</Tab>
    </TabsList>
    <TabsPanel client:idle value="component" initial>
      <ServerCode code={componentModuleStr} lang="tsx" />
    </TabsPanel>
    <TabsPanel client:idle value="css">
      <ServerCode code={cssModuleStr} lang="css" />
    </TabsPanel>
    <VolumeSliderDemo client:idle />
  </TabsRoot>
</FrameworkCase>

<FrameworkCase frameworks={["html"]}>
  <TabsRoot client:idle>
    <TabsList client:idle label="HTML implementation">
      <Tab client:idle value="html-horizontal" initial>HTML (Horizontal)</Tab>
      <Tab client:idle value="html-vertical">HTML (Vertical)</Tab>
      <Tab client:idle value="css">CSS</Tab>
    </TabsList>
    <TabsPanel client:idle value="html-horizontal" initial>
      <ServerCode code={htmlHorizontalStr} lang="html" />
    </TabsPanel>
    <TabsPanel client:idle value="html-vertical">
      <ServerCode code={htmlVerticalStr} lang="html" />
    </TabsPanel>
    <TabsPanel client:idle value="css">
      <ServerCode code={htmlCssStr} lang="css" />
    </TabsPanel>
    <VolumeSliderDemo client:idle />
  </TabsRoot>
</FrameworkCase>

<FrameworkCase frameworks={["react"]}>

## Compound Components

VolumeSlider is composed of multiple sub-components:

### VolumeSlider.Root
The container component that manages state and interactions.

**Props:**
- `orientation?: 'horizontal' | 'vertical'` - Slider orientation (default: 'horizontal')
- All standard div props

### VolumeSlider.Track
The background track element that contains the progress indicator.

### VolumeSlider.Progress
Visual indicator showing the current volume level.

### VolumeSlider.Thumb
The draggable handle that indicates and controls the current volume level.

</FrameworkCase>

## Data Attributes

The VolumeSlider automatically sets data attributes:

- `data-orientation` - Current orientation ('horizontal' or 'vertical')
- `data-muted` - Present when volume is muted
- `data-volume-level` - Volume level category: 'high' (>50%), 'medium' (25-50%), 'low' (1-24%), or 'off' (0%)

Use these attributes for state-based styling in your CSS.

## CSS Variables

The component exposes CSS variables for positioning:

- `--slider-fill` - Percentage of volume level (0-100%)
- `--slider-pointer` - Percentage of pointer position (0-100%)

## Accessibility

- Includes proper ARIA role (`slider`)
- Keyboard accessible (Arrow keys, Home, End)
- Screen reader announcements for volume values
- Proper aria-valuemin, aria-valuemax, aria-valuenow attributes