fix-slider-selection

trimble-oss · Nov 26, 2024 · a345d9b · a345d9b
1 parent df019e8
commit a345d9b
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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,16 +24,31 @@ 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>;
 
   /** 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
@@ -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