Offset slider thumb against its left position in the document (#3125)

packages/web-components/fast-components/src/slider/fixtures/base.html

@@ -1,5 +1,5 @@
 <fast-design-system-provider use-defaults>
-    <div style="display: flex; flex-direction: column; justify-content: space-evenly; width: 500px; height: 100vh">
+    <div style="display: flex; flex-direction: column; justify-content: space-evenly; width: 500px; height: 100vh;">
         <div style="margin-bottom: 60px;">
             <button style="width: 90px;margin: 10px;" onclick="const slider = document.getElementById('switcher'); slider.getAttribute('orientation') === 'horizontal' ? slider.setAttribute('orientation', 'vertical') : slider.setAttribute('orientation', 'horizontal');">
                 Toggle orientation
@@ -9,7 +9,7 @@
                     position="0"
                 >
                     0&#8451;
-                </fast-slider-label>            
+                </fast-slider-label>
                 <fast-slider-label
                     position="10"
                 >
@@ -30,6 +30,9 @@
         <!-- No max or min -->
         <fast-slider></fast-slider>
 
+        <!-- Margin offsets -->
+        <fast-slider style="margin-left:100px"></fast-slider>
+
         <!-- Text Labels -->
         <div style="display: flex; flex-direction: column; height:min-content">
             <label for="slider1" style="margin-left: 8px;">Temperature:</label>
@@ -82,7 +85,7 @@
                         position="60"
                     >
                         60
-                    </fast-slider-label>                                                
+                    </fast-slider-label>
                     <fast-slider-label
                         position="80"
                     >
@@ -193,7 +196,7 @@
                 hide-mark="true"
             >
                 50
-            </fast-slider-label>            
+            </fast-slider-label>
             <fast-slider-label
                 position="100"
                 hide-mark="true"
@@ -287,4 +290,4 @@
             </fast-slider-label>
         </fast-slider>
     </div>
-</fast-design-system-provider>
+</fast-design-system-provider>

packages/web-components/fast-components/src/slider/slider.ts

@@ -254,9 +254,13 @@ export class Slider extends FormAssociated<HTMLInputElement>
         if (this.readOnly || this.disabled || e.defaultPrevented) {
             return;
         }
+
         // update the value based on current position
         const eventValue: number =
-            this.orientation === Orientation.horizontal ? e.pageX : e.pageY;
+            this.orientation === Orientation.horizontal
+                ? e.pageX - this.getBoundingClientRect().left
+                : e.pageY;
+
         this.value = `${this.calculateNewValue(eventValue)}`;
         this.updateForm();
     };
@@ -303,7 +307,9 @@ export class Slider extends FormAssociated<HTMLInputElement>
             window.addEventListener("mousemove", this.handleMouseMove);
 
             const controlValue: number =
-                this.orientation === Orientation.horizontal ? e.pageX : e.pageY;
+                this.orientation === Orientation.horizontal
+                    ? e.pageX - this.getBoundingClientRect().left
+                    : e.pageY;
             this.value = `${this.calculateNewValue(controlValue)}`;
             this.updateForm();
         }