---
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