Range input (<input type="range"> slider) not dragging in Firefox

OK, there’s a workaround/fix to this. It’s based on the Ionic version 1.x solution to a similar problem as described in this forum discussion.

That discussion points you to this this issue and the solution is based on the solution/workaround provided by user ArTiSTiX (thanks!).

In brief: create a directive (@Component) whose template is <input type="range" ... > and set up the touchstart and mousedown events of the <input ... > element to run a function that calls $event.stopPropagation(). Here’s a code snippet:

@Component({
    selector: 'slider',
    template: '<input type="range" (touchstart)="onDrag($event)" (mousedown)="onDrag($event)">'
})
export class Slider {
    onDrag($event) {
        $event.stopPropagation();
    }
}

If you think there’s a better solution, please let me know, thanks!