fix(slider): style ticks according to the fill placement (#9196)

**Related Issue:** #1631 ## Summary This fixes an issue where ticks outside of the active fill were highlighted. **Note**: this depends on #9195
Esri · Apr 25, 2024 · 5eb4e10 · 5eb4e10
1 parent 9e5a713
commit 5eb4e10
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/packages/calcite-components/src/components/slider/slider.stories.ts b/packages/calcite-components/src/components/slider/slider.stories.ts
@@ -452,15 +452,27 @@ export const fillPlacements = (): string => html`
   <calcite-slider min="0" max="100" value="50" fill-placement="start"></calcite-slider>
   <calcite-slider min="0" max="100" value="100" fill-placement="start"></calcite-slider>
   <br />
+  <calcite-slider ticks="10" handle-ticks min="0" max="100" value="0" fill-placement="start"></calcite-slider>
+  <calcite-slider ticks="10" handle-ticks min="0" max="100" value="50" fill-placement="start"></calcite-slider>
+  <calcite-slider ticks="10" handle-ticks min="0" max="100" value="100" fill-placement="start"></calcite-slider>
+  <br />
   <label>none</label>
   <calcite-slider min="0" max="100" value="0" fill-placement="none"></calcite-slider>
   <calcite-slider min="0" max="100" value="50" fill-placement="none"></calcite-slider>
   <calcite-slider min="0" max="100" value="100" fill-placement="none"></calcite-slider>
   <br />
+  <calcite-slider ticks="10" handle-ticks min="0" max="100" value="0" fill-placement="none"></calcite-slider>
+  <calcite-slider ticks="10" handle-ticks min="0" max="100" value="50" fill-placement="none"></calcite-slider>
+  <calcite-slider ticks="10" handle-ticks min="0" max="100" value="100" fill-placement="none"></calcite-slider>
+  <br />
   <label>end</label>
   <calcite-slider min="0" max="100" value="0" fill-placement="end"></calcite-slider>
   <calcite-slider min="0" max="100" value="50" fill-placement="end"></calcite-slider>
   <calcite-slider min="0" max="100" value="100" fill-placement="end"></calcite-slider>
+  <br />
+  <calcite-slider ticks="10" handle-ticks min="0" max="100" value="0" fill-placement="end"></calcite-slider>
+  <calcite-slider ticks="10" handle-ticks min="0" max="100" value="50" fill-placement="end"></calcite-slider>
+  <calcite-slider ticks="10" handle-ticks min="0" max="100" value="100" fill-placement="end"></calcite-slider>
 `;
 
 export const customLabelsAndTicks = (): string => html`

diff --git a/packages/calcite-components/src/components/slider/slider.tsx b/packages/calcite-components/src/components/slider/slider.tsx
@@ -339,9 +339,17 @@ export class Slider
               <div class={CSS.ticks}>
                 {this.tickValues.map((tick) => {
                   const tickOffset = `${this.getUnitInterval(tick) * 100}%`;
-                  let activeTicks = tick >= min && tick <= value;
-                  if (useMinValue) {
-                    activeTicks = tick >= this.minValue && tick <= this.maxValue;
+
+                  let activeTicks: boolean = false;
+
+                  if (fillPlacement === "start" || fillPlacement === "end") {
+                    if (useMinValue) {
+                      activeTicks = tick >= this.minValue && tick <= this.maxValue;
+                    } else {
+                      const rangeStart = fillPlacement === "start" ? min : value;
+                      const rangeEnd = fillPlacement === "start" ? value : this.max;
+                      activeTicks = tick >= rangeStart && tick <= rangeEnd;
+                    }
                   }
 
                   return (