fix(slider): prevent excessive tick rendering (#7421)

**Related Issue:** #7242 ## Summary This caps the amount of ticks that get rendered at a time (max 250). **Note**: The current max was determined heuristically to strike a balance between amount of ticks displayed and avoiding cluttering.
Esri · Aug 3, 2023 · c799409 · c799409
1 parent dbb6818
commit c799409
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 5 deletions.
diff --git a/packages/calcite-components/src/components/slider/resources.ts b/packages/calcite-components/src/components/slider/resources.ts
@@ -5,3 +5,5 @@ export const CSS = {
   tickMin: "tick__label--min",
   tickMax: "tick__label--max",
 };
+
+export const maxTickElementThreshold = 250;
diff --git a/packages/calcite-components/src/components/slider/slider.stories.ts b/packages/calcite-components/src/components/slider/slider.stories.ts
@@ -393,3 +393,24 @@ export const WithLargeFontSize_TestOnly = (): string => html`<html lang="en">
     </div>
   </body>
 </html>`;
+
+export const maxTickRendering_TestOnly = (): string => html`
+  <style>
+    calcite-slider {
+      width: 60vw;
+    }
+  </style>
+
+  <calcite-slider min="-100" max="100" ticks="1"></calcite-slider>
+  <calcite-slider min="-100" max="100" ticks="5"></calcite-slider>
+  <calcite-slider min="-100" max="100" ticks="10"></calcite-slider>
+  <calcite-slider min="-250" max="250" ticks="1"></calcite-slider>
+  <calcite-slider min="-250" max="250" ticks="5"></calcite-slider>
+  <calcite-slider min="-250" max="250" ticks="10"></calcite-slider>
+  <calcite-slider min="-500" max="500" ticks="1"></calcite-slider>
+  <calcite-slider min="-500" max="500" ticks="5"></calcite-slider>
+  <calcite-slider min="-500" max="500" ticks="10"></calcite-slider>
+  <calcite-slider min="-1000" max="1000" ticks="1"></calcite-slider>
+  <calcite-slider min="-1000" max="1000" ticks="5"></calcite-slider>
+  <calcite-slider min="-1000" max="1000" ticks="10"></calcite-slider>
+`;
diff --git a/packages/calcite-components/src/components/slider/slider.tsx b/packages/calcite-components/src/components/slider/slider.tsx
@@ -29,7 +29,7 @@ import {
   updateHostInteraction,
 } from "../../utils/interactive";
 import { isActivationKey } from "../../utils/key";
-import { connectLabel, disconnectLabel, LabelableComponent, getLabelText } from "../../utils/label";
+import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
 import {
   componentFocusable,
   LoadableComponent,
@@ -46,7 +46,7 @@ import {
 import { clamp, decimalPlaces } from "../../utils/math";
 import { ColorStop, DataSeries } from "../graph/interfaces";
 import { Scale } from "../interfaces";
-import { CSS } from "./resources";
+import { CSS, maxTickElementThreshold } from "./resources";
 
 type ActiveSliderProperty = "minValue" | "maxValue" | "value" | "minMaxValue";
 type SetValueProperty = Exclude<ActiveSliderProperty, "minMaxValue">;
@@ -1031,13 +1031,33 @@ export class Slider
     );
   }
 
+  private getTickDensity(): number {
+    const density = (this.max - this.min) / this.ticks / maxTickElementThreshold;
+
+    return density < 1 ? 1 : density;
+  }
+
   private generateTickValues(): number[] {
-    const ticks = [];
+    const tickInterval = this.ticks ?? 0;
+
+    if (tickInterval <= 0) {
+      return [];
+    }
+
+    const ticks: number[] = [this.min];
+    const density = this.getTickDensity();
+    const tickOffset = tickInterval * density;
     let current = this.min;
-    while (this.ticks && current < this.max + this.ticks) {
+
+    while (current < this.max) {
+      current += tickOffset;
       ticks.push(Math.min(current, this.max));
-      current = current + this.ticks;
     }
+
+    if (!ticks.includes(this.max)) {
+      ticks.push(this.max);
+    }
+
     return ticks;
   }