MattE
March 23, 2015, 2:34pm
1
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.
MattE
March 23, 2015, 2:51pm
3
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
liuxh
February 22, 2017, 8:51am
6
Are we talking about Ionic 2? For Ionic 2 I couldn’t find the ionic.bundle.js
.
MattE
February 22, 2017, 10:31am
7
No, this was a problem with Ionic 1
liuxh
February 22, 2017, 10:45am
8
Is there a way to solve this problem in Ionic 2?
MattE
February 22, 2017, 11:00am
9
I haven’t encountered this issue with Ionic 2.
You can always create an issue on the Ionic github page
1 Like