Menu
Has anyone else come across this issue and do you have a solution.
Using this html in ie and edge the range doesn't show.
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link type="text/css" href="/static/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4">
<form method="post" action="/Tactics">
<table align="center" width="100%">
<tr><td>stuff</td><td><input type="range" min="10" max="50"></td></tr>
<tr><td>stuff</td><td><input type="range" min="10" max="50"></td></tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>
If you take out the first stuff for each row in the table the input range works again. It's fine in crome, firefox and opera.
Has anyone seen this and do you know how to fix?
399
Add MS fillers:
input[type=range]::-ms-track {
/*example */
width: 250px;height: 10px;
background: transparent;
border-color: transparent;
border-width: 6px 0;
color: transparent;
}
input[type=range]::-ms-fill-upper {
background: gray;
border-radius: 6px;
}
input[type=range]::-ms-fill-lower {
background: gray;
border-radius: 6px;
}
This is just example but you need to focus on these:
input[type=range]::-ms-track
input[type=range]::-ms-thumb
input[type=range]::-ms-fill-upper
input[type=range]::-ms-fill-lower
Check the FIDDLE
141
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
