feat(html): add slider element (#655)

packages/core/src/core/ui/slider/slider-core.ts

@@ -2,11 +2,8 @@ import { clamp, roundToStep } from '@videojs/utils/number';
 import { defaults } from '@videojs/utils/object';
 import type { NonNullableObject } from '@videojs/utils/types';
 
-export interface SliderProps {
-  /** Minimum value of the slider range. */
-  min?: number | undefined;
-  /** Maximum value of the slider range. */
-  max?: number | undefined;
+/** Shared configuration for all slider variants. */
+export interface SliderBaseProps {
   /** Step increment for value changes (arrow keys). */
   step?: number | undefined;
   /** Large step increment (Page Up/Down keys). */
@@ -19,6 +16,15 @@ export interface SliderProps {
   thumbAlignment?: 'center' | 'edge' | undefined;
 }
 
+export interface SliderProps extends SliderBaseProps {
+  /** Current slider value. */
+  value?: number | undefined;
+  /** Minimum value of the slider range. */
+  min?: number | undefined;
+  /** Maximum value of the slider range. */
+  max?: number | undefined;
+}
+
 /** Current pointer/drag interaction state, typically provided by a DOM controller. */
 export interface SliderInteraction {
   /** Pointer position as a percentage of the track (0–100). */
@@ -56,6 +62,7 @@ export interface SliderState {
 
 export class SliderCore {
   static readonly defaultProps: NonNullableObject<SliderProps> = {
+    value: 0,
     min: 0,
     max: 100,
     step: 1,

packages/core/src/core/ui/slider/tests/slider-core.test.ts

@@ -17,6 +17,7 @@ describe('SliderCore', () => {
   describe('defaultProps', () => {
     it('has expected defaults', () => {
       expect(SliderCore.defaultProps).toEqual({
+        value: 0,
         min: 0,
         max: 100,
         step: 1,