fix: allow slider to show small increment changes (microsoft#5559)

* fix: allow slider to show small increment changes * Change files
nickbeau · Feb 5, 2022 · 5ed2935 · 5ed2935
1 parent e00944d
commit 5ed2935
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 1 deletion.
diff --git a/change/@microsoft-fast-components-30bb2667-0b95-4a7a-9e37-15cf7c78b17f.json b/change/@microsoft-fast-components-30bb2667-0b95-4a7a-9e37-15cf7c78b17f.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: allow slider to show small increment changes",
+  "packageName": "@microsoft/fast-components",
+  "email": "jes@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-foundation-769f9dc9-d19f-486d-a069-13e71aad0c6a.json b/change/@microsoft-fast-foundation-769f9dc9-d19f-486d-a069-13e71aad0c6a.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: allow slider to show small increment changes",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "jes@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-components/src/slider/fixtures/base.html b/packages/web-components/fast-components/src/slider/fixtures/base.html
@@ -76,6 +76,17 @@ <h2>Negative positions</h2>
         </fast-slider-label>
     </fast-slider>
 
+    <!-- Large range small step -->
+    <h2>Large range with small step</h2>
+    <fast-slider min="0" max="1000" step="1" value="450" style="min-width: unset;">
+        <fast-slider-label hide-mark="true" position="0">
+            0
+        </fast-slider-label>
+        <fast-slider-label hide-mark="true" position="1000">
+            1000
+        </fast-slider-label>
+    </fast-slider>
+
     <!-- Min above 0 -->
     <h2>Min value greater than 0</h2>
     <div style="width: 160px;">

diff --git a/packages/web-components/fast-foundation/src/slider/slider.ts b/packages/web-components/fast-foundation/src/slider/slider.ts
@@ -334,7 +334,7 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration
             Number(this.max),
             direction
         );
-        const percentage: number = Math.round((1 - newPct) * 100);
+        const percentage: number = (1 - newPct) * 100;
         if (this.orientation === Orientation.horizontal) {
             this.position = this.isDragging
                 ? `right: ${percentage}%; transition: none;`