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

Ionic Framework ionic-v3
1

Please note first that this problem only exists in Firefox, no problem in Chromium (latest Ubuntu versions at the time of writing). I’m seeing the problem when running via ionic serve.

In brief: an input range slider <input type="range"> does not drag in Firefox. It just stays in place. You can click new locations along the slider and the slider handle will move to the new location you clicked on, but it won’t drag.

Since codepen does not yet support Ionic 2.x, here’s a description of how to reproduce the problem:

  1. Start an Ionic2 app via ionic start range-test tutorial --v2 --ts.
  2. Change range-test/app/pages/hello-ionic by adding <input type="range"> right after the <ion-content ... line.
  3. Run ionic serve and go to localhost:8100 in Firefox.
2

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!