fixed #283 slider, range-slider 的 value 不在 min、max、step 的限制范围内时，支持自动修正值

zdhxiong · Nov 26, 2023 · 5f996c2 · 5f996c2
1 parent 2747185
commit 5f996c2
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 20 deletions.
diff --git a/demos/components/slider.html b/demos/components/slider.html
@@ -40,7 +40,7 @@
       this.value = [20, 60];
     });
     $('.range-slider-default-value').each(function () {
-      this.value = [2, 6];
+      this.value = [15, 54];
     });
 
     // 验证
@@ -131,15 +131,15 @@ <h2>tickmarks</h2>
 
     <section>
       <h2>default value</h2>
-      <mdui-slider min="0" max="10" value="2" id="default-value"></mdui-slider>
-      <mdui-slider min="0" max="10" tickmarks value="2"></mdui-slider>
-      <mdui-range-slider min="0" max="10" class="range-slider-default-value" id="default-value-range"></mdui-range-slider>
-      <mdui-range-slider min="0" max="10" tickmarks class="range-slider-default-value"></mdui-range-slider>
+      <mdui-slider min="0" max="100" step="10" value="15" id="default-value"></mdui-slider>
+      <mdui-slider min="0" max="100" step="10" tickmarks value="15"></mdui-slider>
+      <mdui-range-slider min="0" max="100" step="10" class="range-slider-default-value" id="default-value-range"></mdui-range-slider>
+      <mdui-range-slider min="0" max="100" step="10" tickmarks class="range-slider-default-value"></mdui-range-slider>
       <div class="mdui-theme-dark">
-        <mdui-slider min="0" max="10" value="2"></mdui-slider>
-        <mdui-slider min="0" max="10" tickmarks value="2"></mdui-slider>
-        <mdui-range-slider min="0" max="10" class="range-slider-default-value"></mdui-range-slider>
-        <mdui-range-slider min="0" max="10" tickmarks class="range-slider-default-value"></mdui-range-slider>
+        <mdui-slider min="0" max="100" step="10" value="15"></mdui-slider>
+        <mdui-slider min="0" max="100" step="10" tickmarks value="15"></mdui-slider>
+        <mdui-range-slider min="0" max="100" step="10" class="range-slider-default-value"></mdui-range-slider>
+        <mdui-range-slider min="0" max="100" step="10" tickmarks class="range-slider-default-value"></mdui-range-slider>
       </div>
     </section>
 

diff --git a/packages/mdui/src/components/range-slider/index.ts b/packages/mdui/src/components/range-slider/index.ts
@@ -72,7 +72,7 @@ export class RangeSlider extends SliderBase implements FormControl {
   }
   public set value(_value: number[]) {
     const oldValue = [...this._value];
-    this._value = _value;
+    this._value = [this.fixValue(_value[0]), this.fixValue(_value[1])];
     this.requestUpdate('value', oldValue);
 
     this.updateComplete.then(() => {
@@ -100,6 +100,9 @@ export class RangeSlider extends SliderBase implements FormControl {
       this.value = [this.min, this.max];
     }
 
+    this.value[0] = this.fixValue(this.value[0]);
+    this.value[1] = this.fixValue(this.value[1]);
+
     if (!this.defaultValue.length) {
       this.defaultValue = [...this.value];
     }

diff --git a/packages/mdui/src/components/slider/index.ts b/packages/mdui/src/components/slider/index.ts
@@ -60,31 +60,26 @@ export class Slider extends SliderBase implements FormControl {
   }
 
   @watch('value', true)
-  private onValueChange() {
+  private async onValueChange() {
+    this.value = this.fixValue(this.value);
+
     // reset 引起的值变更，不执行验证；直接修改值引起的变更，需要进行验证
     const form = this.formController.getForm();
     if (form && formResets.get(form)?.has(this)) {
       this.invalid = false;
       formResets.get(form)!.delete(this);
     } else {
+      await this.updateComplete;
       this.invalid = !this.inputRef.value!.checkValidity();
     }
 
-    this.inputRef.value!.value = this.value.toString();
-    this.value = parseFloat(this.inputRef.value!.value);
-
     this.updateStyle();
   }
 
   public override connectedCallback(): void {
     super.connectedCallback();
 
-    if (this.value < this.min) {
-      this.value = this.min;
-    }
-    if (this.value > this.max) {
-      this.value = this.max;
-    }
+    this.value = this.fixValue(this.value);
   }
 
   protected override firstUpdated(changedProperties: PropertyValues): void {

diff --git a/packages/mdui/src/components/slider/slider-base.ts b/packages/mdui/src/components/slider/slider-base.ts
@@ -186,6 +186,27 @@ export class SliderBase extends RippleMixin(FocusableMixin(LitElement)) {
     this.invalid = !this.inputRef.value!.checkValidity();
   }
 
+  /**
+   * value 不在 min、max 或 step 的限制范围内时，修正 value 的值
+   */
+  protected fixValue(value: number): number {
+    const { min, max, step } = this;
+
+    // 确保 value 在 min 和 max 范围内
+    value = Math.min(Math.max(value, min), max);
+
+    // 计算最接近 value 的 step 值
+    const steps = Math.round((value - min) / step);
+    let fixedValue = min + steps * step;
+
+    // 如果修正后的值超出最大值，则减去一个 step
+    if (fixedValue > max) {
+      fixedValue -= step;
+    }
+
+    return fixedValue;
+  }
+
   /**
    * 获取候选值组成的数组
    */