JS-плагины №10. Range слайдер для цены - nouislider.js

[@bonafidesjo]

У всех, кто делает бесплатные обучающие ролики, над головой должен загораться нимб. Спасибо большое за труд. Я только в начале пути, и не все могу понять из документации. Очень помогло!!! ♥♥♥

[@matwa2260]

Мужик, реально помог работягам разобраться! Респект тебе.

[@etherium-gold]

Я только начинаю свой путь в it и такие видео мои учителя.

[@taeyanglee3283]

Спасибо огромное, столько времени маялась с тем, чтобы ползунки не вылезали за границу! И здесь нашла решение

[@alexandrgusletsov2567]

Спасибо ! Всё мега чётко ! прокачал Максим ,как обычно на уровне

[@BEKS705]

Чувак!!! Огромнейшее спасибо за видос!!

[@stain-fit]

Это самое лучшее, что я видел 😍, спасибо тебе Надеюсь твой канал никуда не пропадёт и ты не забросишь

[@maxgraph]

Спасибо) бросать не планирую))

[@максим-м9ж5э]

чё , прям САМОЕ лучшее "😍😍" ?

[@Rob-bz2rp]

Ты только что меня спас !!!

[@PuzMax]

Долго не мог найти как сделать такой слайдер, очень круто все показано. Огромное спасибо )

[@maxgraph]

Пожалуйста)

[@arkanot02]

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

[@user-Arvard]

Макс как всегда, на высоте! ) спасибо)

[@temamx]

Лайк! Очень полезное видео про range инпуты

[@vollex_frontend]

Спасибо тебе! Сильно выручил! Не переставай выпускать ролики!)

[@maxgraph]

Пожалуйста))

[@Anatoli-bq1pe]

Благодарю! Классный видос!

[@ЕвгенийЛазарев-б4з]

Спасибо, отличный разбор!

[@evgeniivavilo8678]

очень полезная штука. сделал на сайте по вашему видео спасибо.

[@maxgraph]

Пожалуйста)

[@olgam414]

Спасибо за подробное видео!!!

[@maxgraph]

Пожалуйста)

[@user-natal04ka]

Все получилось, спасибо!!!

[@serhiiretsenko2237]

Новая годнота от Макса подъехала! =)

[@maxgraph]

спасибо))

[@alizhilov1391]

спасибо большое, очень полезное видео вы очень помогли мне!!!

[@maxgraph]

Пожалуйста)

[@ДмитрийМилосердов-и7п]

Спасибо🙏

[@abouteverything3118]

Хорошее видео

[@JB-sv8oh]

Очень полезно!!!!!! спасибо!!!

[@maxgraph]

Пожалуйста)

[@konstantinokhlynin]

Супер полезное видео!

[@dimamedny7968]

Спасибо, все просто и понятно👍

[@maxgraph]

Пожалуйста)

[@dimamedny7968]

@@maxgraph только сейчас уже нет папки со скриптами стилями плагина, надо cdn искать

[@ivanryduch5084]

Максим , спасибо большое за урок! У Вас не случайно видео как этот слайдер сделать рабочим ( то есть что бы он мог сортировать ). Спасибо

[@maxgraph]

Нет такого)

[@vitalb7907]

Давай следующий урок, как работать с такой корзиной с локальным-хранением данных) еще можно добавить функционал типу "избранные". тоже на уровне локального-стореджа

[@maxgraph]

Прямо следующий не могу, уже в планах другое :) Но вообще да, сделаю

[@vitalb7907]

@@maxgraph ну я к тому стоит ли плагин целый использовать. возможно знаешь как и нативносамому все написать )

[@maxgraph]

@@vitalb7907 конечно стоит) плагин писали явно люди умнее, тестировали миллионы людей. Это точно надежнее, чем самому велосипеды пилить.

[@vitalb7907]

@@maxgraph аргумент :D

[@maxgraph]

