Как правильно написать скрипт для ползунка на нативном JS?

Question

[Денис Букреев]

Такие дела.
Есть простейший ползунок - тонкая линия и кружок, который должен двигаться вдоль этой линии.
Цель - отслеживать положение ползунка относительно линии.

Как правильно подойти к решению?

Answer 1

[Олег]

с использованием range html5
Стандартный ползунок https://jsfiddle.net/joomla/zc9h4ftx/2/
Со своими стилями https://jsfiddle.net/joomla/zc9h4ftx/1/

Comments

[Денис Букреев]

достаточно просто оказалось) спасибо

[Денис Инешин]

Денис Букреев: type=range пока увы не достаточно кроссбраузерный, и он ограничен одним ползунком.

[Денис Букреев]

Денис Инешин: нормальные заказчики уже давно понимают, что ie8 и ie9 это прошлое десятилетие и ими вообще никто не пользуется, не смотря на странную статистику.
остальные браузеры в основном автоматически обновляются, а кто их не обновляет - идиот
а разве заказчики ориентируются на идиотов? вряд ли)

[Денис Инешин]

Денис Букреев: ну да, да, но type=range это IE11+ и то не все гладко.

[Денис Букреев]

Денис Инешин: ie10 отлично воспринимает его)

Answer 2

[Денис Инешин]

Начните с изучения существующих плагинов:
- Простейший: rangeslider.js.org

Продвинутые плагины:
- ionden.com/a/plugins/ion.rangeSlider
- refreshless.com/nouislider
- ghusse.github.io/jQRangeSlider

Comments

[Денис Букреев]

они все от jQuery зависят

[Денис Инешин]

Денис Букреев: jQuery всего лишь облегает работу с DOM и событиями. При этом никак не затрагивая логику работы, кроме того тот же noUiSlider недавно отказался от jQ.

[Денис Букреев]

Денис Инешин: давно пора всем от jQuery отказываться, разработчики его применяют не к месту всегда
плагины должны быть как минимум в двух версиях - с jQuery и без jQuery

[Денис Инешин]

Денис Букреев: не нужно быть столь категоричным, jQuery - это стандарт, он есть на 95% сайтов. Например даже в следующей версии своего плагина ion.RangeSlider я не планирую от него отказываться. Так как считаю это преждевременным, к тому же я поддерживаю IE8.

[Николай]

Денис Букреев: и чем плох, по вашему, jquery?

[Денис Букреев]

Николай: тем, что его юзают где попало, даже в самых простых моментах, где на нативном JS код был бы проще

еще он портит разработчиков. Например, я - изучал-изучал JS, узнал о jQuery еще на начале пути и в молодую голову засела мысль: "а нахрена мне нативный JS, когда я могу все делать на jQuery?" - и я до сих пор пожинаю плоды этой ошибки. Быдлокодеров взращивает jQuery

еще он весит сто килобуйтов. В большинстве проектов без jQuery у меня сжатый js-файлик весит 50-100КБ, редко больше. Какой смысл в таких случаях грузить еще библиотеку?

использовать с js-фреймворками jQuery крайне не рекомендуется, но используют, быдлокодят

[Денис Инешин]

Денис Букреев: не нужно впадать в крайности. Быдлокодеры бывают и на простом JS. jQuery это библиотека, она совсем не отменяет общепринятые принципы программирования. Если ее использовать грамотно, то все будет хорошо.

[Николай]

Денис Букреев: Детский лепет, простите уж. Не увидел ни одного аргумента в пользу того, что jquery плох, и его не стОит использовать.
100 Кб в нашем веке интернета - не так уж и много, но зато существенно упрощает (ускоряет) работу. Так что лично я готов пожертвовать 85-90Кб для сайта, что бы сэкономить час или более работы, где это необходимо.
"использовать с js-фреймворками jQuery крайне не рекомендуется но используют, быдлокодят" - это опять же, проблема jquery? Дак вон, машины сбивают людей. Надо запретить машины, а то накупят, и давят потом всех!!1111один. Смешно же)
Кстати, тот же ангуляр прекрасно работает с jquery, так что я несовсем понял о чём вы.

