feat: rename range to slider (#46)

packages/html/html/src/components/media-time-slider.ts

@@ -1,22 +1,55 @@
 import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';
 
-import { TimeRange as CoreTimeRange } from '@vjs-10/core';
-import { timeRangeStateDefinition } from '@vjs-10/media-store';
+import { TimeSlider as CoreTimeSlider } from '@vjs-10/core';
+import { timeSliderStateDefinition } from '@vjs-10/media-store';
 
 import { toConnectedHTMLComponent } from '../utils/component-factory';
 
-interface TimeRangeRootState {
+interface TimeSliderRootState {
   currentTime: number;
   duration: number;
   requestSeek: (time: number) => void;
-  core: CoreTimeRange | null;
+  core: CoreTimeSlider | null;
 }
 
-export class TimeRangeRootBase extends HTMLElement {
+/**
+ * TimeSlider Root props hook - equivalent to React's useTimeSliderRootProps
+ * Handles element attributes and properties based on state
+ */
+export const getTimeSliderRootProps: PropsHook<{
+  currentTime: number;
+  duration: number;
+  requestSeek: (time: number) => void;
+  core: CoreTimeSlider | null;
+}> = (state, element) => {
+  const formatTime = (time: number) => {
+    const minutes = Math.floor(time / 60);
+    const seconds = Math.floor(time % 60);
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+  };
+
+  const currentTimeText = formatTime(state.currentTime);
+  const durationText = formatTime(state.duration);
+
+  const baseProps: Record<string, any> = {
+    /** data attributes/props */
+    'data-current-time': state.currentTime.toString(),
+    'data-duration': state.duration.toString(),
+    'data-orientation': (element as any).orientation || 'horizontal',
+    /** aria attributes/props */
+    'aria-label': 'Seek',
+    'aria-valuetext': `${currentTimeText} of ${durationText}`,
+    'aria-orientation': (element as any).orientation || 'horizontal',
+  };
+
+  return baseProps;
+};
+
+export class TimeSliderRootBase extends HTMLElement {
   static readonly observedAttributes: readonly string[] = ['orientation'];
 
-  _state: TimeRangeRootState | undefined;
-  _core: CoreTimeRange | null = null;
+  _state: TimeSliderRootState | undefined;
+  _core: CoreTimeSlider | null = null;
 
   get currentTime(): number {
     return this._state?.currentTime ?? 0;
@@ -32,7 +65,7 @@ export class TimeRangeRootBase extends HTMLElement {
 
   attributeChangedCallback(name: string, _oldValue: string | null, _newValue: string | null): void {
     if (name === 'orientation' && this._state) {
-      this._render(useTimeRangeRootProps(this._state, this), this._state);
+      this._render(getTimeSliderRootProps(this._state, this), this._state);
     }
   }
 
@@ -40,8 +73,8 @@ export class TimeRangeRootBase extends HTMLElement {
     this._state = state;
 
     if (state && !this._core) {
-      this._core = new CoreTimeRange();
-      this._core.subscribe(() => this._render(useTimeRangeRootProps(state, this), state));
+      this._core = new CoreTimeSlider();
+      this._core.subscribe(() => this._render(getTimeSliderRootProps(state, this), state));
       this._core.attach(this);
       state.core = this._core;
     }
@@ -70,14 +103,14 @@ export class TimeRangeRootBase extends HTMLElement {
   }
 }
 
-export class TimeRangeTrackBase extends HTMLElement {
+export class TimeSliderTrackBase extends HTMLElement {
   constructor() {
     super();
   }
 
   connectedCallback(): void {
-    // Set this element as the track element in the core TimeRange
-    const rootElement = this.closest('media-time-range-root') as any;
+    // Set this element as the track element in the core TimeSlider
+    const rootElement = this.closest('media-time-slider-root') as any;
     if (rootElement?._state?.core) {
       rootElement._state.core.setState({ _trackElement: this });
     }
@@ -98,7 +131,7 @@ export class TimeRangeTrackBase extends HTMLElement {
   }
 }
 
-export class TimeRangeProgressBase extends HTMLElement {
+export class TimeSliderProgressBase extends HTMLElement {
   constructor() {
     super();
     this.style.position = 'absolute';
@@ -125,7 +158,7 @@ export class TimeRangeProgressBase extends HTMLElement {
   }
 }
 
-export class TimeRangePointerBase extends HTMLElement {
+export class TimeSliderPointerBase extends HTMLElement {
   constructor() {
     super();
     this.style.position = 'absolute';
@@ -152,7 +185,7 @@ export class TimeRangePointerBase extends HTMLElement {
   }
 }
 
-export class TimeRangeThumbBase extends HTMLElement {
+export class TimeSliderThumbBase extends HTMLElement {
   constructor() {
     super();
     this.style.position = 'absolute';
@@ -175,157 +208,123 @@ export class TimeRangeThumbBase extends HTMLElement {
   }
 }
 
-export const useTimeRangeRootState: StateHook<{
+export const useTimeSliderRootState: StateHook<{
   currentTime: number;
   duration: number;
   requestSeek: (time: number) => void;
-  core: CoreTimeRange | null;
+  core: CoreTimeSlider | null;
 }> = {
-  keys: timeRangeStateDefinition.keys,
+  keys: timeSliderStateDefinition.keys,
   transform: (rawState, mediaStore) => ({
-    ...timeRangeStateDefinition.stateTransform(rawState),
-    ...timeRangeStateDefinition.createRequestMethods(mediaStore.dispatch),
+    ...timeSliderStateDefinition.stateTransform(rawState),
+    ...timeSliderStateDefinition.createRequestMethods(mediaStore.dispatch),
     core: null,
   }),
 };
 
-export const useTimeRangeRootProps: PropsHook<{
+export const getTimeSliderTrackProps: PropsHook<Record<string, never>> = (_state, element) => {
+  // Get orientation from parent root element if not provided in state
+  const rootElement = element.closest('media-time-slider-root') as any;
+  return {
+    'data-orientation': rootElement?.orientation || 'horizontal',
+  };
+};
+
+export const getTimeSliderProgressProps: PropsHook<Record<string, never>> = (_state, element) => {
+  // Get orientation from parent root element if not provided in state
+  const rootElement = element.closest('media-time-slider-root') as any;
+  return {
+    'data-orientation': rootElement?.orientation || 'horizontal',
+  };
+};
+
+export const getTimeSliderPointerProps: PropsHook<Record<string, never>> = (_state, element) => {
+  // Get orientation from parent root element if not provided in state
+  const rootElement = element.closest('media-time-slider-root') as any;
+  return {
+    'data-orientation': rootElement?.orientation || 'horizontal',
+  };
+};
+
+export const getTimeSliderThumbProps: PropsHook<Record<string, never>> = (_state, element) => {
+  // Get orientation from parent root element if not provided in state
+  const rootElement = element.closest('media-time-slider-root') as any;
+  return {
+    'data-orientation': rootElement?.orientation || 'horizontal',
+  };
+};
+
+export const TimeSliderRoot: ConnectedComponentConstructor<{
   currentTime: number;
   duration: number;
   requestSeek: (time: number) => void;
-  core: CoreTimeRange | null;
-}> = (state, element) => {
-  const formatTime = (time: number) => {
-    const minutes = Math.floor(time / 60);
-    const seconds = Math.floor(time % 60);
-    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
-  };
+  core: CoreTimeSlider | null;
+}> = toConnectedHTMLComponent(TimeSliderRootBase, useTimeSliderRootState, getTimeSliderRootProps, 'TimeSliderRoot');
 
-  const currentTimeText = formatTime(state.currentTime);
-  const durationText = formatTime(state.duration);
-
-  const baseProps: Record<string, any> = {
-    /** data attributes/props */
-    'data-current-time': state.currentTime.toString(),
-    'data-duration': state.duration.toString(),
-    'data-orientation': (element as any).orientation || 'horizontal',
-    /** aria attributes/props */
-    'aria-label': 'Seek',
-    'aria-valuetext': `${currentTimeText} of ${durationText}`,
-    'aria-orientation': (element as any).orientation || 'horizontal',
-  };
-
-  return baseProps;
-};
-
-export const useTimeRangeTrackProps: PropsHook<{}> = (_state, element) => {
-  // Get orientation from parent root element if not provided in state
-  const rootElement = element.closest('media-time-range-root') as any;
-  return {
-    'data-orientation': rootElement?.orientation || 'horizontal',
-  };
-};
-
-export const useTimeRangeProgressProps: PropsHook<{}> = (_state, element) => {
-  // Get orientation from parent root element if not provided in state
-  const rootElement = element.closest('media-time-range-root') as any;
-  return {
-    'data-orientation': rootElement?.orientation || 'horizontal',
-  };
-};
-
-export const useTimeRangePointerProps: PropsHook<{}> = (_state, element) => {
-  // Get orientation from parent root element if not provided in state
-  const rootElement = element.closest('media-time-range-root') as any;
-  return {
-    'data-orientation': rootElement?.orientation || 'horizontal',
-  };
-};
-
-export const useTimeRangeThumbProps: PropsHook<{}> = (_state, element) => {
-  // Get orientation from parent root element if not provided in state
-  const rootElement = element.closest('media-time-range-root') as any;
-  return {
-    'data-orientation': rootElement?.orientation || 'horizontal',
-  };
-};
-
-export const TimeRangeRoot: ConnectedComponentConstructor<{
-  currentTime: number;
-  duration: number;
-  requestSeek: (time: number) => void;
-  core: CoreTimeRange | null;
-}> = toConnectedHTMLComponent(TimeRangeRootBase, useTimeRangeRootState, useTimeRangeRootProps, 'TimeRangeRoot');
-
-export const TimeRangeTrack: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(
-  TimeRangeTrackBase,
+export const TimeSliderTrack: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(
+  TimeSliderTrackBase,
   { keys: [], transform: () => ({}) },
-  useTimeRangeTrackProps,
-  'TimeRangeTrack',
+  getTimeSliderTrackProps,
+  'TimeSliderTrack',
 );
 
-export const TimeRangeProgress: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(
-  TimeRangeProgressBase,
+export const TimeSliderProgress: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(
+  TimeSliderProgressBase,
   { keys: [], transform: () => ({}) },
-  useTimeRangeProgressProps,
-  'TimeRangeProgress',
+  getTimeSliderProgressProps,
+  'TimeSliderProgress',
 );
 
-export const TimeRangePointer: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(
-  TimeRangePointerBase,
+export const TimeSliderPointer: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(
+  TimeSliderPointerBase,
   { keys: [], transform: () => ({}) },
-  useTimeRangePointerProps,
-  'TimeRangePointer',
+  getTimeSliderPointerProps,
+  'TimeSliderPointer',
 );
 
-export const TimeRangeThumb: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(
-  TimeRangeThumbBase,
+export const TimeSliderThumb: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(
+  TimeSliderThumbBase,
   { keys: [], transform: () => ({}) },
-  useTimeRangeThumbProps,
-  'TimeRangeThumb',
+  getTimeSliderThumbProps,
+  'TimeSliderThumb',
 );
 
-export const TimeRange = Object.assign(
+export const TimeSlider = Object.assign(
   {},
   {
-    Root: TimeRangeRoot,
-    Track: TimeRangeTrack,
-    Progress: TimeRangeProgress,
-    Pointer: TimeRangePointer,
-    Thumb: TimeRangeThumb,
+    Root: TimeSliderRoot,
+    Track: TimeSliderTrack,
+    Progress: TimeSliderProgress,
+    Pointer: TimeSliderPointer,
+    Thumb: TimeSliderThumb,
   },
 ) as {
-  Root: typeof TimeRangeRoot;
-  Track: typeof TimeRangeTrack;
-  Progress: typeof TimeRangeProgress;
-  Pointer: typeof TimeRangePointer;
-  Thumb: typeof TimeRangeThumb;
+  Root: typeof TimeSliderRoot;
+  Track: typeof TimeSliderTrack;
+  Progress: typeof TimeSliderProgress;
+  Pointer: typeof TimeSliderPointer;
+  Thumb: typeof TimeSliderThumb;
 };
 
 // Register custom elements
-if (!globalThis.customElements.get('media-time-range-root')) {
-  // @ts-ignore - Custom element constructor compatibility
-  globalThis.customElements.define('media-time-range-root', TimeRangeRoot);
+if (!globalThis.customElements.get('media-time-slider-root')) {
+  globalThis.customElements.define('media-time-slider-root', TimeSliderRoot);
 }
 
-if (!globalThis.customElements.get('media-time-range-track')) {
-  // @ts-ignore - Custom element constructor compatibility
-  globalThis.customElements.define('media-time-range-track', TimeRangeTrack);
+if (!globalThis.customElements.get('media-time-slider-track')) {
+  globalThis.customElements.define('media-time-slider-track', TimeSliderTrack);
 }
 
-if (!globalThis.customElements.get('media-time-range-progress')) {
-  // @ts-ignore - Custom element constructor compatibility
-  globalThis.customElements.define('media-time-range-progress', TimeRangeProgress);
+if (!globalThis.customElements.get('media-time-slider-progress')) {
+  globalThis.customElements.define('media-time-slider-progress', TimeSliderProgress);
 }
 
-if (!globalThis.customElements.get('media-time-range-pointer')) {
-  // @ts-ignore - Custom element constructor compatibility
-  globalThis.customElements.define('media-time-range-pointer', TimeRangePointer);
+if (!globalThis.customElements.get('media-time-slider-pointer')) {
+  globalThis.customElements.define('media-time-slider-pointer', TimeSliderPointer);
 }
 
-if (!globalThis.customElements.get('media-time-range-thumb')) {
-  // @ts-ignore - Custom element constructor compatibility
-  globalThis.customElements.define('media-time-range-thumb', TimeRangeThumb);
+if (!globalThis.customElements.get('media-time-slider-thumb')) {
+  globalThis.customElements.define('media-time-slider-thumb', TimeSliderThumb);
 }
 
-export default TimeRange;
+export default TimeSlider;

packages/html/html/src/components/media-volume-slider.ts

@@ -1,26 +1,53 @@
 import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';
 
-import { VolumeRange as CoreVolumeRange } from '@vjs-10/core';
-import { volumeRangeStateDefinition } from '@vjs-10/media-store';
+import { VolumeSlider as CoreVolumeSlider } from '@vjs-10/core';
+import { volumeSliderStateDefinition } from '@vjs-10/media-store';
 
 import { toConnectedHTMLComponent } from '../utils/component-factory';
 
 /**
- * VolumeRange Root component - Main container with pointer event handling
+ * VolumeSlider Root props hook - equivalent to React's useVolumeSliderRootProps
+ * Handles element attributes and properties based on state
  */
-interface VolumeRangeRootState {
+export const getVolumeSliderRootProps: PropsHook<{
   volume: number;
   muted: boolean;
   volumeLevel: string;
   requestVolumeChange: (volume: number) => void;
-  core: CoreVolumeRange | null;
+  core: CoreVolumeSlider | null;
+}> = (state, element) => {
+  const volumeText = `${Math.round(state.muted ? 0 : state.volume * 100)}%`;
+
+  const baseProps: Record<string, any> = {
+    /** data attributes/props */
+    'data-muted': state.muted.toString(),
+    'data-volume-level': state.volumeLevel,
+    'data-orientation': (element as any).orientation || 'horizontal',
+    /** aria attributes/props */
+    'aria-label': 'Volume',
+    'aria-valuetext': volumeText,
+    'aria-orientation': (element as any).orientation || 'horizontal',
+  };
+
+  return baseProps;
+};
+
+/**
+ * VolumeSlider Root component - Main container with pointer event handling
+ */
+interface VolumeSliderRootState {
+  volume: number;
+  muted: boolean;
+  volumeLevel: string;
+  requestVolumeChange: (volume: number) => void;
+  core: CoreVolumeSlider | null;
 }
 
-export class VolumeRangeRootBase extends HTMLElement {
+export class VolumeSliderRootBase extends HTMLElement {
   static readonly observedAttributes: readonly string[] = ['orientation'];
 
-  _state: VolumeRangeRootState | undefined;
-  _core: CoreVolumeRange | null = null;
+  _state: VolumeSliderRootState | undefined;
+  _core: CoreVolumeSlider | null = null;
 
   get volume(): number | undefined {
     return this._state?.volume;
@@ -40,7 +67,7 @@ export class VolumeRangeRootBase extends HTMLElement {
 
   attributeChangedCallback(name: string, _oldValue: string | null, _newValue: string | null): void {
     if (name === 'orientation' && this._state) {
-      this._render(useVolumeRangeRootProps(this._state, this), this._state);
+      this._render(getVolumeSliderRootProps(this._state, this), this._state);
     }
   }
 
@@ -48,8 +75,8 @@ export class VolumeRangeRootBase extends HTMLElement {
     this._state = state;
 
     if (state && !this._core) {
-      this._core = new CoreVolumeRange();
-      this._core.subscribe(() => this._render(useVolumeRangeRootProps(state, this), state));
+      this._core = new CoreVolumeSlider();
+      this._core.subscribe(() => this._render(getVolumeSliderRootProps(state, this), state));
       this._core.attach(this);
       state.core = this._core;
     }
@@ -79,16 +106,16 @@ export class VolumeRangeRootBase extends HTMLElement {
 }
 
 /**
- * VolumeRange Track component - Track element that captures pointer events
+ * VolumeSlider Track component - Track element that captures pointer events
  */
-export class VolumeRangeTrackBase extends HTMLElement {
+export class VolumeSliderTrackBase extends HTMLElement {
   constructor() {
     super();
   }
 
   connectedCallback(): void {
-    // Set this element as the track element in the core VolumeRange
-    const rootElement = this.closest('media-volume-range-root') as any;
+    // Set this element as the track element in the core VolumeSlider
+    const rootElement = this.closest('media-volume-slider-root') as any;
     if (rootElement?._state?.core) {
       rootElement._state.core.setState({ _trackElement: this });
     }
@@ -110,9 +137,9 @@ export class VolumeRangeTrackBase extends HTMLElement {
 }
 
 /**
- * VolumeRange Progress component - Shows current progress
+ * VolumeSlider Progress component - Shows current progress
  */
-export class VolumeRangeProgressBase extends HTMLElement {
+export class VolumeSliderProgressBase extends HTMLElement {
   constructor() {
     super();
     this.style.position = 'absolute';
@@ -140,9 +167,9 @@ export class VolumeRangeProgressBase extends HTMLElement {
 }
 
 /**
- * VolumeRange Thumb component - Draggable thumb element
+ * VolumeSlider Thumb component - Draggable thumb element
  */
-export class VolumeRangeThumbBase extends HTMLElement {
+export class VolumeSliderThumbBase extends HTMLElement {
   constructor() {
     super();
     this.style.position = 'absolute';
@@ -166,162 +193,131 @@ export class VolumeRangeThumbBase extends HTMLElement {
 }
 
 /**
- * VolumeRange Root state hook - equivalent to React's useVolumeRangeRootState
+ * VolumeSlider Root state hook - equivalent to React's useVolumeSliderRootState
  * Handles media store state subscription and transformation
  */
-export const useVolumeRangeRootState: StateHook<{
+export const useVolumeSliderRootState: StateHook<{
   volume: number;
   muted: boolean;
   volumeLevel: string;
   requestVolumeChange: (volume: number) => void;
-  core: CoreVolumeRange | null;
+  core: CoreVolumeSlider | null;
 }> = {
-  keys: volumeRangeStateDefinition.keys,
+  keys: volumeSliderStateDefinition.keys,
   transform: (rawState, mediaStore) => ({
-    ...volumeRangeStateDefinition.stateTransform(rawState),
-    ...volumeRangeStateDefinition.createRequestMethods(mediaStore.dispatch),
+    ...volumeSliderStateDefinition.stateTransform(rawState),
+    ...volumeSliderStateDefinition.createRequestMethods(mediaStore.dispatch),
     core: null,
   }),
 };
 
 /**
- * VolumeRange Root props hook - equivalent to React's useVolumeRangeRootProps
- * Handles element attributes and properties based on state
+ * VolumeSlider Track props hook
  */
-export const useVolumeRangeRootProps: PropsHook<{
+export const getVolumeSliderTrackProps: PropsHook<Record<string, never>> = (_state, element) => {
+  // Get orientation from parent root element if not provided in state
+  const rootElement = element.closest('media-volume-slider-root') as any;
+  return {
+    'data-orientation': rootElement?.orientation || 'horizontal',
+  };
+};
+
+/**
+ * VolumeSlider Progress props hook
+ */
+export const getVolumeSliderProgressProps: PropsHook<Record<string, never>> = (_state, element) => {
+  // Get orientation from parent root element if not provided in state
+  const rootElement = element.closest('media-volume-slider-root') as any;
+  return {
+    'data-orientation': rootElement?.orientation || 'horizontal',
+  };
+};
+
+/**
+ * VolumeSlider Thumb props hook
+ */
+export const getVolumeSliderThumbProps: PropsHook<Record<string, never>> = (_state, element) => {
+  // Get orientation from parent root element if not provided in state
+  const rootElement = element.closest('media-volume-slider-root') as any;
+  return {
+    'data-orientation': rootElement?.orientation || 'horizontal',
+  };
+};
+
+/**
+ * Connected VolumeSlider Root component using hook-style architecture
+ */
+export const VolumeSliderRoot: ConnectedComponentConstructor<{
   volume: number;
   muted: boolean;
   volumeLevel: string;
   requestVolumeChange: (volume: number) => void;
-  core: CoreVolumeRange | null;
-}> = (state, element) => {
-  const volumeText = `${Math.round(state.muted ? 0 : state.volume * 100)}%`;
-
-  const baseProps: Record<string, any> = {
-    /** data attributes/props */
-    'data-muted': state.muted.toString(),
-    'data-volume-level': state.volumeLevel,
-    'data-orientation': (element as any).orientation || 'horizontal',
-    /** aria attributes/props */
-    'aria-label': 'Volume',
-    'aria-valuetext': volumeText,
-    'aria-orientation': (element as any).orientation || 'horizontal',
-  };
-
-  return baseProps;
-};
+  core: CoreVolumeSlider | null;
+}> = toConnectedHTMLComponent(VolumeSliderRootBase, useVolumeSliderRootState, getVolumeSliderRootProps, 'VolumeSliderRoot');
 
 /**
- * VolumeRange Track props hook
+ * Connected VolumeSlider Track component
  */
-export const useVolumeRangeTrackProps: PropsHook<{}> = (_state, element) => {
-  // Get orientation from parent root element if not provided in state
-  const rootElement = element.closest('media-volume-range-root') as any;
-  return {
-    'data-orientation': rootElement?.orientation || 'horizontal',
-  };
-};
-
-/**
- * VolumeRange Progress props hook
- */
-export const useVolumeRangeProgressProps: PropsHook<{}> = (_state, element) => {
-  // Get orientation from parent root element if not provided in state
-  const rootElement = element.closest('media-volume-range-root') as any;
-  return {
-    'data-orientation': rootElement?.orientation || 'horizontal',
-  };
-};
-
-/**
- * VolumeRange Thumb props hook
- */
-export const useVolumeRangeThumbProps: PropsHook<{}> = (_state, element) => {
-  // Get orientation from parent root element if not provided in state
-  const rootElement = element.closest('media-volume-range-root') as any;
-  return {
-    'data-orientation': rootElement?.orientation || 'horizontal',
-  };
-};
-
-/**
- * Connected VolumeRange Root component using hook-style architecture
- */
-export const VolumeRangeRoot: ConnectedComponentConstructor<{
-  volume: number;
-  muted: boolean;
-  volumeLevel: string;
-  requestVolumeChange: (volume: number) => void;
-  core: CoreVolumeRange | null;
-}> = toConnectedHTMLComponent(VolumeRangeRootBase, useVolumeRangeRootState, useVolumeRangeRootProps, 'VolumeRangeRoot');
-
-/**
- * Connected VolumeRange Track component
- */
-export const VolumeRangeTrack: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(
-  VolumeRangeTrackBase,
+export const VolumeSliderTrack: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(
+  VolumeSliderTrackBase,
   { keys: [], transform: () => ({}) },
-  useVolumeRangeTrackProps,
-  'VolumeRangeTrack',
+  getVolumeSliderTrackProps,
+  'VolumeSliderTrack',
 );
 
 /**
- * Connected VolumeRange Progress component
+ * Connected VolumeSlider Progress component
  */
-export const VolumeRangeProgress: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(
-  VolumeRangeProgressBase,
+export const VolumeSliderProgress: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(
+  VolumeSliderProgressBase,
   { keys: [], transform: () => ({}) },
-  useVolumeRangeProgressProps,
-  'VolumeRangeProgress',
+  getVolumeSliderProgressProps,
+  'VolumeSliderProgress',
 );
 
 /**
- * Connected VolumeRange Thumb component
+ * Connected VolumeSlider Thumb component
  */
-export const VolumeRangeThumb: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(
-  VolumeRangeThumbBase,
+export const VolumeSliderThumb: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(
+  VolumeSliderThumbBase,
   { keys: [], transform: () => ({}) },
-  useVolumeRangeThumbProps,
-  'VolumeRangeThumb',
+  getVolumeSliderThumbProps,
+  'VolumeSliderThumb',
 );
 
 /**
- * Compound VolumeRange component object
+ * Compound VolumeSlider component object
  */
-export const VolumeRange = Object.assign(
+export const VolumeSlider = Object.assign(
   {},
   {
-    Root: VolumeRangeRoot,
-    Track: VolumeRangeTrack,
-    Progress: VolumeRangeProgress,
-    Thumb: VolumeRangeThumb,
+    Root: VolumeSliderRoot,
+    Track: VolumeSliderTrack,
+    Progress: VolumeSliderProgress,
+    Thumb: VolumeSliderThumb,
   },
 ) as {
-  Root: typeof VolumeRangeRoot;
-  Track: typeof VolumeRangeTrack;
-  Progress: typeof VolumeRangeProgress;
-  Thumb: typeof VolumeRangeThumb;
+  Root: typeof VolumeSliderRoot;
+  Track: typeof VolumeSliderTrack;
+  Progress: typeof VolumeSliderProgress;
+  Thumb: typeof VolumeSliderThumb;
 };
 
 // Register custom elements
-if (!globalThis.customElements.get('media-volume-range-root')) {
-  // @ts-ignore - Custom element constructor compatibility
-  globalThis.customElements.define('media-volume-range-root', VolumeRangeRoot);
+if (!globalThis.customElements.get('media-volume-slider-root')) {
+  globalThis.customElements.define('media-volume-slider-root', VolumeSliderRoot);
 }
 
-if (!globalThis.customElements.get('media-volume-range-track')) {
-  // @ts-ignore - Custom element constructor compatibility
-  globalThis.customElements.define('media-volume-range-track', VolumeRangeTrack);
+if (!globalThis.customElements.get('media-volume-slider-track')) {
+  globalThis.customElements.define('media-volume-slider-track', VolumeSliderTrack);
 }
 
-if (!globalThis.customElements.get('media-volume-range-progress')) {
-  // @ts-ignore - Custom element constructor compatibility
-  globalThis.customElements.define('media-volume-range-progress', VolumeRangeProgress);
+if (!globalThis.customElements.get('media-volume-slider-progress')) {
+  globalThis.customElements.define('media-volume-slider-progress', VolumeSliderProgress);
 }
 
-if (!globalThis.customElements.get('media-volume-range-thumb')) {
-  // @ts-ignore - Custom element constructor compatibility
-  globalThis.customElements.define('media-volume-range-thumb', VolumeRangeThumb);
+if (!globalThis.customElements.get('media-volume-slider-thumb')) {
+  globalThis.customElements.define('media-volume-slider-thumb', VolumeSliderThumb);
 }
 
-export default VolumeRange;
+export default VolumeSlider;

packages/html/html/src/index.ts

@@ -5,7 +5,7 @@ export { FullscreenButton } from './components/media-fullscreen-button.js';
 export { MuteButton } from './components/media-mute-button.js';
 // New hook-style components
 export { PlayButton } from './components/media-play-button.js';
-export { VolumeRange } from './components/media-volume-range.js';
+export { VolumeSlider } from './components/media-volume-slider.js';
 export * as MediaProvider from './media-provider.js';
 export * as MediaThemeDefault from './skins/media-skin-default.js';
 

packages/html/html/src/skins/media-skin-default.ts

@@ -4,8 +4,8 @@ import { uniqueId } from '../utils/element-utils';
 import '../media-container';
 import '../components/media-play-button';
 import '../components/media-mute-button';
-import '../components/media-volume-range';
-import '../components/media-time-range';
+import '../components/media-volume-slider';
+import '../components/media-time-slider';
 import '../components/media-fullscreen-button';
 import '../components/media-duration-display';
 import '../components/media-current-time-display';
@@ -114,8 +114,8 @@ export function getTemplateHTML() {
         flex-grow: 1;
       }
 
-      /* TimeRange Component Styles */
-      media-time-range-root {
+      /* TimeSlider Component Styles */
+      media-time-slider-root {
         display: flex;
         align-items: center;
         justify-content: center;
@@ -126,21 +126,21 @@ export function getTemplateHTML() {
       }
 
       /* Horizontal orientation styles */
-      media-time-range-root[data-orientation="horizontal"] {
+      media-time-slider-root[data-orientation="horizontal"] {
         min-width: 100px;
         width: 100%;
         height: 20px;
       }
 
       /* Vertical orientation styles */
-      media-time-range-root[data-orientation="vertical"] {
+      media-time-slider-root[data-orientation="vertical"] {
         min-width: 20px;
         width: 20px;
         height: 100px;
         flex-direction: column;
       }
 
-      media-time-range-track {
+      media-time-slider-track {
         position: relative;
         width: 100%;
         height: .375rem;
@@ -151,18 +151,18 @@ export function getTemplateHTML() {
       }
 
       /* Horizontal track styles */
-      media-time-range-track[data-orientation="horizontal"] {
+      media-time-slider-track[data-orientation="horizontal"] {
         width: 100%;
         height: .375rem;
       }
 
       /* Vertical track styles */
-      media-time-range-track[data-orientation="vertical"] {
+      media-time-slider-track[data-orientation="vertical"] {
         width: .375rem;
         height: 100%;
       }
 
-      media-time-range-thumb {
+      media-time-slider-thumb {
         width: .75rem;
         height: .75rem;
         background-color: #fff;
@@ -170,12 +170,12 @@ export function getTemplateHTML() {
         pointer-events: none;
       }
 
-      media-time-range-pointer {
+      media-time-slider-pointer {
         background-color: rgba(255, 255, 255, .5);
         pointer-events: none;
       }
 
-      media-time-range-progress {
+      media-time-slider-progress {
         background-color: #007bff;
         border-radius: inherit;
       }
@@ -185,8 +185,8 @@ export function getTemplateHTML() {
         padding: 14px 0;
       }
 
-      /* VolumeRange Component Styles */
-      media-volume-range-root {
+      /* VolumeSlider Component Styles */
+      media-volume-slider-root {
         display: flex;
         align-items: center;
         justify-content: center;
@@ -197,21 +197,21 @@ export function getTemplateHTML() {
       }
 
       /* Horizontal orientation styles */
-      media-volume-range-root[data-orientation="horizontal"] {
+      media-volume-slider-root[data-orientation="horizontal"] {
         min-width: 80px;
         width: 80px;
         height: 20px;
       }
 
       /* Vertical orientation styles */
-      media-volume-range-root[data-orientation="vertical"] {
+      media-volume-slider-root[data-orientation="vertical"] {
         min-width: 20px;
         width: 20px;
         height: 80px;
         flex-direction: column;
       }
 
-      media-volume-range-track {
+      media-volume-slider-track {
         position: relative;
         width: 100%;
         height: .375rem;
@@ -222,18 +222,18 @@ export function getTemplateHTML() {
       }
 
       /* Horizontal track styles */
-      media-volume-range-track[data-orientation="horizontal"] {
+      media-volume-slider-track[data-orientation="horizontal"] {
         width: 100%;
         height: .375rem;
       }
 
       /* Vertical track styles */
-      media-volume-range-track[data-orientation="vertical"] {
+      media-volume-slider-track[data-orientation="vertical"] {
         width: .375rem;
         height: 100%;
       }
 
-      media-volume-range-thumb {
+      media-volume-slider-thumb {
         width: .75rem;
         height: .75rem;
         background-color: #fff;
@@ -241,7 +241,7 @@ export function getTemplateHTML() {
         pointer-events: none;
       }
 
-      media-volume-range-progress {
+      media-volume-slider-progress {
         background-color: #007bff;
         border-radius: inherit;
       }
@@ -302,13 +302,13 @@ export function getTemplateHTML() {
           </media-tooltip-root>
           <!-- Use the show-remaining attribute to show count down/remaining time -->
           <media-current-time-display show-remaining></media-current-time-display>
-          <media-time-range-root>
-            <media-time-range-track>
-              <media-time-range-progress></media-time-range-progress>
-              <media-time-range-pointer></media-time-range-pointer>
-            </media-time-range-track>
-            <media-time-range-thumb></media-time-range-thumb>
-          </media-time-range-root>
+          <media-time-slider-root>
+            <media-time-slider-track>
+              <media-time-slider-progress></media-time-slider-progress>
+              <media-time-slider-pointer></media-time-slider-pointer>
+            </media-time-slider-track>
+            <media-time-slider-thumb></media-time-slider-thumb>
+          </media-time-slider-root>
           <media-duration-display></media-duration-display>
           <media-popover-root open-on-hover delay="200" close-delay="100">
             <media-popover-trigger>
@@ -321,12 +321,12 @@ export function getTemplateHTML() {
             <media-popover-portal root-id="${portalId}">
               <media-popover-positioner side="top" side-offset="0">
                 <media-popover-popup>
-                  <media-volume-range-root orientation="vertical">
-                    <media-volume-range-track>
-                      <media-volume-range-progress></media-volume-range-progress>
-                    </media-volume-range-track>
-                    <media-volume-range-thumb></media-volume-range-thumb>
-                  </media-volume-range-root>
+                  <media-volume-slider-root orientation="vertical">
+                    <media-volume-slider-track>
+                      <media-volume-slider-progress></media-volume-slider-progress>
+                    </media-volume-slider-track>
+                    <media-volume-slider-thumb></media-volume-slider-thumb>
+                  </media-volume-slider-root>
                 </media-popover-popup>
               </media-popover-positioner>
             </media-popover-portal>