update docs, expose custom properties, rework to not use getComputedStyle

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

@@ -8,10 +8,10 @@ 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));
+    --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;
@@ -76,7 +76,7 @@ export default css`
   }
 
   .range__control::-moz-range-progress {
-    background-color: var(--indicator-color);
+    background-color: var(--track-color-active);
     border-radius: 3px;
     height: var(--track-height);
   }
@@ -84,7 +84,7 @@ export default css`
   .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;
   }
@@ -168,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 {
@@ -180,7 +180,7 @@ 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 {

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 {
@@ -162,20 +168,20 @@ export default class SlRange extends LitElement {
     this.hasTooltip = false;
   }
 
-  syncRange(){
+  syncRange() {
     const percent = Math.max(0, (this.value - this.min) / (this.max - this.min));
 
     this.syncProgress(percent);
+
     if (this.tooltip !== 'none') {
       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%)`;
+    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) {
@@ -183,7 +189,7 @@ export default class SlRange extends LitElement {
     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`;
   }