Range slider not movable in Internet Explorer

First of all, I know Ionic isn’t meant to be used in browsers and especially not in Internet Explorer.

When creating an input range field everything works like a charm in Chrome. But when I switch to IE, it’s impossible to move the slider.

I’ve made a codepen to show the issue
–> http://codepen.io/anon/pen/OPdJRq

Can somebody provide me with a workaround/fix because it’s pretty weird that thing don’t work

I have a touchscreen laptop and I’m able to move the slider on IE. Can’t move with the mouse, though.

That’s really weird, but maybe Ionic has supported touch (for IE in WP8) and didn’t implement a clickevent.
It’s just a theory

Same here. It works with the keyboard though. Did you investigate more on this?

EDIT: I have managed to get a workaround: In your ionic.bundle.js in the function tapMouseDown add the following to the if statement:
> && e.target.type !== ‘range’

so that it reads:

if ((!ionic.tap.isTextInput(e.target) || tapLastTouchTarget !== e.target) && !(/^(select|option)$/i).test(e.target.tagName) && e.target.type !== 'range') {

Surely not the proper IONIC way but a start.

In my case the range aslo didn’t look nice in IE11 (the thumb didnt even appear). This is due to missing -ms styles. Add this and you’re good to go:

 input[type=range] {
    padding-top: 0;
    padding-bottom: 0;
}

// Slider line
::-ms-track {
    border: none;
    height: 2px;
}
::-ms-fill-lower {
    background: $range-assertive-track-bg;
}
::-ms-fill-upper {
     background: $range-assertive-track-bg;
}


// Bullet
::-ms-thumb {
    position: relative;
    width: $range-slider-width;
    height: $range-slider-height;
    border-radius: $range-slider-border-radius;
    background-color: $toggle-handle-off-bg-color;
    box-shadow: $range-slider-box-shadow;
    cursor: pointer;
    -ms-appearance: none;
    border: 0;
}

::-ms-thumb:before {
    /* what creates the colorful line on the left side of the slider */
    position: absolute;
    top: ($range-slider-height / 2) - ($range-track-height / 2);
    left: -2001px;
    width: 2000px;
    height: $range-track-height;
    background: $dark;
    content: ' ';
}

::-ms-thumb:after {
    /* create a larger (but hidden) hit area */
    position: absolute;
    top: -15px;
    left: -15px;
    padding: 30px;
    content: ' ';
}
3 Likes

It works! Thank you!

Are we talking about Ionic 2? For Ionic 2 I couldn’t find the ionic.bundle.js.

No, this was a problem with Ionic 1

Is there a way to solve this problem in Ionic 2?

I haven’t encountered this issue with Ionic 2.
You can always create an issue on the Ionic github page

1 Like