fix(slider): fix fill placement and tick styling when ranged (#9204)

**Related Issue:** #1631

## Summary

This ensures ranged sliders place the fill and style ticks within the
range.

Author: jcfranco

packages/calcite-components/src/components/slider/slider.stories.ts

@@ -447,7 +447,9 @@ export const spaceGroupSeparatorNoBreak_TestOnly = (): string => html`
 `;
 
 export const fillPlacements = (): string => html`
-  <label>start (default)</label>
+  <h1>single</h1>
+
+  <h2>start (default)</h2>
   <calcite-slider min="0" max="100" value="0" fill-placement="start"></calcite-slider>
   <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>
@@ -456,7 +458,7 @@ export const fillPlacements = (): string => html`
   <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>
+  <h2>none</h2>
   <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>
@@ -465,14 +467,43 @@ export const fillPlacements = (): string => html`
   <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>
+  <h2>end</h2>
   <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>
+
+  <h1>range</h1>
+
+  <h2>start (default)</h2>
+  <calcite-slider min="0" max="100" min-value="0" max-value="25" fill-placement="start"></calcite-slider>
+  <calcite-slider min="0" max="100" min-value=25" max-value="75" fill-placement="start"></calcite-slider>
+  <calcite-slider min="0" max="100" min-value="75" max-value="100" fill-placement="start"></calcite-slider>
+  <br />
+  <calcite-slider ticks="10" handle-ticks min="0" max="100" min-value="0" max-value="25" fill-placement="start"></calcite-slider>
+  <calcite-slider ticks="10" handle-ticks min="0" max="100" min-value=25" max-value="75"  fill-placement="start"></calcite-slider>
+  <calcite-slider ticks="10" handle-ticks min="0" max="100" min-value="75" max-value="100" fill-placement="start"></calcite-slider>
+  <br />
+  <h2>none</h2>
+  <calcite-slider min="0" max="100" min-value="0" max-value="25" fill-placement="none"></calcite-slider>
+  <calcite-slider min="0" max="100" min-value=25" max-value="75"  fill-placement="none"></calcite-slider>
+  <calcite-slider min="0" max="100" min-value="75" max-value="100" fill-placement="none"></calcite-slider>
+  <br />
+  <calcite-slider ticks="10" handle-ticks min="0" max="100" min-value="0" max-value="25" fill-placement="none"></calcite-slider>
+  <calcite-slider ticks="10" handle-ticks min="0" max="100" min-value=25" max-value="75"  fill-placement="none"></calcite-slider>
+  <calcite-slider ticks="10" handle-ticks min="0" max="100" min-value="75" max-value="100" fill-placement="none"></calcite-slider>
+  <br />
+  <h2>end</h2>
+  <calcite-slider min="0" max="100" min-value="0" max-value="25" fill-placement="end"></calcite-slider>
+  <calcite-slider min="0" max="100" min-value=25" max-value="75"  fill-placement="end"></calcite-slider>
+  <calcite-slider min="0" max="100" min-value="75" max-value="100" fill-placement="end"></calcite-slider>
+  <br />
+  <calcite-slider ticks="10" handle-ticks min="0" max="100" min-value="0" max-value="25" fill-placement="end"></calcite-slider>
+  <calcite-slider ticks="10" handle-ticks min="0" max="100" min-value=25" max-value="75"  fill-placement="end"></calcite-slider>
+  <calcite-slider ticks="10" handle-ticks min="0" max="100" min-value="75" max-value="100" fill-placement="end"></calcite-slider>
 `;
 
 export const customLabelsAndTicks = (): string => html`

packages/calcite-components/src/components/slider/slider.tsx

@@ -296,7 +296,7 @@ export class Slider
         mirror,
       });
 
-    const { fillPlacement } = this;
+    const fillPlacement = valueIsRange ? "start" : this.fillPlacement;
     const trackRangePlacementStyles =
       fillPlacement === "none"
         ? {