@@vitalb7907 ну по мне так точно аргумент)

[@АртемБакум-ц4ю]

Спасибо. Помог.

[@maxgraph]

Пожалуйста)

[@НиколайТарасов-р2х]

Здравствуйте. Не получается стилизовать класс noUi-target. Что делать?

[@maxgraph]

пишите в группу телеграма с кодом к нам) посмотрим

[@HowManyShrimps-g7z]

спасибо

[@maxgraph]

Пожалуйста)

[@yulya1348]

Максим, добрый вечер! С чем может быть связан баг: линия, по которой перемещается ползунок, в браузере отображается толстой, а в режиме разработчика - тонкой в 1px? Классу .noUi-target задана высота 1px.

[@Uncaught_in_promise]

спасибо за годный контент. допустим потом эту верстку натягивать на opencart/woocommerce, а там ведь уже этот функционал из коробки идет. Логичный вопрос возникает, этот плагин уже не нужен будет? или нужно будет его оставить, но подстраивать под CMS?

[@maxgraph]

ну если там все это есть и кастомизируется также - не нужен :)

[@Александр-ы8х3т]

Лайк, надеюсь на чистом js.

[@maxgraph]

Конечно на чистом :)

[@dokerm9048]

Максим спасибо за подробное видео, хотелось бы еще узнать как сделать, чтобы при выборе цены значения сохранялись в инпутах (макс. и миним. цена) в атрибуте value, для последующей их обработки к примеру с помощью ajax ?

[@максим-м9ж5э]

сделал всё норм, только не понимаю почему у меня и у тебя не работает в самом инпуте параметр max- можно ввести число больше заданного

[@ant3413]

А почему вы SCSS не использовали?там же можно через position:relative двигать элементы по всей страницы.Например если хотите карточку передвинуть на вверх пишите position:relative top:522px и все даже можно без JS PHP такие вещи делать

[@maxgraph]

Элементы с позишн релатив двигать через топ не стоит. Их разсер и позиция остаются на месте, лишь внешне сдвигаются, поэтому можно получить нежелательный эффект. А scss - просто

[@workproject4018]

Спасибо! А если не нужен инпут, но нужно менять значение цены в отдельному блоке по типу Ваших инпутов? Можно конечно запретить ввод, убрать рамки и будет выглядеть как текстовое поле. Но можно сделать вывод в обычный спан например?

[@workproject4018]

Всё, разобрался )

[@deniskotov]

Макс, суперполезно! Огромная тебе благодарность. P.S. Кстати, не в курсе, как теперь достать собранные файлы noUiSlider'a? Разрабы в 15 версии убрали из репозитория папку дистрибьют и переместили всё в дист, но на гитхабе этой папки нет. Чтобы получить эти файлы, нужно самостоятельно собрать проект? Или где их взять?

[@maxgraph]

Привет, спасибо) я просто ищу ссылки на cdn и оттуда достаю код

[@deniskotov]

@@maxgraph понял, спасибо

[@Serejka69]

Добрый день, подскажите пожалуйста, есть ли возможность сделать, чтобы при нажатии на инпут форму старое значение не нужно было удалять, а можно было сразу вводить своё, изначально с placeholder у меня это получилось, но после установки стартовых значений в js такая возможность пропала. Спасибо за видео, очень помогло!

[@maxgraph]

Нет, так не работает к сожалению)

[@igorsemenov5843]

#10:58 а где написано, что вы подключили ЦСС файл - range-slider.css ?

[@maxgraph]

видимо нигде) значит я не использовал его

[@igorsemenov5843]

@@maxgraph но вы стиле меняли, ренж слайдеру, я просто новичок, все делал по вашем рекомендациям, прослушал 3 раза и не увидел где вы подключили цсс файл (ренж слайдер)

[@Мирумир-р7в]

