JS-плагины №10. Range слайдер для цены - nouislider.js
HTML-код
- Опубликовано: 12 сен 2024
- Привет! В этом видео разберем, как же сделать простой и удобный range-слайдер для изменения цены на сайте. Такие слайдеры часто можно встретить в интернет-магазинах. Поехали!
Содержание:
00:00 -
github.com/max... - исходники видео на GitHub
refreshless.co... - библиотека nouislider.js
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxg...
Чат для верстальщиков: teleg.run/maxg...
#ityoutubersru #rangeslider #nouislider
Мужик, реально помог работягам разобраться! Респект тебе.
Это самое лучшее, что я видел 😍, спасибо тебе
Надеюсь твой канал никуда не пропадёт и ты не забросишь
Спасибо) бросать не планирую))
чё , прям САМОЕ лучшее "😍😍" ?
Ты только что меня спас !!!
Чувак!!! Огромнейшее спасибо за видос!!
Я только начинаю свой путь в it и такие видео мои учителя.
Макс как всегда, на высоте! ) спасибо)
Долго не мог найти как сделать такой слайдер, очень круто все показано. Огромное спасибо )
Пожалуйста)
Спасибо огромное, столько времени маялась с тем, чтобы ползунки не вылезали за границу! И здесь нашла решение
Спасибо, отличный разбор!
Спасибо тебе! Сильно выручил! Не переставай выпускать ролики!)
Пожалуйста))
Спасибо ! Всё мега чётко ! прокачал Максим ,как обычно на уровне
Лайк! Очень полезное видео про range инпуты
Все получилось, спасибо!!!
Большое спасибо, друг, у меня это сработало в моем проекте без проблем, я ценю это.
Спасибо🙏
очень полезная штука. сделал на сайте по вашему видео спасибо.
Пожалуйста)
Новая годнота от Макса подъехала! =)
спасибо))
Благодарю! Классный видос!
Хорошее видео
Спасибо за подробное видео!!!
Пожалуйста)
Максим , спасибо большое за урок! У Вас не случайно видео как этот слайдер сделать рабочим ( то есть что бы он мог сортировать ). Спасибо
Нет такого)
Давай следующий урок, как работать с такой корзиной с локальным-хранением данных) еще можно добавить функционал типу "избранные". тоже на уровне локального-стореджа
Прямо следующий не могу, уже в планах другое :) Но вообще да, сделаю
@@maxgraph ну я к тому стоит ли плагин целый использовать. возможно знаешь как и нативносамому все написать )
@@vitalb7907 конечно стоит) плагин писали явно люди умнее, тестировали миллионы людей. Это точно надежнее, чем самому велосипеды пилить.
@@maxgraph аргумент :D
@@vitalb7907 ну по мне так точно аргумент)
спасибо большое, очень полезное видео вы очень помогли мне!!!
Пожалуйста)
Супер полезное видео!
спасибо
Пожалуйста)
Очень полезно!!!!!! спасибо!!!
Пожалуйста)
Спасибо, все просто и понятно👍
Пожалуйста)
@@maxgraph только сейчас уже нет папки со скриптами стилями плагина, надо cdn искать
огромное спасибо!
Пожалуйста)
Спасибо. Помог.
Пожалуйста)
Максим спасибо за подробное видео, хотелось бы еще узнать как сделать, чтобы при выборе цены значения сохранялись в инпутах (макс. и миним. цена) в атрибуте value, для последующей их обработки к примеру с помощью ajax ?
Лайк, надеюсь на чистом js.
Конечно на чистом :)
Макс, суперполезно! Огромная тебе благодарность.
P.S. Кстати, не в курсе, как теперь достать собранные файлы noUiSlider'a? Разрабы в 15 версии убрали из репозитория папку дистрибьют и переместили всё в дист, но на гитхабе этой папки нет. Чтобы получить эти файлы, нужно самостоятельно собрать проект? Или где их взять?
Привет, спасибо) я просто ищу ссылки на cdn и оттуда достаю код
@@maxgraph понял, спасибо
спасибо за годный контент.
допустим потом эту верстку натягивать на opencart/woocommerce, а там ведь уже этот функционал из коробки идет. Логичный вопрос возникает, этот плагин уже не нужен будет? или нужно будет его оставить, но подстраивать под CMS?
ну если там все это есть и кастомизируется также - не нужен :)
Здравствуйте. Не получается стилизовать класс noUi-target. Что делать?
пишите в группу телеграма с кодом к нам) посмотрим
Максим, добрый вечер! С чем может быть связан баг: линия, по которой перемещается ползунок, в браузере отображается толстой, а в режиме разработчика - тонкой в 1px? Классу .noUi-target задана высота 1px.
сделал всё норм, только не понимаю почему у меня и у тебя не работает в самом инпуте параметр max- можно ввести число больше заданного
Спасибо!
А если не нужен инпут, но нужно менять значение цены в отдельному блоке по типу Ваших инпутов? Можно конечно запретить ввод, убрать рамки и будет выглядеть как текстовое поле. Но можно сделать вывод в обычный спан например?
Всё, разобрался )
А почему вы SCSS не использовали?там же можно через position:relative двигать элементы по всей страницы.Например если хотите карточку передвинуть на вверх пишите position:relative
top:522px
и все даже можно без JS PHP такие вещи делать
Элементы с позишн релатив двигать через топ не стоит. Их разсер и позиция остаются на месте, лишь внешне сдвигаются, поэтому можно получить нежелательный эффект.
А scss - просто
Добрый день, подскажите пожалуйста, есть ли возможность сделать, чтобы при нажатии на инпут форму старое значение не нужно было удалять, а можно было сразу вводить своё, изначально с placeholder у меня это получилось, но после установки стартовых значений в js такая возможность пропала. Спасибо за видео, очень помогло!
Нет, так не работает к сожалению)
все сделал до 13:36 а бегунок не появился. Ошибки в терминале не показывает тоже. в Браузере где див слайдера в разметке появился noUd target и т д. если наводить на разметке то место просто пустое не видно ползунка. в чем проблема??? ну я не в libs закинул 2 файла мини, а в папку с js пути вроде норм указал, раз в браузере появился noud target и т д в разметке.
Сложно угадать что там(
@@maxgraph Да все спасибо я исправил) теперь пытаюсь с activ focus hover разобратсья как делать)
А без плагина можно такое сделать?)
Ну раз плагином можно - то и без можно :)
#10:58
а где написано, что вы подключили ЦСС файл - range-slider.css ?
видимо нигде) значит я не использовал его
@@maxgraph но вы стиле меняли, ренж слайдеру, я просто новичок, все делал по вашем рекомендациям, прослушал 3 раза и не увидел где вы подключили цсс файл (ренж слайдер)
Привет) Можешь пожалуйста записать урок, как сделать чтобы после корзины нас переадресовывало на страницу order, как в крупных интернет магазинах, и там уже идёт заполнение форм, как это все устроено рассказать и показать, спасибо)
Привет! Ну это уже бэкенд, я не бэкендер :)
@@maxgraph Спасибо) жду уроки по js и побольше бы марафонов или практики самой верстки:)
@@maxgraph так у JS тоже есть объект location, ну если очень надо именно на клиенте, то можно сделать его колбеком после отправки формы, если все хорошо уходит, или я ошибаюсь?
Сии как доллар 😅
как пофиксить то, что когда мы правому ползунку ставим right: 0 он теперь может встать левее левого ползунка
Не ставить right: 0, видимо. Нужно лучше понимать, что там у вас
@@maxgraph нет, просто мы прописали этот right чтобы слайдер не выходил за пределы блока, что необходимо. Но попробуйте с этим параметром скрестить два ползунка, один выходит за пределы другого (например правый может уехать левее левого). Уже все испробовал, так и не понял как пофиксить
А если нет больше папки distribute???(((( От куда качать, что делать????
С cdn можно скачать
@@maxgraph Спасибо, я уже успел найти ответ на этот вопрос!)))
Привет верстаю сайт из 13 страниц на сайте три ползунка плагин поддерживает не сколько?
Привет, да сколько угодно)
Мучения)
@@maxgraph а три ползунка на сайте диапазон цен разный у каждого слайдера получается не сколько конструкций в js
Не понял)
@@maxgraph я добавил цикл получилось создать не сколько ползунка в. Но в ползунках одинаковый диапазон цен. А мне надо разный диапазон цен для каждого ползунка понял?
Ничего не сработало, всё сделал как и автор
Смотреть надо)
Смотрел, не работает nouislider
Эх, а я думал, что на чистом js слайдер будем сами писать, а тут уже готовый... Жалко.((
Зачем писать, если уже есть готовое?)
@@maxgraph
Чтобы научиться, понять, как это работает изнутри.)
я не понимаю, ты перед тем как выкладывать видео ускоряешь чтоли ?
нет
@@maxgraph ясно ,тогда поздравляю ты очень видимо быстро соображаешь , я обычно ютуберов смотрю на 1.25, 1.5 , а тебя на обычной , а про свипер вообще замедлял O_o
Подскажи как ты его докручивал в плане отправки запроса на сервер ? тут видишь какая история, если ты будет слушать каждое изменение при перетаскивании то просто уйдет куча не нужных запросов, как при движении ползунка так и при вводе значения в input
Никак) моя задача как верстальщика сделать внешний вид
@@maxgraph а понял, просто думал ты и бэк делаешь одновременно