mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
133 lines
4.4 KiB
Plaintext
133 lines
4.4 KiB
Plaintext
---
|
||
title: VolumeSlider
|
||
frameworkTitle:
|
||
html: media-volume-slider
|
||
description: A slider component for controlling media playback volume
|
||
---
|
||
|
||
import ComponentReference from "@/components/docs/api-reference/ComponentReference.astro";
|
||
import FrameworkCase from "@/components/docs/FrameworkCase.astro";
|
||
import StyleCase from "@/components/docs/StyleCase.astro";
|
||
import Demo from "@/components/docs/demos/Demo.astro";
|
||
|
||
{/* React demos */}
|
||
import WithPartsDemoReact from "@/components/docs/demos/volume-slider/react/css/WithParts";
|
||
import withPartsReactTsx from "@/components/docs/demos/volume-slider/react/css/WithParts.tsx?raw";
|
||
import withPartsReactCss from "@/components/docs/demos/volume-slider/react/css/WithParts.css?raw";
|
||
import WithPartsDemoReactTailwind from "@/components/docs/demos/volume-slider/react/tailwind/WithParts";
|
||
import withPartsReactTailwindTsx from "@/components/docs/demos/volume-slider/react/tailwind/WithParts.tsx?raw";
|
||
|
||
{/* HTML demos */}
|
||
import WithPartsDemoHtml from "@/components/docs/demos/volume-slider/html/css/WithParts.astro";
|
||
import withPartsHtml from "@/components/docs/demos/volume-slider/html/css/WithParts.html?raw";
|
||
import withPartsHtmlCss from "@/components/docs/demos/volume-slider/html/css/WithParts.css?raw";
|
||
import withPartsHtmlTs from "@/components/docs/demos/volume-slider/html/css/WithParts.ts?raw";
|
||
import WithPartsDemoHtmlTailwind from "@/components/docs/demos/volume-slider/html/tailwind/WithParts.astro";
|
||
import withPartsTailwindHtml from "@/components/docs/demos/volume-slider/html/tailwind/WithParts.html?raw";
|
||
import withPartsTailwindHtmlTs from "@/components/docs/demos/volume-slider/html/tailwind/WithParts.ts?raw";
|
||
|
||
## Anatomy
|
||
|
||
<FrameworkCase frameworks={["react"]}>
|
||
```tsx
|
||
<VolumeSlider.Root />
|
||
```
|
||
</FrameworkCase>
|
||
|
||
<FrameworkCase frameworks={["html"]}>
|
||
```html
|
||
<media-volume-slider></media-volume-slider>
|
||
```
|
||
</FrameworkCase>
|
||
|
||
## Behavior
|
||
|
||
Controls the media volume level. The slider maps its 0–100 internal range to the media's 0–1 volume scale. When the media is muted, the fill level drops to 0 regardless of the stored volume value.
|
||
|
||
## Styling
|
||
|
||
Use [CSS custom properties](#root-css-custom-properties) to style the fill and pointer levels:
|
||
|
||
<FrameworkCase frameworks={["html"]}>
|
||
```css
|
||
media-volume-slider::before {
|
||
width: calc(var(--media-slider-fill) * 1%);
|
||
}
|
||
```
|
||
</FrameworkCase>
|
||
|
||
<FrameworkCase frameworks={["react"]}>
|
||
React renders a `<div>` element. Add a `className` to style it:
|
||
|
||
```css
|
||
.volume-slider::before {
|
||
width: calc(var(--media-slider-fill) * 1%);
|
||
}
|
||
```
|
||
</FrameworkCase>
|
||
|
||
## Accessibility
|
||
|
||
Renders with `role="slider"` and automatic `aria-label` of "Volume". Override with the `label` prop. Keyboard controls:
|
||
|
||
- <kbd>Arrow Left</kbd> / <kbd>Arrow Right</kbd>: step by `step` increment
|
||
- <kbd>Page Up</kbd> / <kbd>Page Down</kbd>: step by `largeStep` increment
|
||
- <kbd>Home</kbd>: set volume to 0
|
||
- <kbd>End</kbd>: set volume to max
|
||
|
||
Scroll wheel support:
|
||
|
||
- **Mouse wheel / trackpad scroll**: adjusts volume by `wheelStep` increment (default `5`)
|
||
|
||
## Examples
|
||
|
||
Nest sub-components for full control over the slider's DOM structure. This example includes a track, fill bar, draggable thumb, and a tooltip that shows the volume percentage on hover.
|
||
|
||
<FrameworkCase frameworks={["react"]}>
|
||
<StyleCase styles={["css"]}>
|
||
<Demo
|
||
files={[
|
||
{ title: "App.tsx", code: withPartsReactTsx, lang: "tsx" },
|
||
{ title: "App.css", code: withPartsReactCss, lang: "css" },
|
||
]}
|
||
>
|
||
<WithPartsDemoReact client:idle />
|
||
</Demo>
|
||
</StyleCase>
|
||
<StyleCase styles={["tailwind"]}>
|
||
<Demo
|
||
files={[
|
||
{ title: "App.tsx", code: withPartsReactTailwindTsx, lang: "tsx" },
|
||
]}
|
||
>
|
||
<WithPartsDemoReactTailwind client:idle />
|
||
</Demo>
|
||
</StyleCase>
|
||
</FrameworkCase>
|
||
|
||
<FrameworkCase frameworks={["html"]}>
|
||
<StyleCase styles={["css"]}>
|
||
<Demo
|
||
files={[
|
||
{ title: "index.html", code: withPartsHtml, lang: "html" },
|
||
{ title: "index.css", code: withPartsHtmlCss, lang: "css" },
|
||
{ title: "index.ts", code: withPartsHtmlTs, lang: "ts" },
|
||
]}
|
||
>
|
||
<WithPartsDemoHtml />
|
||
</Demo>
|
||
</StyleCase>
|
||
<StyleCase styles={["tailwind"]}>
|
||
<Demo
|
||
files={[
|
||
{ title: "index.html", code: withPartsTailwindHtml, lang: "html" },
|
||
{ title: "index.ts", code: withPartsTailwindHtmlTs, lang: "ts" },
|
||
]}
|
||
>
|
||
<WithPartsDemoHtmlTailwind />
|
||
</Demo>
|
||
</StyleCase>
|
||
</FrameworkCase>
|
||
|
||
<ComponentReference component="VolumeSlider" />
|