CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapinternet-explorer
thisalaka
thisalaka

Reputation: 45

Input Type Range Control Display as a text box in IE

I am using input type range control in my ASP.NET page as below. This shows correctly in Firefox and Google Chrome browsers and works well.

But in IE-11 , this shows as a input type text control. When I look the browser HTML source , I can not see range control and it is automatically converted to input text control as below.

<input type="text" id="myRange" min="0" value="0" />

I am using bootstrap for my project. Could you please provide some help to solve this issue ? 

<div class="row">
    <div class="col-xs-2">
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>

    </div>
    <div class="col-xs-8">


        <input type="range" id="myRange" min="0" value="0" />
    </div>
    <div class="col-xs-2">
        <asp:Label ID="Label2" runat="server" Text=""></asp:Label>

    </div>
</div>

Upvotes: 1

Views: 565

Answers (1)

Momin
Momin

Reputation: 3320

Here is The example for cross browser input range including IE10+

input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #ac51b5;
  border-radius: 25px;
  border: 0px solid #000101;
}

input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #65001c;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3.6px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ac51b5;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #ac51b5;
  border-radius: 25px;
  border: 0px solid #000101;
}

input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #65001c;
  cursor: pointer;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 39px 0;
  color: transparent;
}

input[type=range]::-ms-fill-lower {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}

input[type=range]::-ms-fill-upper {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}

input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #65001c;
  cursor: pointer;
}

input[type=range]:focus::-ms-fill-lower {
  background: #ac51b5;
}

input[type=range]:focus::-ms-fill-upper {
  background: #ac51b5;
}

body {
  padding: 30px;
}
<input type="range">

Upvotes: 1

Related Questions