feat(RangeSlider): add input event, improve change event to fire on interaction end

Author: mrholek

docs/content/forms/range-slider.md

@@ -230,7 +230,8 @@ const rangeSlider = new RangeSlider(rangeSliderElement, {
 {{< bs-table >}}
 | Method | Description |
 | --- | --- |
-| `change.coreui.range-slider` | Fired when the slider value changes. |
+| `change.coreui.range-slider` | Fired when the slider value changes and the user finishes interacting (mouse up). |
+| `input.coreui.range-slider` | Fired continuously while the slider value is being changed during user interaction. |
 {{< /bs-table >}}
 
 ```js

js/src/dom/event-handler.js

@@ -56,6 +56,7 @@ const nativeEvents = new Set([
   'focus',
   'blur',
   'change',
+  'input',
   'reset',
   'select',
   'submit',

js/src/range-slider.js

@@ -21,7 +21,7 @@ const EVENT_KEY = `.${DATA_KEY}`
 const DATA_API_KEY = '.data-api'
 
 const EVENT_CHANGE = `change${EVENT_KEY}`
-const EVENT_INPUT = 'input'
+const EVENT_INPUT = `input${EVENT_KEY}`
 const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
 const EVENT_MOUSEDOWN = `mousedown${EVENT_KEY}`
 const EVENT_MOUSEMOVE = `mousemove${EVENT_KEY}`
@@ -133,6 +133,11 @@ class RangeSlider extends BaseComponent {
       const children = SelectorEngine.children(target.parentElement, SELECTOR_RANGE_SLIDER_INPUT)
       const index = Array.from(children).indexOf(target)
       this._updateValue(target.value, index)
+      EventHandler.trigger(this._element, EVENT_INPUT, { value: this._currentValue })
+    })
+
+    EventHandler.on(this._element, EVENT_CHANGE, SELECTOR_RANGE_SLIDER_INPUT, () => {
+      EventHandler.trigger(this._element, EVENT_CHANGE, { value: this._currentValue })
     })
 
     EventHandler.on(this._element, EVENT_MOUSEDOWN, SELECTOR_RANGE_SLIDER_LABEL, event => {
@@ -516,7 +521,6 @@ class RangeSlider extends BaseComponent {
     this._updateInput(index, _value)
     this._updateGradient()
     this._updateTooltip(index, _value)
-    EventHandler.trigger(this._element, EVENT_CHANGE, { value: this._currentValue })
   }
 
   _updateInput(index, value) {

js/tests/unit/range-slider.spec.js

@@ -175,7 +175,7 @@ describe('RangeSlider', () => {
         expect(labels.length).toBe(3)
 
         // Spy on the updateNearestValue method indirectly via event
-        element.addEventListener('change.coreui.range-slider', event => {
+        element.addEventListener('input.coreui.range-slider', event => {
           const newValue = event.value
           expect(newValue).toEqual([20, 50, 90])
           resolve()
@@ -244,7 +244,7 @@ describe('RangeSlider', () => {
         expect(tooltip.textContent).toBe('$25')
 
         // Update the value
-        element.addEventListener('change.coreui.range-slider', event => {
+        element.addEventListener('input.coreui.range-slider', event => {
           const newValue = event.value
           const updatedTooltip = element.querySelector('.range-slider-tooltip-inner')
           expect(updatedTooltip.textContent).toBe('$35')