fix(slider): incorrect updating to value (#947)

Co-authored-by: Theeraphat-Sorasetsakul <[email protected]>

packages/elements/src/slider/__test__/slider.number-field.test.js

@@ -107,4 +107,21 @@ describe('slider/NumberField', function () {
     expect(inputFrom.readonly).to.equal(false);
     expect(inputTo.readonly).to.equal(false);
   });
+
+  it('Should increse "to" value via increase number-field value in range mode', async function () {
+    el.range = true;
+    el.showInputField = '';
+    el.to = '10';
+    await elementUpdated(el);
+
+    const inputTo = getNumberField(el, 'to');
+    setTimeout(() => inputTo.dispatchEvent(new Event('focus')));
+    await oneEvent(inputTo, 'focus');
+    inputTo.value = '20';
+    setTimeout(() => inputTo.dispatchEvent(new Event('blur')));
+    await oneEvent(inputTo, 'blur');
+
+    await elementUpdated(el);
+    expect(el.to).to.equal('20');
+  });
 });

packages/elements/src/slider/index.ts

@@ -41,7 +41,7 @@ import type { NumberField } from '../number-field';
  * @fires value-changed - Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically.
  * @fires from-changed - Fired when the user changes from's value. The event is not triggered if `from` property is changed programmatically.
  * @fires to-changed - Fired when the user changes to's value. The event is not triggered if `to` property is changed programmatically.
- * @fires input - Fired when the user inputs a value by interacting with the slider or updating its input field.
+ * @fires input - Fired with the value of the input in `e.detail.value` like another custom events when the user inputs a value by interacting with the slider or updating its input field.
  * @fires from-input - Fired when the user inputs from's value by interacting with the slider or updating its input field.
  * @fires to-input - Fired when the user inputs to's value by interacting with the slider or updating its input field.
  */
@@ -1158,7 +1158,7 @@ export class Slider extends ControlElement {
     if (this.range) {
       if (valueFor === SliderDataName.to && value < this.fromNumber + this.minRangeNumber) {
         return false;
-      } else if (value > this.toNumber - this.minRangeNumber) {
+      } else if (valueFor === SliderDataName.from && value > this.toNumber - this.minRangeNumber) {
         return false;
       }
     }