[Денис Букреев]

Николай: что-то не понял каким образом jQuery УСКОРЯЕТ работу сайта?)
как раз на нативном JS, при правильном его написании, все и будет быстро работать
в этом плане jQuery как раз работает в противоположном направлении

[Денис Инешин]

Денис Букреев: вы невнимательны, он написал ускоряет работу. Без сайта. Имелось в виду процесс разработки.

[Kovalsky]

Денис Букреев:

Денис, вот не ради флейма, а интересно просто: расскажите какие вы используете функции для работы с DOM, как отправляете запросы. Как используете DOMContentLoaded и подобные ему события, как организовываете обработку events? Как добываете информацию о положении/размерах элементов, о стилях?

[Денис Букреев]

Никита Полевой: неудобства в вышеперечисленных моментах можно получить только с запросами на сервер, а если со всеми аспектами проблемы, то пора пойти обучиться JS или просто не лениться.

В случае запросов на сервер вроде как все просто? Либо используется js-фреймворк (vue, angular, react и тд) и получаем SPA, либо его не используют и довольствуются многостраничным приложением.

Если Вы используете jQuery для создания SPA, то это печально очень.
А для отправки писем у меня уже заготовлен код и я его туда сюда копирую. Сложности нуль.

"Как добываете информацию о положении/размерах элементов, о стилях?" - вот это самое смешное. Погуглить надо команды и увидеть, что они бывают даже короче, чем у jQuery

[Николай]

Денис Букреев: Ваш крайний ответ по типу:
- У вас была какая-нибудь тактика который вы придерживались?
- У меня была какая-то тактика и я её придерживался.
(А для отправки писем у меня уже заготовлен код и я его туда сюда копирую.)

Вас спросили как вы реализуете, а вы накидали общих фразочек, якобы показать что вы разбираетесь. Но нет никакой конкретики в ваших ответах; так же можно посмотреть на созданную вами тему (эту), и всё явно встаёт на свои места ;)

И попробуйте иногда следовать советам, которые сами даёте: "а если со всеми аспектами проблемы, то пора пойти обучиться JS или просто не лениться".

P.S. А против jq - так и не услышал ни одного аргумента, лишь "ко-ко-ко, говнокодеры". )
P.P.S. Ничего личного )

[Kovalsky]

Денис Букреев: (в JS нету команд)

А теперь о нашей теме. Я зашел на ваш маленький сайтик, глянуть чего там. Малюсенький сайтик-визитка, приятный дизайн. Кстати откуда у вас на сайте логотип jQuery, вы же им не пользуетесь?

Смотрю вступление, так сказать. Preloader, событие load, все норм. И тут бац -

<!--[if lt IE 9]>

То есть "ie8 и ie9 это прошлое десятилетие и ими вообще никто не пользуется", но html5shim и respond вы подключили, забавно. Пользователи IE9- ведь идиоты, не обновляют браузеры, а разве хорошие фронтендщики ориентируются на идиотов? Вряд ли. В общем, непонятно тут.

Смотрю далее. Что это тут? Прилипло что-то. У вас тут кто-то целый jQuery забыл. Как так, ведь вы же сами говорили что вам не нравится, что "его юзают где попало, даже в самых простых моментах, где на нативном JS код был бы проще"?

А следом еще и baron.js, который весит как половина jQuery и вдобавок еще почему-то не удостоился минификации. Кстати вы в курсе что его работу на вашем сайте можно увидеть только вручную изменив высоту соответствующих блоков? Сразу пришло в голову - "смысл в таких случаях грузить еще библиотеку?"

