mirror of
https://github.com/zoriya/v10.git
synced 2026-08-15 18:34:22 +00:00
119 lines
3.6 KiB
Plaintext
119 lines
3.6 KiB
Plaintext
---
|
|
title: TimeSlider
|
|
frameworkTitle:
|
|
html: time-slider
|
|
description: A slider component for seeking through media content
|
|
---
|
|
|
|
import { TimeSliderDemo } from '@/examples/react/TimeSlider/TimeSliderDemo';
|
|
import componentModuleStr from '@/examples/react/TimeSlider/BasicTimeSlider.tsx?raw';
|
|
import cssModuleStr from '@/examples/react/TimeSlider/TimeSlider.module.css?raw';
|
|
import htmlHorizontalStr from '@/examples/html/time-slider/snippet-horizontal.html?raw';
|
|
import htmlVerticalStr from '@/examples/html/time-slider/snippet-vertical.html?raw';
|
|
import htmlCssStr from '@/examples/html/time-slider/time-slider.css?raw';
|
|
import FrameworkCase from '@/components/docs/FrameworkCase.astro';
|
|
import Container from '@/components/docs/Container.astro';
|
|
import ServerCode from '@/components/Code/ServerCode.astro';
|
|
import { TabsRoot, TabsPanel } from '@/components/Tabs';
|
|
|
|
## Features
|
|
|
|
- Supports both horizontal and vertical orientations
|
|
- Displays current playback position
|
|
- Shows preview position on hover
|
|
- Keyboard accessible (Arrow keys for seeking)
|
|
- Touch-friendly drag interaction
|
|
|
|
## Example
|
|
|
|
<FrameworkCase frameworks={["react"]}>
|
|
<TabsRoot
|
|
aria-label="React implementation"
|
|
titles={{ component: 'Component', css: 'CSS Module' }}
|
|
client:load
|
|
>
|
|
<TabsPanel value="component" client:load>
|
|
<ServerCode code={componentModuleStr} lang="tsx" />
|
|
</TabsPanel>
|
|
|
|
<TabsPanel value="css" client:load>
|
|
<ServerCode code={cssModuleStr} lang="css" />
|
|
</TabsPanel>
|
|
|
|
<TimeSliderDemo client:load />
|
|
</TabsRoot>
|
|
</FrameworkCase>
|
|
|
|
<FrameworkCase frameworks={["html"]}>
|
|
<TabsRoot
|
|
aria-label="HTML implementation"
|
|
titles={{ 'html-horizontal': 'HTML (Horizontal)', 'html-vertical': 'HTML (Vertical)', css: 'CSS' }}
|
|
client:load
|
|
>
|
|
<TabsPanel value="html-horizontal" client:load>
|
|
<ServerCode code={htmlHorizontalStr} lang="html" />
|
|
</TabsPanel>
|
|
|
|
<TabsPanel value="html-vertical" client:load>
|
|
<ServerCode code={htmlVerticalStr} lang="html" />
|
|
</TabsPanel>
|
|
|
|
<TabsPanel value="css" client:load>
|
|
<ServerCode code={htmlCssStr} lang="css" />
|
|
</TabsPanel>
|
|
|
|
<TimeSliderDemo client:load />
|
|
</TabsRoot>
|
|
</FrameworkCase>
|
|
|
|
<FrameworkCase frameworks={["react"]}>
|
|
|
|
## Compound Components
|
|
|
|
TimeSlider is composed of multiple sub-components:
|
|
|
|
### TimeSlider.Root
|
|
The container component that manages state and interactions.
|
|
|
|
**Props:**
|
|
- `orientation?: 'horizontal' | 'vertical'` - Slider orientation (default: 'horizontal')
|
|
- All standard div props
|
|
|
|
### TimeSlider.Track
|
|
The background track element that contains progress and pointer indicators.
|
|
|
|
### TimeSlider.Progress
|
|
Visual indicator showing how much of the media has been played.
|
|
|
|
### TimeSlider.Pointer
|
|
Shows the hover/preview position when user moves cursor over the slider.
|
|
|
|
### TimeSlider.Thumb
|
|
The draggable handle that indicates and controls the current playback position.
|
|
|
|
</FrameworkCase>
|
|
|
|
## Data Attributes
|
|
|
|
The TimeSlider automatically sets data attributes:
|
|
|
|
- `data-orientation` - Current orientation ('horizontal' or 'vertical')
|
|
- `data-current-time` - Current playback time in seconds
|
|
- `data-duration` - Total media duration in seconds
|
|
|
|
Use these attributes for state-based styling in your CSS.
|
|
|
|
## CSS Variables
|
|
|
|
The component exposes CSS variables for positioning:
|
|
|
|
- `--slider-fill` - Percentage of progress (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 time values
|
|
- Proper aria-valuemin, aria-valuemax, aria-valuenow attributes
|