From 01c7ca27fe5635f4e6cc2c622e79aedeb3276ad8 Mon Sep 17 00:00:00 2001
From: Alessandro <misterroot@gmail.com>
Date: Wed, 6 Jul 2022 09:27:37 +0000
Subject: [PATCH] feat(range): add active track offset

---
 docs/components/range.md             | 32 ++++++++++++++++++++++++++++
 src/components/range/range.styles.ts | 12 +++++++++++
 src/components/range/range.ts        |  8 ++-----
 3 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/docs/components/range.md b/docs/components/range.md
index dfbe056d..1c7a2b1d 100644
--- a/docs/components/range.md
+++ b/docs/components/range.md
@@ -133,6 +133,38 @@ const App = () => (
 );
 ```
 
+### Custom Track Offset
+
+You can customize the initial offset of the active track using the `--track-active-offset` custom property.
+
+```html preview
+<sl-range
+  min="-100"
+  max="100"
+  style="
+  --track-color-active: var(--sl-color-primary-600);
+  --track-color-inactive: var(--sl-color-primary-100);
+  --track-active-offset: 50%;
+"
+></sl-range>
+```
+
+```jsx react
+import { SlRange } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRange
+    min={-100}
+    max={100}
+    style={{
+      '--track-color-active': 'var(--sl-color-primary-600)',
+      '--track-color-inactive': 'var(--sl-color-primary-200)',
+      '--track-active-offset': '50%'
+    }}
+  />
+);
+```
+
 ### 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.
diff --git a/src/components/range/range.styles.ts b/src/components/range/range.styles.ts
index d8e4915d..aa9f6d2a 100644
--- a/src/components/range/range.styles.ts
+++ b/src/components/range/range.styles.ts
@@ -12,6 +12,7 @@ export default css`
     --tooltip-offset: 10px;
     --track-color-active: var(--sl-color-neutral-200);
     --track-color-inactive: var(--sl-color-neutral-200);
+    --track-active-offset: 0%;
     --track-height: 6px;
 
     display: block;
@@ -22,6 +23,7 @@ export default css`
   }
 
   .range__control {
+    --percent: 0%;
     -webkit-appearance: none;
     border-radius: 3px;
     width: 100%;
@@ -29,6 +31,16 @@ export default css`
     background: transparent;
     line-height: var(--sl-input-height-medium);
     vertical-align: middle;
+
+    background-image: linear-gradient(
+      to right,
+      var(--track-color-inactive) 0%,
+      var(--track-color-inactive) min(var(--percent), var(--track-active-offset)),
+      var(--track-color-active) min(var(--percent), var(--track-active-offset)),
+      var(--track-color-active) max(var(--percent), var(--track-active-offset)),
+      var(--track-color-inactive) max(var(--percent), var(--track-active-offset)),
+      var(--track-color-inactive) 100%
+    );
   }
 
   /* Webkit */
diff --git a/src/components/range/range.ts b/src/components/range/range.ts
index 56310975..94a271f2 100644
--- a/src/components/range/range.ts
+++ b/src/components/range/range.ts
@@ -35,6 +35,7 @@ import styles from './range.styles';
  * @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.
+ * @cssproperty --track-active-offset - The point of origin of the active track.
  */
 @customElement('sl-range')
 export default class SlRange extends LitElement {
@@ -96,9 +97,6 @@ export default class SlRange extends LitElement {
     super.connectedCallback();
     this.resizeObserver = new ResizeObserver(() => this.syncRange());
 
-    if (!this.value) {
-      this.value = this.min;
-    }
     if (this.value < this.min) {
       this.value = this.min;
     }
@@ -190,9 +188,7 @@ export default class SlRange extends LitElement {
   }
 
   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%)`;
+    this.input.style.setProperty('--percent', `${percent * 100}%`);
   }
 
   syncTooltip(percent: number) {