fix(slider): rerender ticks when prop is modified (#7439)

**Related Issue:** #6375 ## Summary This adds a watcher for `ticks` to update slider ticks.
Esri · Aug 15, 2023 · 20058a9 · 20058a9
1 parent 2cb12da
commit 20058a9
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 8 deletions.
diff --git a/packages/calcite-components/src/components/slider/slider.stories.ts b/packages/calcite-components/src/components/slider/slider.stories.ts
@@ -415,6 +415,37 @@ export const maxTickRendering_TestOnly = (): string => html`
   <calcite-slider min="-1000" max="1000" ticks="10"></calcite-slider>
 `;
 
+export const rendersWhenTrackRelatedPropChanges_TestOnly = (): string =>
+  html`
+    <calcite-slider
+      id="example-slider"
+      label-ticks
+      max="32"
+      value="24"
+      min="16"
+      snap
+      step="8"
+      ticks="8"
+    ></calcite-slider>
+    <script>
+      (async () => {
+        await customElements.whenDefined("calcite-slider");
+        const slider = await document.querySelector("calcite-slider").componentOnReady();
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+
+        slider.max = 64;
+        slider.min = 48;
+        slider.step = 16;
+        slider.ticks = 16;
+        slider.value = 64;
+      })();
+    </script>
+  `;
+
+rendersWhenTrackRelatedPropChanges_TestOnly.parameters = {
+  chromatic: { delay: 500 },
+};
+
 export const spaceGroupSeparatorNoBreak_TestOnly = (): string => html`
   <calcite-slider
     lang="ru"

diff --git a/packages/calcite-components/src/components/slider/slider.tsx b/packages/calcite-components/src/components/slider/slider.tsx
@@ -182,6 +182,11 @@ export class Slider
   /** Displays tick marks on the number line at a specified interval. */
   @Prop({ reflect: true }) ticks: number;
 
+  @Watch("ticks")
+  ticksWatcher(): void {
+    this.tickValues = this.generateTickValues();
+  }
+
   /** The component's value. */
   @Prop({ reflect: true, mutable: true }) value: null | number | number[] = 0;
 
@@ -226,17 +231,12 @@ export class Slider
 
   componentWillLoad(): void {
     setUpLoadableComponent(this);
-    this.tickValues = this.generateTickValues();
     if (!isRange(this.value)) {
-      this.value = this.clamp(this.value);
+      this.value = this.snap ? this.getClosestStep(this.value) : this.clamp(this.value);
     }
+    this.ticksWatcher();
+    this.histogramWatcher(this.histogram);
     afterConnectDefaultValueSet(this, this.value);
-    if (this.snap && !isRange(this.value)) {
-      this.value = this.getClosestStep(this.value);
-    }
-    if (this.histogram) {
-      this.hasHistogram = true;
-    }
   }
 
   componentDidLoad(): void {