zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(site): extract api reference from components (#464)

Browse Source
This commit is contained in:
Darius Cepulis
2026-02-05 19:57:54 -06:00
committed by GitHub
parent 48364f17fd
commit 0991a899b2
80 changed files with 3425 additions and 1562 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/content/docs/reference/volume-slider.mdx
-110
View File
@@ -1,110 +0,0 @@
---
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