mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
111 lines
3.7 KiB
Plaintext
111 lines
3.7 KiB
Plaintext
---
|
|
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
|