refactor(core): replace document listeners with pointer capture in slider (#762)

packages/html/src/ui/slider/slider-element.ts

@@ -78,11 +78,8 @@ export class SliderElement extends MediaElement {
     });
 
     applyElementProps(this, this.#slider.rootProps, { signal });
+    applyStyles(this, this.#slider.rootStyle);
     this.#slider.input.subscribe(() => this.requestUpdate(), { signal });
-
-    // Prevent default touch gestures and text selection during interaction.
-    this.style.touchAction = 'none';
-    this.style.userSelect = 'none';
   }
 
   override disconnectedCallback(): void {

packages/html/src/ui/time-slider/time-slider-element.ts

@@ -83,12 +83,9 @@ export class TimeSliderElement extends MediaElement {
     });
 
     applyElementProps(this, this.#slider.rootProps, { signal });
+    applyStyles(this, this.#slider.rootStyle);
     this.#slider.input.subscribe(() => this.requestUpdate(), { signal });
 
-    // Prevent default touch gestures and text selection during interaction.
-    this.style.touchAction = 'none';
-    this.style.userSelect = 'none';
-
     if (__DEV__ && !this.#timeState.value) {
       logMissingFeature(this.localName, this.#timeState.displayName!);
     }

packages/html/src/ui/volume-slider/volume-slider-element.ts

@@ -79,12 +79,9 @@ export class VolumeSliderElement extends MediaElement {
     });
 
     applyElementProps(this, this.#slider.rootProps, { signal });
+    applyStyles(this, this.#slider.rootStyle);
     this.#slider.input.subscribe(() => this.requestUpdate(), { signal });
 
-    // Prevent default touch gestures and text selection during interaction.
-    this.style.touchAction = 'none';
-    this.style.userSelect = 'none';
-
     if (__DEV__ && !this.#volumeState.value) {
       logMissingFeature(this.localName, this.#volumeState.displayName!);
     }