当 slider 值与初始值相同时，如何触发 html 输入类型 = 范围的更改事件

Question

I have an html input type=range slider like this:

<input type="range" min="0" max="5" step="0.1" value="0" class="slider" id="aroma-slider" (input)="trackInput($event, 'aroma')" (change)="slideDone($event, 'aroma')">

My events are firing great EXCEPT if the user drags the slider all the way down to 0, then the change event is not fired, even though the user has interacted with the slider and moved it. I assume it is because the slider value is the same as the original slider value in the value attribute. How do I trigger a change event when the starting value and ending value of the slider happen to be the same? In my use case the user selecting a 0 value is valid.

Answer 1

I figured out a work-around by listening to all mouseup and touchend events, then filtering to only act on the ones that happen on the slider:

<input type="range" min="0" max="5" step="0.1" value="0" class="slider" id="aroma-slider" (input)="trackInput($event, 'aroma')" (change)="slideDone($event, 'aroma')">

$(document).on('mouseup touchend', (e:Event)=> {
    if ( $(e.target).attr('class') == 'slider' &&  $(e.target).val() == 0 ) {
        this.slideDone(e, 'aroma');
    }
});