Как быстро написать range slider?

Question

[Василий Мажекин]

Мне нужно написать range slider на чистом яваскрипте. Типа такого
Написал на скорую руку частично взял отсюда код https://www.w3schools.com/howto/howto_js_draggable.asp

Но что то так сходу сразу качественно не получилось.
1) Клики не работают.
2) в мобильных версиях не перетаскивается.
3) Мелкие но трудоемкие недочеты типа, при выхода указателя мыши за границы теряется захват кружка, мелочь но не красиво.

Кто может подсказать какой то может быть изолированный небольшой плагин без посторонних библиотек, чтобы можно было сделать качественно данный контрол?

Comments

[Johny Smith]

Написал на скорую руку частично взял отсюда код https://www.w3schools.com/howto/howto_js_draggable.asp.

исправьте ссылку, битая
не ставьте в конце точку

[shmatuan]

range slider на чистом яваскрипте

без html/css ?_?

[Сергей delphinpro]

Если нужно быстро, возьмите готовый и измените внешний вид под свой дизайн.

Если не нужно быстро, всё равно возьмите готовый.

А вот если вы хотите сделать именно свой слайдер, оформить его в пакет и кинуть в опенсорс (ну или на платной основе), вот тогда пишите.

[Василий Мажекин]

Сергей delphinpro, это понятно, я конкретно, спрашиваю ссылку или что то такое

Answer 1

[Exploding]

Берем input type='range' и стилизуем его. Пойдет?

Comments

[Василий Мажекин]

Спасибо! Это очень хорошая идея, даже лучше чем я предполагал, надо будет попробовать в первую очередь. Я забыл про этот тип.

Answer 2

[r_mustang]

первая строка в гугле?
msbrime.github.io/RangeSlider

Comments

[Василий Мажекин]

Не надо, мне гугл советовать, пишите если знаете решение проблемы.

Мутный контрол, живых примеров нет, как кастомизировать непонятно, повернуть тоже не понятно как,

яркий пример как не надо выкладывать контролы в интернете.

[r_mustang]

да как не надо советовать гугл, если по запросу вываливается не одна подходящая ссылка, было бы желание решить проблему, давно бы уже решили. кастомизация стандартная через правку переменных и css.
вот вам еще, с примерами - stryzhevskyi.github.io/rangeSlider

[Василий Мажекин]

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