CODEWITHSUNDEEP
javascriptcsshtml
Domino
Domino

Reputation: 6768

Hide range input if not compatible

I use a range input to adjust zoom in my web application. I use some JavaScript to synchronize it with a text input next to it so users can see the value as they move the slider, and they can also type the value they want.

<input type="range" name="amountRange" min="0" max="20" value="0" onchange="this.nextElementSibling.value=this.value" />
<input type="number" name="amountInput" min="0" max="20" value="0" onchange="this.previousElementSibling.value=this.value" />

The problem is that some browsers (mainly IE9 which I want to support) are not compatible with range inputs, so the range will be displayed as a textbox. That means they will see two text-boxes like that:

<input type="text" name="amountRange" min="0" max="20" value="0" onchange="this.nextElementSibling.value=this.value" />
<input type="text" name="amountInput" min="0" max="20" value="0" onchange="this.previousElementSibling.value=this.value" />

How should I hide the range input if the browser isn't compatible with them?

Upvotes: 0

Views: 113

Answers (2)

ZEE
ZEE

Reputation: 5849

You can easily handle all html browser incompatibility and use them in your advantage with modernizr.js , make sure to import the library : 

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

and then inspect your web page in IE , within the HTML tag you'll find some attribute starting with the word "no" something like no-canvas and so on, all unsupported features will start with no-HTML-or-CSS , and you can use this to apply whatever style you want .

exemple : 

.no-cssreflections {
            border-radius: 15px;
        }

Upvotes: 1

Katana314
Katana314

Reputation: 8610

Javascript can feature-detect input type like so:

var rangeInput = document.forms.myformname.amountRange;
if (rangeInput.type === 'range') {
  // This browser supports range.
}
else {
  rangeInput.style.display 'none';
}

It seems that trying to set input.type = "somethingIEdoesntunderstand" will actually result in an error in IE9; and all browsers will filter the possible types to what they know.

Upvotes: 1

Related Questions