From 1f7ce2d86741a1d3441d06671f29714d78d00215 Mon Sep 17 00:00:00 2001
From: Suruthi Shri P <suruthishri_p@trimble.com>
Date: Mon, 25 Nov 2024 20:32:00 +0530
Subject: [PATCH 1/4] fix modus slider selection

---
 .../components/modus-slider/modus-slider.scss |  6 +++++-
 .../modus-slider/modus-slider.spec.ts         |  2 +-
 .../components/modus-slider/modus-slider.tsx  | 19 +++++++++++++++++--
 .../src/components/modus-slider/readme.md     |  2 +-
 4 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/stencil-workspace/src/components/modus-slider/modus-slider.scss b/stencil-workspace/src/components/modus-slider/modus-slider.scss
index 8526fb3a5..f2de1e915 100644
--- a/stencil-workspace/src/components/modus-slider/modus-slider.scss
+++ b/stencil-workspace/src/components/modus-slider/modus-slider.scss
@@ -9,7 +9,11 @@
 
   .slider {
     appearance: none;
-    background: $modus-slider-range-bg;
+    background: linear-gradient(
+      to right,
+      $modus-slider-range-bg var(--value-percent, 0%),
+      $modus-slider-range-disabled-bg var(--value-percent, 0%)
+    );
     border-radius: $rem-8px;
     height: $rem-8px;
   }
