Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Jose Morales-Mendizabal
19,175 PointsBinding Events on the same element depending on browser
I have a web app that uses an HTML input element of type "range" which makes it look like a slider.
In the app, the input element listens for the "Input" event, which in most browsers (except IE, of course) fires as the user drags the slider. IE does NOT recognize this event on input range sliders. Rather, to emulate the "input" event one must use the "change" event, so that the event handler is executed as the user drags the slider.
But If I use the "change" event, then the app in Chrome, Firefox and Safari won't work as expected because in those browsers, onChange executes the handler when the user lets go of the slider AFTER the drag.
So I need a snippet of code that binds the "change" event on the input if the user is in IE, else bind the "input" event on the input when the user is using the other browsers.
I tried using a conditional comment to load a script but conditional comments are no longer supported in IE 10 +.
I know the title of my question sounds like I'm trying to do something awfully hacky, and I think It's true, but I don't know what else to do.
What should I do?
2 Answers
Marcus Parsons
15,719 PointsYou can check to see if the user is using IE via JavaScript with the userAgent string:
//User is using Internet Explorer
if (window.navigator.userAgent.indexOf("MSIE") >= 0) {
//do code for IE here
}
else {
//otherwise, do the input event handling
}
I hope that helps!
Jose Morales-Mendizabal
19,175 PointsMarcus Parsons yeah, I actually was thinking about doing that, but it is more complicated than I thought because IE does support the "input" method, but it supports it differently from other browsers on input elements of type range. So IEs implementation is not consistent with the rest of browsers, can you believe that? haha Anyway I think the browser sniffing will do the trick this time :)
Jose Morales-Mendizabal
19,175 PointsJose Morales-Mendizabal
19,175 PointsThanks for the handy snippet! I think I will have to go with the browser sniffing, even though it's considered a "bad practice" because its unreliable. However, since my app is for fun, and not commercial, I can afford to do these things :p thanks again!
Marcus Parsons
15,719 PointsMarcus Parsons
15,719 PointsI don't think the bad practice comes from getting what browser the user is coming from but rather what you do with said information. Although, you are right, and the MDN in this article recommends a few different approaches to go off of instead of just sniffing for the user agent.
I think your best bet would be to use "feature detection" to see if the "input" method is available, and if not, fallback to the "change" method.