Смотрю common.min.js. Не будем останавливаться на том, что он весь состоит из jQuery, тут достаточно будет просто сказать, что, если не считать анонимных функций, в этом скрипте на 17 вызовов функций jQuery приходится всего 3 вызова не-jQuery функций, одна из которых не ваша, а остальные - процедуры, выполненные в jQuery. Проще ведь было на нативном JS, не?

Смотрите, какие сочные, функциональные строчки:

o = ($(".profile"), $(".main__inner"));

...

o.parent().children(".contacts__item"), o.find(".contacts__item-content");

Нууууу.... на этом моменте я наконец понял почему вы считаете, что "jQuery как раз работает в противоположном направлении" ). Действительно, почему бы и не погонять tree traversal функции вхолостую? Как же мне раньше в голову не приходило. Если вы вдруг не поняли: в первой строчке вы дважды посылаете sizzle за плюшками, первый из которых вообще без всякого смысла, ибо результат никуда не сохраняется. Вторая строчка тоже достаточно феерична.

И тут я подумал, что я наверное слишком строг: может быть просто человек делал этот сайт много лет назад? Тогда сейчас он уже наверняка намного более скиловый и пишет все на JS без всяких сторонних библиотек, используя только собственные наработки, а этот сайт остался с тех времен когда ему нужна была аудитория под IE9-, сейчас уже не нужна конечно, он и так успешен, без всяких "идиотов"...

Но сразу же я убеждаюсь в том, критика уместна: последние изменения на сайте сделаны 29-го июля, всего два месяца назад. То есть за два месяца вы успели осознали, что вам не нужен jQuery?

Конечно, все это мелочи. Конечно, никто никогда не заметил бы что вы гоняете tree traversal вхолостую. И конечно же ваш сайт даже со всем этим дерьмом загрузился очень быстро, о наличии preloader я узнал только из кода, не успел его увидеть даже. Но дело в том, что вы на вашем сайте поступили ну прямо вопреки всем сказанным вами словам. Сказали нам что вы не любите когда грузят лишние библиотеки, не любите когда пишут код под jQ, если на чистом JS можно было быстрее и проще, сказали что нет смысла поддерживать идиотов на IE9-, а поступили с точностью до наоборот.

В общем, вы молодец.

[Денис Инешин]

Никита Полевой: мощно)

[Денис Букреев]

Никита Полевой: ну да, сайт я катал в 15 году будучи еще раком, я и сейчас не отличаюсь профессионализмом в JS, так как просрал все из-за того же jQuery. Но по сравнению с тем уровнем я поднялся сильно.
просветление мне начало приходить только зимой 16 года, когда я стал получать действительно толстые заказы.
и да, как верно подмечено, я не особо слежу за этим сайтом-визиткой, так как смысла в нем что-то не нашел, так как уже несколько месяцев работаю в компании и редко принимаю заказы со стороны.
Надо, кстать, скиллов туда подбавить, но опять же лень

а так да, хороший обзор) хотя вот эта ссылка в конце слишком пафосна - портит все впечатление да и аутизмом потягивает

PS: барона я подрубал, так как большие планы были

[Kovalsky]

Денис Букреев: цель всех этих тирад была не опустить/унизить/оскорбить вас. Просто из вашего ответа на мой вопрос про то, какие функции вы используете, видно что вы сами не делаете то о чем говорите, не используете их. Вот из этого ответа например - "вот это самое смешное. Погуглить надо команды и увидеть, что они бывают даже короче, чем у jQuery". Вы говорите, что это смешно и что надо гуглить, вот и все. А на самом деле в этом вопросе есть куча нюансов даже в самых, казалось бы, адекватных версиях браузеров, могу привести примеры если хотите. Так вот, если вы считаете что все это так просто и достаточно нагуглить, вы просто ни разу с этим не сталкивались. Ну или в каких-то совсем сферических ситуациях мельком. Я повторюсь, все это я говорю не чтобы как-то оскорбить или что-то еще, хотя может быть я был резок. Вы наверное отличный парень и все такое, отличный кодер, но врать на QA форуме - это совсем не круто. Не делайте так.