How to make input type="range" trigger an overflow scroll?

Question

I have an input type="range" that is bigger then its parent. I want to make it scroll when the slider-thumb exits the parent width.

Here is an example, when you exceed the parent width there should be a scroll. How can I do that?

http://jsbin.com/ikemo4/edit

Please note that input type="range" will only work in WebKit browsers.

Answer 1

The very simple option is to use the oninput event and, assuming your values and widths are accurately represented by the fiddle, when the value of the range increases past the width of the container manipulate the scrollLeft by rangeValue - parentWidth. I achieved this in your jsBin example using the following code:

var rng = document.getElementById("range");

rng.oninput = function () {
    this.parentNode.scrollLeft = this.value - 400;
}

And the result can be demoed here. You might want to tweak it slightly to get the desired affect.

Another option would be to check if the value is greater than a certain amount and scroll the box fully to the right. When it goes back the other way, scroll fully to the left.