diff --git a/stencil-workspace/src/components/modus-slider/modus-slider.spec.ts b/stencil-workspace/src/components/modus-slider/modus-slider.spec.ts
index c3307a3c5..0c2bf451d 100644
--- a/stencil-workspace/src/components/modus-slider/modus-slider.spec.ts
+++ b/stencil-workspace/src/components/modus-slider/modus-slider.spec.ts
@@ -11,7 +11,7 @@ describe('modus-slider', () => {
       <modus-slider>
         <mock:shadow-root>
           <div class="modus-slider">
-            <input class="slider" id="mwc_id_0_slider" max="100" min="0" type="range">
+            <input class="slider" id="mwc_id_0_slider" max="100" min="0" type="range" value="50">
           </div>
         </mock:shadow-root>
       </modus-slider>
diff --git a/stencil-workspace/src/components/modus-slider/modus-slider.tsx b/stencil-workspace/src/components/modus-slider/modus-slider.tsx
index 08a3760f1..c016df479 100644
--- a/stencil-workspace/src/components/modus-slider/modus-slider.tsx
+++ b/stencil-workspace/src/components/modus-slider/modus-slider.tsx
@@ -1,5 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';
+import { Component, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';
 import { generateElementId } from '../../utils/utils';
 
 @Component({
@@ -24,7 +24,7 @@ export class ModusSlider {
   @Prop() minValue = 0;
 
   /** (optional) The slider's value. */
-  @Prop({ mutable: true }) value: string;
+  @Prop({ mutable: true }) value = '50';
 
   /** An event that fires on slider value change. */
   @Event() valueChange: EventEmitter<string>;
@@ -32,8 +32,23 @@ export class ModusSlider {
   /** An event that fires on slider value input. */
   @Event() valueInput: EventEmitter<string>;
 
+  @State() valuePercent: number;
+
   private sliderId = generateElementId() + '_slider';
 
+  constructor() {
+    this.updateValuePercent();
+  }
+
+  componentWillLoad() {
+    this.updateValuePercent();
+  }
+
+  @Watch('value')
+  updateValuePercent() {
+    this.valuePercent = ((Number(this.value) - this.minValue) / (this.maxValue - this.minValue)) * 100;
+  }
+
   handleOnChange(event: Event): void {
     const value = (event.currentTarget as HTMLInputElement).value;
     this.value = value;
diff --git a/stencil-workspace/src/components/modus-slider/readme.md b/stencil-workspace/src/components/modus-slider/readme.md
index 1f14a5d62..cbcf72260 100644
--- a/stencil-workspace/src/components/modus-slider/readme.md
+++ b/stencil-workspace/src/components/modus-slider/readme.md
@@ -14,7 +14,7 @@
 | `label`     | `label`      | (optional) The slider's label.               | `string`  | `undefined` |
 | `maxValue`  | `max-value`  | (optional) The slider's maximum value.       | `number`  | `100`       |
 | `minValue`  | `min-value`  | (optional) The slider's minimum value.       | `number`  | `0`         |
-| `value`     | `value`      | (optional) The slider's value.               | `string`  | `undefined` |
+| `value`     | `value`      | (optional) The slider's value.               | `string`  | `'50'`      |
 
 
 ## Events

From 5f3dfaff22696b016df6bf72efd99448d1716dd4 Mon Sep 17 00:00:00 2001
From: Suruthi Shri P <suruthishri_p@trimble.com>
Date: Mon, 25 Nov 2024 20:50:34 +0530
Subject: [PATCH 2/4] fix styling issue

---
 stencil-workspace/src/components/modus-slider/modus-slider.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/stencil-workspace/src/components/modus-slider/modus-slider.tsx b/stencil-workspace/src/components/modus-slider/modus-slider.tsx
index c016df479..3a2cf8c55 100644
--- a/stencil-workspace/src/components/modus-slider/modus-slider.tsx
+++ b/stencil-workspace/src/components/modus-slider/modus-slider.tsx
@@ -65,7 +65,8 @@ export class ModusSlider {
     const className = `modus-slider ${this.disabled ? 'disabled' : ''}`;
 
     return (
-      <div aria-disabled={this.disabled ? 'true' : undefined} aria-label={this.ariaLabel || undefined} class={className}>
+      <div aria-disabled={this.disabled ? 'true' : undefined} aria-label={this.ariaLabel || undefined} class={className}
+      style={{ '--value-percent': `${this.valuePercent}%`, marginBottom : '50px', marginTop:'50px'}}>
         {this.label && <label htmlFor={this.sliderId}>{this.label}</label>}
         <input
           class="slider"

From d23f7bae0aefc01ddcd789786aa859a68c2684f1 Mon Sep 17 00:00:00 2001
From: Suruthi Shri P <suruthishri_p@trimble.com>
Date: Mon, 25 Nov 2024 21:49:22 +0530
Subject: [PATCH 3/4] fix-slider-selection

---
 .../components/modus-slider/modus-slider.scss |  6 ++++-
 .../modus-slider/modus-slider.spec.ts         |  4 ++--
 .../components/modus-slider/modus-slider.tsx  | 22 ++++++++++++++++---
 .../src/components/modus-slider/readme.md     |  2 +-
 4 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/stencil-workspace/src/components/modus-slider/modus-slider.scss b/stencil-workspace/src/components/modus-slider/modus-slider.scss
index 8526fb3a5..f2de1e915 100644
--- a/stencil-workspace/src/components/modus-slider/modus-slider.scss
+++ b/stencil-workspace/src/components/modus-slider/modus-slider.scss
@@ -9,7 +9,11 @@
 
   .slider {
     appearance: none;
-    background: $modus-slider-range-bg;
+    background: linear-gradient(
+      to right,
+      $modus-slider-range-bg var(--value-percent, 0%),
+      $modus-slider-range-disabled-bg var(--value-percent, 0%)
+    );
     border-radius: $rem-8px;
     height: $rem-8px;
   }
diff --git a/stencil-workspace/src/components/modus-slider/modus-slider.spec.ts b/stencil-workspace/src/components/modus-slider/modus-slider.spec.ts
index c3307a3c5..b8ade3f11 100644
--- a/stencil-workspace/src/components/modus-slider/modus-slider.spec.ts
+++ b/stencil-workspace/src/components/modus-slider/modus-slider.spec.ts
@@ -10,8 +10,8 @@ describe('modus-slider', () => {
     expect(root).toEqualHtml(`
       <modus-slider>
         <mock:shadow-root>
-          <div class="modus-slider">
-            <input class="slider" id="mwc_id_0_slider" max="100" min="0" type="range">
+          <div class="modus-slider" style="--value-percent: 50%">
+            <input class="slider" id="mwc_id_0_slider" max="100" min="0" type="range" value="50">
           </div>
         </mock:shadow-root>
       </modus-slider>
diff --git a/stencil-workspace/src/components/modus-slider/modus-slider.tsx b/stencil-workspace/src/components/modus-slider/modus-slider.tsx
index 08a3760f1..ea857429f 100644
--- a/stencil-workspace/src/components/modus-slider/modus-slider.tsx
+++ b/stencil-workspace/src/components/modus-slider/modus-slider.tsx
@@ -1,5 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';
+import { Component, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';
 import { generateElementId } from '../../utils/utils';
 
 @Component({
@@ -24,7 +24,7 @@ export class ModusSlider {
   @Prop() minValue = 0;
 
   /** (optional) The slider's value. */
-  @Prop({ mutable: true }) value: string;
+  @Prop({ mutable: true }) value = '50';
 
   /** An event that fires on slider value change. */
   @Event() valueChange: EventEmitter<string>;
@@ -32,8 +32,23 @@ export class ModusSlider {
   /** An event that fires on slider value input. */
   @Event() valueInput: EventEmitter<string>;
 
+  @State() valuePercent: number;
+
   private sliderId = generateElementId() + '_slider';
 
+  constructor() {
+    this.updateValuePercent();
+  }
+
+  componentWillLoad() {
+    this.updateValuePercent();
+  }
+
+  @Watch('value')
+  updateValuePercent() {
+    this.valuePercent = ((Number(this.value) - this.minValue) / (this.maxValue - this.minValue)) * 100;
+  }
+
   handleOnChange(event: Event): void {
     const value = (event.currentTarget as HTMLInputElement).value;
     this.value = value;
@@ -50,7 +65,8 @@ export class ModusSlider {
     const className = `modus-slider ${this.disabled ? 'disabled' : ''}`;
 
     return (
-      <div aria-disabled={this.disabled ? 'true' : undefined} aria-label={this.ariaLabel || undefined} class={className}>
+      <div aria-disabled={this.disabled ? 'true' : undefined} aria-label={this.ariaLabel || undefined} class={className}
+      style={{ '--value-percent': `${this.valuePercent}%`}}>
         {this.label && <label htmlFor={this.sliderId}>{this.label}</label>}
         <input
           class="slider"
diff --git a/stencil-workspace/src/components/modus-slider/readme.md b/stencil-workspace/src/components/modus-slider/readme.md
index 1f14a5d62..cbcf72260 100644
--- a/stencil-workspace/src/components/modus-slider/readme.md
+++ b/stencil-workspace/src/components/modus-slider/readme.md
@@ -14,7 +14,7 @@
 | `label`     | `label`      | (optional) The slider's label.               | `string`  | `undefined` |
 | `maxValue`  | `max-value`  | (optional) The slider's maximum value.       | `number`  | `100`       |
 | `minValue`  | `min-value`  | (optional) The slider's minimum value.       | `number`  | `0`         |
-| `value`     | `value`      | (optional) The slider's value.               | `string`  | `undefined` |
+| `value`     | `value`      | (optional) The slider's value.               | `string`  | `'50'`      |
 
 
 ## Events

From a345d9bbca03fe207d43bf861ec4246b27ab7fa3 Mon Sep 17 00:00:00 2001
From: Suruthi Shri P <suruthishri_p@trimble.com>
Date: Mon, 25 Nov 2024 21:49:22 +0530
Subject: [PATCH 4/4] fix-slider-selection

---
 .../components/modus-slider/modus-slider.scss |  6 ++++-
 .../modus-slider/modus-slider.spec.ts         |  4 ++--
 .../components/modus-slider/modus-slider.tsx  | 22 ++++++++++++++++---
 .../src/components/modus-slider/readme.md     |  2 +-
 4 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/stencil-workspace/src/components/modus-slider/modus-slider.scss b/stencil-workspace/src/components/modus-slider/modus-slider.scss
index 8526fb3a5..f2de1e915 100644
--- a/stencil-workspace/src/components/modus-slider/modus-slider.scss
+++ b/stencil-workspace/src/components/modus-slider/modus-slider.scss
@@ -9,7 +9,11 @@
 
   .slider {
     appearance: none;
-    background: $modus-slider-range-bg;
+    background: linear-gradient(
+      to right,
+      $modus-slider-range-bg var(--value-percent, 0%),
+      $modus-slider-range-disabled-bg var(--value-percent, 0%)
+    );
     border-radius: $rem-8px;
     height: $rem-8px;
   }
diff --git a/stencil-workspace/src/components/modus-slider/modus-slider.spec.ts b/stencil-workspace/src/components/modus-slider/modus-slider.spec.ts
index c3307a3c5..b8ade3f11 100644
--- a/stencil-workspace/src/components/modus-slider/modus-slider.spec.ts
+++ b/stencil-workspace/src/components/modus-slider/modus-slider.spec.ts
@@ -10,8 +10,8 @@ describe('modus-slider', () => {
     expect(root).toEqualHtml(`
       <modus-slider>
         <mock:shadow-root>
-          <div class="modus-slider">
-            <input class="slider" id="mwc_id_0_slider" max="100" min="0" type="range">
+          <div class="modus-slider" style="--value-percent: 50%">
+            <input class="slider" id="mwc_id_0_slider" max="100" min="0" type="range" value="50">
           </div>
         </mock:shadow-root>
       </modus-slider>
diff --git a/stencil-workspace/src/components/modus-slider/modus-slider.tsx b/stencil-workspace/src/components/modus-slider/modus-slider.tsx
index 08a3760f1..ea857429f 100644
--- a/stencil-workspace/src/components/modus-slider/modus-slider.tsx
+++ b/stencil-workspace/src/components/modus-slider/modus-slider.tsx
@@ -1,5 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';
+import { Component, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';
 import { generateElementId } from '../../utils/utils';
 
 @Component({
@@ -24,7 +24,7 @@ export class ModusSlider {
   @Prop() minValue = 0;
 
   /** (optional) The slider's value. */
-  @Prop({ mutable: true }) value: string;
+  @Prop({ mutable: true }) value = '50';
 
   /** An event that fires on slider value change. */
   @Event() valueChange: EventEmitter<string>;
@@ -32,8 +32,23 @@ export class ModusSlider {
   /** An event that fires on slider value input. */
   @Event() valueInput: EventEmitter<string>;
 
+  @State() valuePercent: number;
+
   private sliderId = generateElementId() + '_slider';
 
+  constructor() {
+    this.updateValuePercent();
+  }
+
+  componentWillLoad() {
+    this.updateValuePercent();
+  }
+
+  @Watch('value')
+  updateValuePercent() {
+    this.valuePercent = ((Number(this.value) - this.minValue) / (this.maxValue - this.minValue)) * 100;
+  }
+
   handleOnChange(event: Event): void {
     const value = (event.currentTarget as HTMLInputElement).value;
     this.value = value;
@@ -50,7 +65,8 @@ export class ModusSlider {
     const className = `modus-slider ${this.disabled ? 'disabled' : ''}`;
 
     return (
-      <div aria-disabled={this.disabled ? 'true' : undefined} aria-label={this.ariaLabel || undefined} class={className}>
+      <div aria-disabled={this.disabled ? 'true' : undefined} aria-label={this.ariaLabel || undefined} class={className}
+      style={{ '--value-percent': `${this.valuePercent}%`}}>
         {this.label && <label htmlFor={this.sliderId}>{this.label}</label>}
         <input
           class="slider"
diff --git a/stencil-workspace/src/components/modus-slider/readme.md b/stencil-workspace/src/components/modus-slider/readme.md
index 1f14a5d62..cbcf72260 100644
--- a/stencil-workspace/src/components/modus-slider/readme.md
+++ b/stencil-workspace/src/components/modus-slider/readme.md
@@ -14,7 +14,7 @@
 | `label`     | `label`      | (optional) The slider's label.               | `string`  | `undefined` |
 | `maxValue`  | `max-value`  | (optional) The slider's maximum value.       | `number`  | `100`       |
 | `minValue`  | `min-value`  | (optional) The slider's minimum value.       | `number`  | `0`         |
-| `value`     | `value`      | (optional) The slider's value.               | `string`  | `undefined` |
+| `value`     | `value`      | (optional) The slider's value.               | `string`  | `'50'`      |
 
 
 ## Events