CODEWITHSUNDEEP
htmlinternet-explorer-11internet-explorer-10microsoft-edge
HenryM
HenryM

Reputation: 5793

input range not working in ie or edge

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?

Upvotes: 4

Views: 13053

Answers (1)

Riskbreaker
Riskbreaker

Reputation: 4791

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

Upvotes: 8

Related Questions