HTML5, CSS3, jQuery, JSON, Responsive Design...

React Bootstrap Slider component

Michael Brown  March 1 2015 10:29:07 PM
I've just written a ReactJS, wrapper for the HTML5 input type=”range” slider component, but using [seiyria’s Bootstrap Slider component] ( as a polyfill where the HTML5 version is not available (IE 9) or otherwise suffers from a problematic implementation (any other version of IE).

The code and full documentation is available on Github.  There's a demo available too.


I like the HTML5 native range control, especially how easy it is manipulate via ReactJS, my current favourite JavaScript library.  (I'll be writing a lot more about React in future.)  You set up an HTML5 range control like so:

<input type="range" value="20" min="0" max="100" step="10">

This will give a slider control, ranging from 0 to 100 in steps of 10, with a starting value of 20.  Nice and easy!

Here’s how the native JavaScript control is rendered in my ReactJS plug-in:
render: function () {
   return (
        <input id="mySlider"
           step={this.props.step} />

It’s about as simple a rendering as you could want in React. You’d pass some props into your component, and render them as the corresponding attributes on the input field. Sweet as!
But knock me down with a feather if there aren’t problems with IE.

Internet Explorer Problems

The first problem is that input type="range" element simply isn't supported on IE 9 and below. It will actually display as a type=”text” element, so instead of slider, you’ll get a text box with a number in it.  This is what prompted me to create a React control that would fall back to the Bootstrap Slider for browsers that didn’t support the native HTML5 element.

The second problem is that IE10 and 11, where the control does display, doesn't respond correctly to right events when you need to track the slider value being changed.  I go into more detail on that on my Github page.  I probably could have worked around that one, but ran into my third and final problem with IE.

The third problem in IE is that the HTML5 range control looks like crap!  It’s not just ugly, IMHO. It’s inpractical too.  Its handler (the bit on the control that you actually slide) is the same height as the rest of the slider, making it to pick out with your eye, not to mention with your finger if you’re on a tablet. (Thankfully, the latter would only ever be an issue on Microsoft tablets, of which there's next to zero in the real world).

In the end, I made an executive decision in my React Bootstrap Slider component: I don’t display the native HTML5 slider control on IE. At least not for IE 10 or IE 11.  Maybe it looks better in the new, webkit powered IE 12?  I haven't test this myself.

How to use
You can follow the example code in the app.jsx file on the Github page to see how to use.  The component is called SliderNativeBootstrap. Here’s an example of how you might call it in your ReactJS’s render method:

         min={this.state.min} />

The value, step, max and min parameters should be self-explanatory. handleChange is the callback method that will be called when the slider actually changes. (NB: this is the onInput event for the native HTML5 control, and the “change” event for the Bootstrap slider.)

Forcing the Bootstrap version all the time
An optional parameter is polyfill. When set to true (the default if you leave the parameter out) the component acts as I’ve described it above, i.e. displaying the HTML5 native slider for these browsers that support it properly, and the Bootstrap version for those that don’t. If you want to force the use of the Bootstrap slider for all browsers then you should set this parameter to false, like so:

       min={this.state.min} />

Is here.
On load, the slider range is 1,000 to 20,000 with a step of 1,000.
Click on the Change axes! button, and the slider range changes from 0 to 2,000 with a step of 100

Update 11/03/2015

Now available on React Components.