Как сделать trackbar (он же range slider, ползунок, диапазон значений) и вывести значение в input?

Question

[Valetorn]

Господа, помогите с решением. Написал я, с горем пополам, скрипт для trackbar, он же range. И возникло две сложности:

1. Основная - критическая. Не получается корректно вывести значение ползунков в input. При противоположном, от начальной позиции, движении все нормально (значение левого бегунка прибавляется, правого отнимается), но при обратном происходит происходит тоже самое, а мне нужно наоборот. Как исправить?
2. Не основная и не очень важная, но все же гложет. Сейчас, чтобы движение ползунков было плавным мне приходится навешивать дополнительный класс на бегунки иначе, что собственно ожидаемо (потому, что обработчик весит на родителе (#range)), курсор, при перемещении ползунка, переходит на соседние элементы и движение становится прерывистым. Есть варианты сделать без навешивания дополнительных классов?

Comments

[Сергей delphinpro]

Зачем вы изобретаете глючные велосипеды?
ionden.com/a/plugins/ion.rangeSlider/index.html

[Valetorn]

Сергей, Затем, что: A. Хотел написать сам. B. Не хотел зависимостей в виде JQuery.

Answer 1

[Андрей Хохлов]

https://github.com/leongersen/noUiSlider

Без зависимостей.

Вы либо берите готовый и используйте.
Либо берите готовый и используйте как пример для своего велосипеда.

Comments

[Valetorn]

Спасибо за ответ. Проект не коммерческий, а для личного развития, поэтому не использую готовые решения и пилю "велосипеды". Благодарю за ссылку,может быть там нарою решение.