Is it possible to run some HTML5 input types in IE8 with any library??
for example with range.

Points: <input type="range" name="points" min="1" max="10">
<input type="submit" value="send">

Is it possible to run some HTML5 input types in IE8 with any library??
for example with range.

Points: <input type="range" name="points" min="1" max="10">
<input type="submit" value="send">

• javascript
• html
• internet-explorer
• cross-browser
• html-input

• You could put that in IE8 and see for yourself. – DA. Commented Dec 21, 2012 at 1:15
• 1 Do you know some IE8 emulator?? I tried with IEtester, and not working input type='range' – user1907121 Commented Dec 21, 2012 at 1:18
• 1 It renders as a text box in IE8. Which is kind of too be expected. Don't expect IE8 to support HTML5 widely. – DA. Commented Dec 21, 2012 at 1:22

5 Answers 5

IE8 doesn't support <input type="range">. The most seamless way to accomplish this in older browsers is to detect support and use "polyfills" where needed. A polyfill is designed to add support to older browsers, typically using some JavaScript that tries to emulate what the native behaviour would be.

This page has a great list of polyfills. (And Modernizr is a great way to detect support for these sorts of things.) You'll find polyfills for various input types in that list.

You can use modernizr To check if your browser supports HTML5.
And you could use Jquery UI Slider it work in IE8

Check this page : http://jqueryui.com/slider/
demo: http://jsbin.com/eduren/1/edit

To read slider value/percentage value:
var val = $('#slider').slider("option", "value");

Right of my mind I think of Chrome frame, a Google project to bring Chrome engine under Trident hood.

URL: http://www.google.com/chromeframe

I never tried myself. When a browser experience a bug, we fix it or find a workaround. I'm not a big fan of add-on, especially from an administration point-of-view.

Another option would be to use modernizr library to detect the browser capability and find a work around for it. There is always some hacky way to get your way out. Using html5 shiv could be a way to find your way out. And that's the second option I prefer when dealing with IE8. Regards.

Ie8 will render all "html5" input types as text. However you can then target those types with JavaScript, using something like

$('[type=range]').slider() //insert your favorite library here...

I know it isn't tagged jquery, but I figure the example is still clear enough

The following code creates a range input, then checks if the browser is a version of Internet Explorer that doesn't support range inputs. If that's the case, it creates a range input out of divs and uses some Javascript code to make it interactive.

<input name="range" id="range" type="range" min="1" max="10" />
<!--[if lt IE 10]>
  <div id="range_ie" style="position:relative; width:255px; height:15px; font-size:0px; cursor:default" onselectstart="return false">
    <div style="position:absolute; left:0px; top:5px; width:100%; height:30%; border-left:1px solid gray; border-top:1px solid gray; border-right:1px solid white; border-bottom:1px solid white; background:silver"></div>
    <div id="slider" style="position:absolute; left:0px; top:0px; width:5px; height:100%; border:1px solid gray; background:#EBEBEB; font-size:15px" onmousedown="document.onmousemove=changevalue">&nbsp;&nbsp;</div>
  </div>
  <script type="text/javascript">
    //Hide the <input> element, otherwise older versions of IE will just display it as a text input
    document.getElementById("range").style.display = "none";

    //If the user releases the mouse after changing the value of the range input, it should stop changing
    document.body.onmouseup = function() {
      document.onmousemove = function(){};
    };

    function changevalue(e) {
      //Get the value of the input from the position of the cursor
      range.value = ((navigator.appName.substring(0, 3) == "Net") ? e.pageX : event.x) * (range.max - range.min) / (document.getElementById("range_ie").style.width.substring(0, document.getElementById("range_ie").style.width.search("px"))) + Number(range.min);

      //Check that the value isn't out of bounds
      if (Number(range.value) > Number(range.max)) {
        range.value = range.max;
      }
      if (Number(range.value) < Number(range.min)) {
        range.value = range.min;
      }

      //Move the slider to its new position
      document.getElementById("slider").style.left = (range.value - range.min) * Number(document.getElementById("range_ie").style.width.substring(0, document.getElementById("range_ie").style.width.search("px"))) / (Number(range.max) - Number(range.min)) + "px";
    }

    //If we click on the slider just like that, it should move
    document.getElementById("range_ie").onclick = changevalue;
  </script>
<![endif]-->