From 20058a9fd9d18a191ec439b3749b7408d8991fc9 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Mon, 14 Aug 2023 19:44:42 -0700
Subject: [PATCH] fix(slider): rerender ticks when prop is modified (#7439)

**Related Issue:** #6375

## Summary

This adds a watcher for `ticks` to update slider ticks.
---
 .../src/components/slider/slider.stories.ts   | 31 +++++++++++++++++++
 .../src/components/slider/slider.tsx          | 16 +++++-----
 2 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/packages/calcite-components/src/components/slider/slider.stories.ts b/packages/calcite-components/src/components/slider/slider.stories.ts
index 6fc87d4930b..a4445fc48e2 100644
--- 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
index 7167b4fd5b2..4f10f90df84 100644
--- 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 {