все сделал до 13:36 а бегунок не появился. Ошибки в терминале не показывает тоже. в Браузере где див слайдера в разметке появился noUd target и т д. если наводить на разметке то место просто пустое не видно ползунка. в чем проблема??? ну я не в libs закинул 2 файла мини, а в папку с js пути вроде норм указал, раз в браузере появился noud target и т д в разметке.

[@maxgraph]

Сложно угадать что там(

[@Мирумир-р7в]

@@maxgraph Да все спасибо я исправил) теперь пытаюсь с activ focus hover разобратсья как делать)

[@vitalb7907]

А без плагина можно такое сделать?)

[@maxgraph]

Ну раз плагином можно - то и без можно :)

[@MaksssHome]

Привет) Можешь пожалуйста записать урок, как сделать чтобы после корзины нас переадресовывало на страницу order, как в крупных интернет магазинах, и там уже идёт заполнение форм, как это все устроено рассказать и показать, спасибо)

[@maxgraph]

Привет! Ну это уже бэкенд, я не бэкендер :)

[@MaksssHome]

@@maxgraph Спасибо) жду уроки по js и побольше бы марафонов или практики самой верстки:)

[@alym.aleksey]

@@maxgraph так у JS тоже есть объект location, ну если очень надо именно на клиенте, то можно сделать его колбеком после отправки формы, если все хорошо уходит, или я ошибаюсь?

[@alexwild5605]

А если нет больше папки distribute???(((( От куда качать, что делать????

[@maxgraph]

С cdn можно скачать

[@alexwild5605]

@@maxgraph Спасибо, я уже успел найти ответ на этот вопрос!)))

[@peregrinus4306]

как пофиксить то, что когда мы правому ползунку ставим right: 0 он теперь может встать левее левого ползунка

[@maxgraph]

Не ставить right: 0, видимо. Нужно лучше понимать, что там у вас

[@peregrinus4306]

@@maxgraph нет, просто мы прописали этот right чтобы слайдер не выходил за пределы блока, что необходимо. Но попробуйте с этим параметром скрестить два ползунка, один выходит за пределы другого (например правый может уехать левее левого). Уже все испробовал, так и не понял как пофиксить

[@vovergg]

Эх, а я думал, что на чистом js слайдер будем сами писать, а тут уже готовый... Жалко.((

[@maxgraph]

Зачем писать, если уже есть готовое?)

[@vovergg]

@@maxgraph Чтобы научиться, понять, как это работает изнутри.)

[@ВоваВладимир-ф7ц]

Привет верстаю сайт из 13 страниц на сайте три ползунка плагин поддерживает не сколько?

[@maxgraph]

Привет, да сколько угодно)

[@ВоваВладимир-ф7ц]

Мучения)

[@ВоваВладимир-ф7ц]

@@maxgraph а три ползунка на сайте диапазон цен разный у каждого слайдера получается не сколько конструкций в js

[@maxgraph]

Не понял)

[@ВоваВладимир-ф7ц]

@@maxgraph я добавил цикл получилось создать не сколько ползунка в. Но в ползунках одинаковый диапазон цен. А мне надо разный диапазон цен для каждого ползунка понял?

[@ДмитрийМилосердов-и7п]

Сии как доллар 😅

[@максим-м9ж5э]

я не понимаю, ты перед тем как выкладывать видео ускоряешь чтоли ?

[@maxgraph]

нет

[@максим-м9ж5э]

@@maxgraph ясно ,тогда поздравляю ты очень видимо быстро соображаешь , я обычно ютуберов смотрю на 1.25, 1.5 , а тебя на обычной , а про свипер вообще замедлял O_o

[@Noname-i4f3z]

Ничего не сработало, всё сделал как и автор

[@maxgraph]

Смотреть надо)

[@Noname-i4f3z]

Смотрел, не работает nouislider

[@megafalos850]

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

[@maxgraph]

Никак) моя задача как верстальщика сделать внешний вид

[@megafalos850]

@@maxgraph а понял, просто думал ты и бэк делаешь одновременно