Merge branch 'timefordroids-550' into next

docs/components/range.md

@@ -5,7 +5,7 @@
 Ranges allow the user to select a single value within a given range using a slider.
 
 ```html preview
-<sl-range min="0" max="100" step="1"></sl-range>
+<sl-range></sl-range>
 ```
 
 ?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form) instead.
@@ -36,6 +36,17 @@ To disable the tooltip, set `tooltip` to `none`.
 <sl-range min="0" max="100" step="1" tooltip="none"></sl-range>
 ```
 
+### Custom Track Colors
+
+You can customize the active and inactive portions of the track using the `--track-color-active` and `--track-color-inactive` custom properties.
+
+```html preview
+<sl-range style="
+  --track-color-active: rgb(var(--sl-color-primary-600));
+  --track-color-inactive: rgb(var(--sl-color-primary-200));
+"></sl-range>
+```
+
 ### Custom Tooltip Formatter
 
 You can change the tooltip's content by setting the `tooltipFormatter` property to a function that accepts the range's value as an argument.

docs/resources/changelog.md

@@ -17,6 +17,8 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added the `filled` variation to `<sl-input>`, `<sl-textarea>`, and `<sl-select>` and supporting design tokens
 - Added the `control` part to `<sl-select>` so you can target the main control with CSS [#538](https://github.com/shoelace-style/shoelace/issues/538)
 - Added a border to `<sl-badge>` to improve contrast when drawn on various background colors
+- Added `--track-color-active` and `--track-color-inactive` custom properties to `<sl-range>` [#550](https://github.com/shoelace-style/shoelace/issues/550)
+- Added the undocumented custom properties `--thumb-size`, `--tooltip-offset`, `--track-height` on `<sl-range>`
 - Changed the default `distance` in `<sl-dropdown>` from `2` to `0` [#538](https://github.com/shoelace-style/shoelace/issues/538)
 - Fixed a bug where `<sl-select>` would be larger than the viewport when it had lots of options [#544](https://github.com/shoelace-style/shoelace/issues/544)
 - Updated the default height of `<sl-progress-bar>` from `16px` to `1rem` and added a subtle shadow to indicate depth

src/components/range/range.styles.ts

@@ -9,8 +9,9 @@ export default css`
 
   :host {
     --thumb-size: 20px;
-    --tooltip-offset-y: 10px;
-    --track-color: rgb(var(--sl-color-neutral-200));
+    --tooltip-offset: 10px;
+    --track-color-active: rgb(var(--sl-color-neutral-200));
+    --track-color-inactive: rgb(var(--sl-color-neutral-200));
     --track-height: 6px;
 
     display: block;
@@ -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,10 +75,16 @@ export default css`
     border: 0;
   }
 
+  .range__control::-moz-range-progress {
+    background-color: var(--track-color-active);
+    border-radius: 3px;
+    height: var(--track-height);
+  }
+
   .range__control::-moz-range-track {
     width: 100%;
     height: var(--track-height);
-    background-color: var(--track-color);
+    background-color: var(--track-color-inactive);
     border-radius: 3px;
     border: none;
   }
@@ -161,7 +168,7 @@ export default css`
 
   /* Tooltip on top */
   .range--tooltip-top .range__tooltip {
-    top: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));
+    top: calc(-1 * var(--thumb-size) - var(--tooltip-offset));
   }
 
   .range--tooltip-top .range__tooltip:after {
@@ -173,8 +180,9 @@ export default css`
 
   /* Tooltip on bottom */
   .range--tooltip-bottom .range__tooltip {
-    bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));
+    bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset));
   }
+
   .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

@@ -25,6 +25,12 @@ let id = 0;
  * @csspart base - The component's base wrapper.
  * @csspart input - The native range input.
  * @csspart tooltip - The range tooltip.
+ *
+ * @cssproperty --thumb-size - The size of the thumb.
+ * @cssproperty --tooltip-offset - The vertical distance the tooltip is offset from the track.
+ * @cssproperty --track-color-active - The color of the portion of the track that represents the current value.
+ * @cssproperty --track-color-inactive: The of the portion of the track that represents the remaining value.
+ * @cssproperty --track-height: The height of the track.
  */
 @customElement('sl-range')
 export default class SlRange extends LitElement {
@@ -82,7 +88,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 +98,7 @@ export default class SlRange extends LitElement {
     this.handleSlotChange();
 
     this.updateComplete.then(() => {
-      this.syncTooltip();
+      this.syncRange();
       this.resizeObserver.observe(this.input);
     });
   }
@@ -123,7 +129,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 +168,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) {
+    this.input.style.background = `linear-gradient(to right, var(--track-color-active) 0%, var(--track-color-active) ${
+      percent * 100
+    }%, var(--track-color-inactive) ${percent * 100}%, var(--track-color-inactive) 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(