volume-slider

import { VolumeSlider } from '@videojs/react-preview';
import styles from './VolumeSlider.module.css';

/**
 * Basic VolumeSlider example demonstrating:
 * - Volume level visualization
 * - Horizontal orientation
 * - CSS Modules for scoped styling
 * - Data attribute selectors for state-based styling
 *
 * Note: This component must be used within a VideoProvider context.
 * See the usage example in the documentation.
 */
export function BasicVolumeSlider() {
  return (
    <VolumeSlider.Root className={styles.root} orientation="horizontal">
      <VolumeSlider.Track className={styles.track}>
        <VolumeSlider.Progress className={styles.progress} />
      </VolumeSlider.Track>
      <VolumeSlider.Thumb className={styles.thumb} />
    </VolumeSlider.Root>
  );
}

.root {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Horizontal orientation */
.root[data-orientation='horizontal'] {
  width: 80px;
  min-width: 80px;
  height: 20px;
}

/* Vertical orientation */
.root[data-orientation='vertical'] {
  width: 20px;
  height: 80px;
  flex-direction: column;
}

.track {
  position: relative;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 0.25rem;
  overflow: hidden;
}

/* Horizontal track */
.track[data-orientation='horizontal'] {
  width: 100%;
  height: 0.375rem;
}

/* Vertical track */
.track[data-orientation='vertical'] {
  width: 0.375rem;
  height: 100%;
}

.progress {
  background-color: #007bff;
  border-radius: inherit;
  position: absolute;
}

.thumb {
  width: 0.75rem;
  height: 0.75rem;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 150ms ease;
}

.thumb:hover {
  transform: scale(1.2);
}

<media-volume-slider orientation="horizontal">
  <media-volume-slider-track>
    <media-volume-slider-indicator></media-volume-slider-indicator>
  </media-volume-slider-track>
  <media-volume-slider-thumb></media-volume-slider-thumb>
</media-volume-slider>

<media-volume-slider orientation="vertical">
  <media-volume-slider-track>
    <media-volume-slider-indicator></media-volume-slider-indicator>
  </media-volume-slider-track>
  <media-volume-slider-thumb></media-volume-slider-thumb>
</media-volume-slider>

media-volume-slider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Horizontal orientation */
media-volume-slider[data-orientation='horizontal'] {
  width: 80px;
  min-width: 80px;
  height: 20px;
}

/* Vertical orientation */
media-volume-slider[data-orientation='vertical'] {
  width: 20px;
  height: 80px;
  flex-direction: column;
}

media-volume-slider-track {
  position: relative;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 0.25rem;
  overflow: hidden;
}

/* Horizontal track */
media-volume-slider-track[data-orientation='horizontal'] {
  width: 100%;
  height: 0.375rem;
}

/* Vertical track */
media-volume-slider-track[data-orientation='vertical'] {
  width: 0.375rem;
  height: 100%;
}

media-volume-slider-indicator {
  background-color: #007bff;
  border-radius: inherit;
  position: absolute;
}

media-volume-slider-thumb {
  width: 0.75rem;
  height: 0.75rem;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 150ms ease;
}

media-volume-slider:hover media-volume-slider-thumb {
  transform: scale(1.2);
}