Как сделать так, чтобы input type = "range" вызывал прокрутку переполнения?

Question

У меня есть тип ввода = "диапазон", который больше, чем его родитель.Я хочу сделать прокрутку, когда ползунок выходит из родительской ширины.

Вот пример, когда вы превышаете родительскую ширину, должна быть прокрутка.Как я могу это сделать?

http://jsbin.com/ikemo4/edit

Обратите внимание, что input type = "range" будет работать только в браузерах WebKit.

Answer 1

Очень простой вариант - использовать событие oninput и, предполагая, что ваши значения и ширины точно представлены в скрипте, когда значение диапазона увеличивается после ширины контейнера, манипулируют scrollLeft на rangeValue - parentWidth . Я добился этого в вашем примере с jsBin, используя следующий код:

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

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

И результат можно продемонстрировать здесь . Возможно, вы захотите слегка изменить его, чтобы получить желаемый эффект.

Другой вариант - проверить, превышает ли это значение определенную сумму, и полностью прокрутить поле вправо. Когда он вернется в обратном направлении, прокрутите полностью влево.