fix(slider): added filled offset variant

.circleci/config.yml

@@ -10,7 +10,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: e8720ac5d0ee0d076e61309294041334afe2c160
+        default: 4efe2e33f04f30cd4965e4d8e252edc0f3b6cf76
     wireit_cache_name:
         type: string
         default: wireit

packages/slider/README.md

@@ -83,14 +83,91 @@ import { Slider } from '@spectrum-web-components/slider';
 ### Filled
 
 ```html
-<sp-slider label="Slider Label" variant="filled"></sp-slider>
+<sp-slider
+    label="Slider Label"
+    max="1"
+    variant="filled"
+    min="0"
+    value=".5"
+    step="0.01"
+></sp-slider>
 <sp-slider
     label="Slider Label - Disabled"
+    max="1"
     variant="filled"
+    min="0"
+    value=".5"
+    step="0.01"
+    disabled
+></sp-slider>
+```
+
+### Filled Offset with only fill-start
+
+```html
+<sp-slider
+    label="Slider Label"
+    max="1"
+    fill-start
+    min="0"
+    value=".5"
+    step="0.01"
+></sp-slider>
+<sp-slider
+    label="Slider Label"
+    max="1"
+    fill-start
+    min="0"
+    value=".5"
+    step="0.01"
     disabled
 ></sp-slider>
 ```
 
+### Filled Offset with fill-start value
+
+```html-live
+<sp-slider
+    id="fill-start-slider"
+    label="Slider Label"
+    max="1"
+    min="0"
+    value=".7"
+    step="0.1"
+></sp-slider>
+<sp-slider
+    label="Slider Label"
+    max="1"
+    min="0"
+    value=".7"
+    step="0.1"
+    disabled
+></sp-slider>
+<script type="module">
+    const initSlider = async () => {
+        const slider = document.querySelector('#fill-start-slider');
+        slider.fillStart = 0.3
+    };
+    customElements.whenDefined('code-example').then(() => {
+            customElements.whenDefined('sp-slider').then(() => {
+                initSlider();
+            });
+        });
+</script>
+```
+
+<script type="module">
+    const initSlider = async () => {
+        const slider = document.querySelector('#fill-start-slider');
+        slider.fillStart = 0.3
+    };
+    customElements.whenDefined('code-example').then(() => {
+            customElements.whenDefined('sp-slider').then(() => {
+                initSlider();
+            });
+        }); 
+</script>
+
 ### Tick
 
 ```html

packages/slider/src/Slider.ts

@@ -14,6 +14,7 @@ import {
     CSSResultArray,
     html,
     nothing,
+    PropertyValues,
     SizedMixin,
     TemplateResult,
 } from '@spectrum-web-components/base';
@@ -91,6 +92,9 @@ export class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ''), {
     @property()
     public type = '';
 
+    @property({ reflect: true })
+    public override dir!: 'ltr' | 'rtl';
+
     @property({ type: String })
     public set variant(variant: string) {
         const oldVariant = this.variant;
@@ -160,6 +164,11 @@ export class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ''), {
     @property({ type: Boolean, reflect: true })
     public override disabled = false;
 
+    @property({ type: Boolean, reflect: true, attribute: 'fill-start' })
+    public fillStart = false;
+
+    @property({ type: Number })
+    public fillStartPoint: number | undefined;
     /**
      * Applies `quiet` to the underlying `sp-number-field` when `editable === true`.
      */
@@ -348,6 +357,60 @@ export class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ''), {
         `;
     }
 
+    private _cachedValue: number | undefined;
+
+    /**
+     * @description calculates the fill width
+     * @param fillStartValue
+     * @param currentValue
+     * @param cachedValue
+     * @returns
+     */
+    private getOffsetWidth(
+        fillStartValue: number,
+        currentValue: number,
+        cachedValue: number
+    ): number {
+        const distance =
+            fillStartValue === cachedValue
+                ? Math.abs(currentValue - fillStartValue)
+                : Math.abs(
+                      Math.min(currentValue, cachedValue) - fillStartValue
+                  );
+
+        return (distance / (this.max - this.min)) * 100;
+    }
+
+    private getOffsetPosition(v: number): number {
+        const val = ((v - this.min) / (this.max - this.min)) * 100;
+        return val;
+    }
+
+    private renderFillOffset(): TemplateResult {
+        if (!this.fillStart || !this.fillStartPoint || !this._cachedValue) {
+            return html``;
+        }
+        return html`
+            <div
+                class=${`fill ${
+                    !!(this.value > this.fillStartPoint) ? 'offset' : ''
+                }`}
+                style=${styleMap({
+                    [this.dir === 'rtl' ? 'right' : 'left']: `${
+                        this.value > this.fillStartPoint
+                            ? this.getOffsetPosition(this.fillStartPoint)
+                            : this.getOffsetPosition(this.value)
+                    }%`,
+                    width: `${this.getOffsetWidth(
+                        this.fillStartPoint,
+                        this.value,
+                        this._cachedValue
+                    )}%`,
+                })}
+            ></div>
+        `;
+    }
+
     private renderTrack(): TemplateResult {
         const segments = this.handleController.trackSegments();
         const handleItems = [
@@ -360,6 +423,7 @@ export class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ''), {
                 id: `track${index + 1}`,
                 html: this.renderTrackSegment(start, end),
             })),
