From 8479abc828571e06379b5f389058f60d5ba8443b Mon Sep 17 00:00:00 2001
From: Nantawat Poothong <102957966+Nantawat-Poothong@users.noreply.github.com>
Date: Fri, 15 Sep 2023 15:13:55 +0700
Subject: [PATCH] fix(slider): incorrect updating `to` value (#938)

* docs(slider): update docs api for input event
---------
Co-authored-by: Theeraphat-Sorasetsakul <86758473+Theeraphat-Sorasetsakul@users.noreply.github.com>
---
 .../slider/__test__/slider.number-field.test.js | 17 +++++++++++++++++
 packages/elements/src/slider/index.ts           |  4 ++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/elements/src/slider/__test__/slider.number-field.test.js b/packages/elements/src/slider/__test__/slider.number-field.test.js
index b8f48210c6..48d1d94143 100644
--- a/packages/elements/src/slider/__test__/slider.number-field.test.js
+++ b/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');
+  });
 });
diff --git a/packages/elements/src/slider/index.ts b/packages/elements/src/slider/index.ts
index c7d2405798..486c617b49 100644
--- a/packages/elements/src/slider/index.ts
+++ b/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.
  */
@@ -1155,7 +1155,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;
       }
     }