#550 added progress indicator to sl-range component

src/components/range/range.styles.ts

@@ -8,6 +8,7 @@ export default css`
   ${formControlStyles}
 
   :host {
+    --indicator-color: rgb(var(--sl-color-primary-600));
     --thumb-size: 20px;
     --tooltip-offset-y: 10px;
     --track-color: rgb(var(--sl-color-neutral-200));
@@ -22,8 +23,9 @@ export default css`
 
   .range__control {
     -webkit-appearance: none;
+    border-radius: 3px;
     width: 100%;
-    height: var(--sl-input-height-medium);
+    height: var(--track-height);
     background: transparent;
     line-height: var(--sl-input-height-medium);
     vertical-align: middle;
@@ -33,7 +35,6 @@ export default css`
   .range__control::-webkit-slider-runnable-track {
     width: 100%;
     height: var(--track-height);
-    background-color: var(--track-color);
     border-radius: 3px;
     border: none;
   }
@@ -74,6 +75,12 @@ export default css`
     border: 0;
   }
 
+  .range__control::-moz-range-progress {
+    background-color: var(--indicator-color);
+    border-radius: 3px;
+    height: var(--track-height);
+  }
+
   .range__control::-moz-range-track {
     width: 100%;
     height: var(--track-height);
@@ -175,6 +182,7 @@ export default css`
   .range--tooltip-bottom .range__tooltip {
     bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));
   }
+
   .range--tooltip-bottom .range__tooltip:after {
     border-bottom: var(--sl-tooltip-arrow-size) solid rgb(var(--sl-tooltip-background-color));
     border-left: var(--sl-tooltip-arrow-size) solid transparent;

src/components/range/range.ts

@@ -82,7 +82,7 @@ export default class SlRange extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     this.handleSlotChange = this.handleSlotChange;
-    this.resizeObserver = new ResizeObserver(() => this.syncTooltip());
+    this.resizeObserver = new ResizeObserver(() => this.syncRange());
     this.shadowRoot!.addEventListener('slotchange', this.handleSlotChange);
 
     if (this.value === undefined || this.value === null) this.value = this.min;
@@ -92,7 +92,7 @@ export default class SlRange extends LitElement {
     this.handleSlotChange();
 
     this.updateComplete.then(() => {
-      this.syncTooltip();
+      this.syncRange();
       this.resizeObserver.observe(this.input);
     });
   }
@@ -123,7 +123,7 @@ export default class SlRange extends LitElement {
     this.value = Number(this.input.value);
     emit(this, 'sl-change');
 
-    requestAnimationFrame(() => this.syncTooltip());
+    requestAnimationFrame(() => this.syncRange());
   }
 
   handleBlur() {
@@ -162,18 +162,32 @@ export default class SlRange extends LitElement {
     this.hasTooltip = false;
   }
 
-  syncTooltip() {
+  syncRange(){
+    const percent = Math.max(0, (this.value - this.min) / (this.max - this.min));
+
+    this.syncProgress(percent);
     if (this.tooltip !== 'none') {
-      const percent = Math.max(0, (this.value - this.min) / (this.max - this.min));
-      const inputWidth = this.input.offsetWidth;
-      const tooltipWidth = this.output.offsetWidth;
-      const thumbSize = getComputedStyle(this.input).getPropertyValue('--thumb-size');
-      const x = `calc(${inputWidth * percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;
-      this.output.style.transform = `translateX(${x})`;
-      this.output.style.marginLeft = `-${tooltipWidth / 2}px`;
+      this.syncTooltip(percent);
     }
   }
 
+  syncProgress(percent: number) {
+    const trackColor = getComputedStyle(this.input).getPropertyValue('--track-color');
+    const indicatorColor = getComputedStyle(this.input).getPropertyValue('--indicator-color');
+
+    this.input.style.background = `linear-gradient(to right, ${indicatorColor} 0%, ${indicatorColor} ${percent*100}%, ${trackColor} ${percent*100}%, ${trackColor} 100%)`;
+  }
+
+  syncTooltip(percent: number) {
+    const inputWidth = this.input.offsetWidth;
+    const tooltipWidth = this.output.offsetWidth;
+    const thumbSize = getComputedStyle(this.input).getPropertyValue('--thumb-size');
+    const x = `calc(${inputWidth * percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;
+    
+    this.output.style.transform = `translateX(${x})`;
+    this.output.style.marginLeft = `-${tooltipWidth / 2}px`;
+  }
+
   render() {
     // NOTE - always bind value after min/max, otherwise it will be clamped
     return renderFormControl(