I have a HTML5 range slider, and a div id="text_output" above it. The div starts off with css display: none;, and I update the css to display: block; when the slider is moved. I also update the text in the div to display the slider value. Simple, right?
Try as I might though, I'm having trouble getting IE to display ranges and updating the div (I'm testing on version 11). I have added <meta http-equiv="x-ua-compatible" content="IE=edge"> because it was rendering as IE7 before that (what's with that?!). However, IE still won't display a range slider, instead opting to show some sort of textarea. Here's a minimal working html document that can be pasted, and gives the desired output in Firefox and Chromium, and reproduces the problem as described when accessed from my webserver by my PC and also a colleague's PC.
<!DOCTYPE html>
<html>
<head>
<script src="http://ift.tt/16ygW8q"></script>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<style>
#text_output {
display: none;
}
</style>
</head>
<body>
<div id="text_output">Blah</div>
<input id="range_test" name="score" type="range" min="1" max="3" value="2">
<script>
$("#range_test").on("input", function(){
//note that plus '+' casts as an int. Otherwise switch block uses === type comparison
//on slider value (which is passed as a string) and fails
switch( +$("#range_test").val() ){
case 1:
$("#text_output").css("display", "block");
$("#text_output").text("text1");
break;
case 2:
$("#text_output").css("display", "block");
$("#text_output").text("text2");
break;
case 3:
$("#text_output").css("display", "block");
$("#text_output").text("text3");
break;
}
});
</script>
</body>
</html>
I have tried pasting the css generated by Daniel Stern's range.css inline in the style block just in case it was a style issue, but that hasn't changed anything.
Anyone got any ideas on why this doesn't work in IE?
Aucun commentaire:
Enregistrer un commentaire