У меня две проблемы с ползунком диапазона по умолчанию в HTML5, т.е. <input type="range"/>. Вот JSfiddle , который иллюстрирует их и сравнивает с noUiSlider , реализацией ползунка диапазона, созданной с использованием пользовательских элементов <div>, которая позволяет избежать обеих проблем. Я преувеличил ширину ручки ползунка и добавил справочные линейки, чтобы выделить проблемы. Существует также расширенное форматирование CSS, чтобы оба ползунка выглядели одинаково, но это не имеет отношения к проблемам.
Графическая ширина дорожки ползунка в ползунке HTML5 слишком широкий и простирается за 0 и 100 баллов. Обратите внимание, что оба ползунка имеют одинаковую функциональную ширину, то есть ползунок обрабатывает и может go так же далеко, как влево и вправо. Можно ли сделать так, чтобы дорожка HTML5 соответствовала ширине линейки, но при этом ручки могли бы вытягиваться так же далеко - т.е. вести себя как noUiSlider?
При перетаскивании HTML5 медленно перемещайте ручку от нецентральной точки, ручка подпрыгивает, так что мышь находится в центре ручки. Это делает незначительные регулировки слайдера излишне трудными. (В Firefox скачок происходит в mousedown, но в Chrome это происходит, когда вы начинаете перетаскивать.) Обратите внимание, что noUiSlider также не имеет этой проблемы. Это жестко запрограммировано поведение прыжка-ручки-центра-положения-позиции в ползунке HTML5 или его можно изменить?
Конечно, я мог бы просто использовать noUiSlider в своем коде и называйте это днем, но я не хочу ненужного импорта, и мне не нужны все навороты noUiSlider. Я просто хочу использовать ползунок диапазона по умолчанию, но без ошибок, если это возможно.