+            { id: 'fill', html: this.renderFillOffset() },
         ];
 
         return html`
@@ -438,8 +502,12 @@ export class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ''), {
         const size = end - start;
         const styles: StyleInfo = {
             width: `${size * 100}%`,
-            '--spectrum-slider-track-background-size': `${(1 / size) * 100}%`,
-            '--spectrum-slider-track-segment-position': `${start * 100}%`,
+            ...(this.handleController.size > 1 && {
+                '--spectrum-slider-track-background-size': `${
+                    (1 / size) * 100
+                }%`,
+                '--spectrum-slider-track-segment-position': `${start * 100}%`,
+            }),
         };
         return styles;
     }
@@ -455,4 +523,18 @@ export class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ''), {
         await this.handleController.handleUpdatesComplete();
         return complete;
     }
+
+    protected override updated(changes: PropertyValues<this>): void {
+        super.updated(changes);
+        if (changes.has('value') && changes.has('fillStart')) {
+            this._cachedValue = Number(this.value);
+            if (typeof this.fillStart === 'number') {
+                this.fillStartPoint = this.fillStart;
+            } else {
+                this.fillStartPoint =
+                    (Number(this.max) - Number(this.min)) / 2 +
+                    Number(this.min);
+            }
+        }
+    }
 }

packages/slider/src/spectrum-config.js

@@ -99,7 +99,6 @@ const config = {
                 },
                 converter.classToId('spectrum-Slider-buffer', 'buffer'),
                 converter.classToId('spectrum-Slider-controls', 'controls'),
-                converter.classToId('spectrum-Slider-fill', 'fill'),
                 converter.classToId('spectrum-Slider-label', 'label'),
                 converter.classToId(
                     'spectrum-Slider-labelContainer',
@@ -110,6 +109,8 @@ const config = {
                 converter.classToClass('spectrum-Slider-handle', 'handle'),
                 converter.classToClass('spectrum-Slider-input', 'input'),
                 converter.classToClass('spectrum-Slider-tick', 'tick'),
+                converter.classToClass('spectrum-Slider-fill--right', 'offset'),
+                converter.classToClass('spectrum-Slider-fill', 'fill'),
                 converter.classToClass(
                     'spectrum-Slider-tickLabel',
                     'tickLabel'

packages/slider/src/spectrum-slider.css

@@ -207,7 +207,7 @@ governing permissions and limitations under the License.
         var(--spectrum-slider-control-height)
     );
 }
-#fill,
+.fill,
 .track {
     block-size: var(
         --mod-slider-track-fill-thickness,
@@ -237,7 +237,7 @@ governing permissions and limitations under the License.
     position: absolute;
     z-index: 1;
 }
-#fill:before,
+.fill:before,
 .track:before {
     block-size: 100%;
     border-end-end-radius: 0;
@@ -303,7 +303,7 @@ governing permissions and limitations under the License.
             var(--spectrum-slider-track-middle-handleoffset)
         );
 }
-#fill {
+.fill {
     margin-inline-start: 0;
     padding-block: 0;
     padding-inline-end: 0;
@@ -315,7 +315,7 @@ governing permissions and limitations under the License.
             var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap))
     );
 }
-.spectrum-Slider-fill--right {
+.offset {
     padding-block: 0;
     padding-inline-end: calc(
         var(
@@ -737,7 +737,7 @@ governing permissions and limitations under the License.
         )
     );
 }
-#fill:before {
+.fill:before {
     background: var(
         --highcontrast-slider-track-fill-color,
         var(
@@ -929,7 +929,7 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host([disabled]) #fill:before {
+:host([disabled]) .fill:before {
     background: var(
         --highcontrast-slider-track-fill-color-disabled,
         var(

packages/slider/stories/slider.stories.ts

@@ -132,6 +132,69 @@ export const Default = (args: StoryArgs = {}): TemplateResult => {
     `;
 };
 
+export const Filled = (args: StoryArgs = {}): TemplateResult => {
+    return html`
+        <div style="width: 500px; margin-inline: 20px;">
+            <sp-slider
+                max="1"
+                variant="filled"
+                min="0"
+                value=".5"
+                step="0.01"
+                @input=${handleEvent(args)}
+                @change=${handleEvent(args)}
+                .formatOptions=${{ style: 'percent' }}
+                ...=${spreadProps(args)}
+            >
+                Slider Label
+            </sp-slider>
+        </div>
+    `;
+};
+
+export const withOnlyFillStart = (args: StoryArgs = {}): TemplateResult => {
+    return html`
+        <div style="width: 500px; margin-inline: 20px;">
+            <sp-slider
+                max="1"
+                fill-start
+                min="0"
+                value=".5"
+                step="0.01"
+                @input=${handleEvent(args)}
+                @change=${handleEvent(args)}
+                .formatOptions=${{ style: 'percent' }}
+                ...=${spreadProps(args)}
+            >
+                Slider label
+            </sp-slider>
+        </div>
+    `;
+};
+
+export const withFillStartValue = (args: StoryArgs = {}): TemplateResult => {
+    return html`
+        <div style="width: 500px; margin-inline: 20px;">
+            <sp-slider
+                max="1"
+                min="0"
+                value=".7"
+                step="0.1"
+                @input=${handleEvent(args)}
+                @change=${handleEvent(args)}
+                .formatOptions=${{ style: 'percent' }}
+                ...=${spreadProps(args)}
+            >
+                Slider label
+            </sp-slider>
+        </div>
+    `;
+};
+
+withFillStartValue.args = {
+    fillStart: 0.3,
+};
+
 export const autofocus = (args: StoryArgs = {}): TemplateResult => {
     return html`
         <div style="width: 500px; margin-inline: 20px;">