Range slider not movable in Internet Explorer

ionic-v1
4

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