No video
JS-плагины №10. Range слайдер для цены - nouislider.js
Рет қаралды 20,264
Күн бұрынПривет! В этом видео разберем, как же сделать простой и удобный 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
@matwa2260 6 ай бұрын
Мужик, реально помог работягам разобраться! Респект тебе.
@Rob-bz2rp 3 жыл бұрын
Ты только что меня спас !!!
@BEKS705 2 ай бұрын
Чувак!!! Огромнейшее спасибо за видос!!
@user-Arvard 4 ай бұрын
Макс как всегда, на высоте! ) спасибо)
@etherium-gold 5 ай бұрын
Я только начинаю свой путь в it и такие видео мои учителя.
@stain-fit 2 жыл бұрын
Это самое лучшее, что я видел 😍, спасибо тебе Надеюсь твой канал никуда не пропадёт и ты не забросишь
@maxgraph 2 жыл бұрын
Спасибо) бросать не планирую))
@user-pf6jf9oz2t 2 жыл бұрын
чё , прям САМОЕ лучшее "😍😍" ?
@user-eg1ul4rm2p 4 ай бұрын
Спасибо, отличный разбор!
@taeyanglee3283 Жыл бұрын
Спасибо огромное, столько времени маялась с тем, чтобы ползунки не вылезали за границу! И здесь нашла решение
@PuzMax 2 жыл бұрын
Долго не мог найти как сделать такой слайдер, очень круто все показано. Огромное спасибо )
@maxgraph 2 жыл бұрын
Пожалуйста)
@alexandrgusletsov2567 9 ай бұрын
Спасибо ! Всё мега чётко ! прокачал Максим ,как обычно на уровне
@vollex_frontend 3 жыл бұрын
Спасибо тебе! Сильно выручил! Не переставай выпускать ролики!)
@maxgraph 3 жыл бұрын
Пожалуйста))
@temamx Жыл бұрын
Лайк! Очень полезное видео про range инпуты
@user-natal04ka Ай бұрын
Все получилось, спасибо!!!
@arkanot02 Жыл бұрын
Большое спасибо, друг, у меня это сработало в моем проекте без проблем, я ценю это.
@Anatoli-bq1pe Жыл бұрын
Благодарю! Классный видос!
@serhiiretsenko2237 3 жыл бұрын
Новая годнота от Макса подъехала! =)
@maxgraph 3 жыл бұрын
спасибо))
@abouteverything3118 Жыл бұрын
Хорошее видео
@evgeniivavilo8678 3 жыл бұрын
очень полезная штука. сделал на сайте по вашему видео спасибо.
@maxgraph 3 жыл бұрын
Пожалуйста)
@olgam414 Жыл бұрын
Спасибо за подробное видео!!!
@maxgraph Жыл бұрын
Пожалуйста)
@konstantinokhlynin 3 жыл бұрын
Супер полезное видео!
@alizhilov1391 3 жыл бұрын
спасибо большое, очень полезное видео вы очень помогли мне!!!
@maxgraph 3 жыл бұрын
Пожалуйста)
@dimamedny7968 3 жыл бұрын
Спасибо, все просто и понятно👍
@maxgraph 3 жыл бұрын
Пожалуйста)
@dimamedny7968 3 жыл бұрын
@@maxgraph только сейчас уже нет папки со скриптами стилями плагина, надо cdn искать
@JB-sv8oh 3 жыл бұрын
Очень полезно!!!!!! спасибо!!!
@maxgraph 3 жыл бұрын
Пожалуйста)
@vitalb7907 3 жыл бұрын
Давай следующий урок, как работать с такой корзиной с локальным-хранением данных) еще можно добавить функционал типу "избранные". тоже на уровне локального-стореджа
@maxgraph 3 жыл бұрын
Прямо следующий не могу, уже в планах другое :) Но вообще да, сделаю
@vitalb7907 3 жыл бұрын
@@maxgraph ну я к тому стоит ли плагин целый использовать. возможно знаешь как и нативносамому все написать )
@maxgraph 3 жыл бұрын
@@vitalb7907 конечно стоит) плагин писали явно люди умнее, тестировали миллионы людей. Это точно надежнее, чем самому велосипеды пилить.
@vitalb7907 3 жыл бұрын
@@maxgraph аргумент :D
@maxgraph 3 жыл бұрын
@@vitalb7907 ну по мне так точно аргумент)
@user-jo6ug2hj1e 2 жыл бұрын
огромное спасибо!
@maxgraph 2 жыл бұрын
Пожалуйста)
@ivanryduch5084 2 жыл бұрын
Максим , спасибо большое за урок! У Вас не случайно видео как этот слайдер сделать рабочим ( то есть что бы он мог сортировать ). Спасибо
@maxgraph 2 жыл бұрын
Нет такого)
@user-qp6yp4qk9i Жыл бұрын
спасибо
@maxgraph Жыл бұрын
Пожалуйста)
@user-ly1rr9tq6g 2 жыл бұрын
Спасибо. Помог.
@maxgraph 2 жыл бұрын
Пожалуйста)
@user-jg8sf6ky5y 3 жыл бұрын
Лайк, надеюсь на чистом js.
@maxgraph 3 жыл бұрын
Конечно на чистом :)
@deniskotov 3 жыл бұрын
Макс, суперполезно! Огромная тебе благодарность. P.S. Кстати, не в курсе, как теперь достать собранные файлы noUiSlider'a? Разрабы в 15 версии убрали из репозитория папку дистрибьют и переместили всё в дист, но на гитхабе этой папки нет. Чтобы получить эти файлы, нужно самостоятельно собрать проект? Или где их взять?
@maxgraph 3 жыл бұрын
Привет, спасибо) я просто ищу ссылки на cdn и оттуда достаю код
@deniskotov 3 жыл бұрын
@@maxgraph понял, спасибо
@dokerm9048 3 жыл бұрын
Максим спасибо за подробное видео, хотелось бы еще узнать как сделать, чтобы при выборе цены значения сохранялись в инпутах (макс. и миним. цена) в атрибуте value, для последующей их обработки к примеру с помощью ajax ?
@user-pf6jf9oz2t 2 жыл бұрын
сделал всё норм, только не понимаю почему у меня и у тебя не работает в самом инпуте параметр max- можно ввести число больше заданного
@yulya1348 Жыл бұрын
Максим, добрый вечер! С чем может быть связан баг: линия, по которой перемещается ползунок, в браузере отображается толстой, а в режиме разработчика - тонкой в 1px? Классу .noUi-target задана высота 1px.
@BMikel 3 жыл бұрын
спасибо за годный контент. допустим потом эту верстку натягивать на opencart/woocommerce, а там ведь уже этот функционал из коробки идет. Логичный вопрос возникает, этот плагин уже не нужен будет? или нужно будет его оставить, но подстраивать под CMS?
@maxgraph 3 жыл бұрын
ну если там все это есть и кастомизируется также - не нужен :)
@user-mn2fb3ri8z 2 жыл бұрын
Здравствуйте. Не получается стилизовать класс noUi-target. Что делать?
@maxgraph 2 жыл бұрын
пишите в группу телеграма с кодом к нам) посмотрим
@ant3413 3 жыл бұрын
А почему вы SCSS не использовали?там же можно через position:relative двигать элементы по всей страницы.Например если хотите карточку передвинуть на вверх пишите position:relative top:522px и все даже можно без JS PHP такие вещи делать
@maxgraph 3 жыл бұрын
Элементы с позишн релатив двигать через топ не стоит. Их разсер и позиция остаются на месте, лишь внешне сдвигаются, поэтому можно получить нежелательный эффект. А scss - просто
@workproject4018 3 жыл бұрын
Спасибо! А если не нужен инпут, но нужно менять значение цены в отдельному блоке по типу Ваших инпутов? Можно конечно запретить ввод, убрать рамки и будет выглядеть как текстовое поле. Но можно сделать вывод в обычный спан например?
@workproject4018 3 жыл бұрын
Всё, разобрался )
@Serejka69 3 жыл бұрын
Добрый день, подскажите пожалуйста, есть ли возможность сделать, чтобы при нажатии на инпут форму старое значение не нужно было удалять, а можно было сразу вводить своё, изначально с placeholder у меня это получилось, но после установки стартовых значений в js такая возможность пропала. Спасибо за видео, очень помогло!
@maxgraph 3 жыл бұрын
Нет, так не работает к сожалению)
@user-cf3sd5wq1d Жыл бұрын
все сделал до 13:36 а бегунок не появился. Ошибки в терминале не показывает тоже. в Браузере где див слайдера в разметке появился noUd target и т д. если наводить на разметке то место просто пустое не видно ползунка. в чем проблема??? ну я не в libs закинул 2 файла мини, а в папку с js пути вроде норм указал, раз в браузере появился noud target и т д в разметке.
@maxgraph Жыл бұрын
Сложно угадать что там(
@user-cf3sd5wq1d Жыл бұрын
@@maxgraph Да все спасибо я исправил) теперь пытаюсь с activ focus hover разобратсья как делать)
@MaksssHome 3 жыл бұрын
Привет) Можешь пожалуйста записать урок, как сделать чтобы после корзины нас переадресовывало на страницу order, как в крупных интернет магазинах, и там уже идёт заполнение форм, как это все устроено рассказать и показать, спасибо)
@maxgraph 3 жыл бұрын
Привет! Ну это уже бэкенд, я не бэкендер :)
@MaksssHome 3 жыл бұрын
@@maxgraph Спасибо) жду уроки по js и побольше бы марафонов или практики самой верстки:)
@alym.aleksey 3 жыл бұрын
@@maxgraph так у JS тоже есть объект location, ну если очень надо именно на клиенте, то можно сделать его колбеком после отправки формы, если все хорошо уходит, или я ошибаюсь?
@igorsemenov5843 3 жыл бұрын
#10:58 а где написано, что вы подключили ЦСС файл - range-slider.css ?
@maxgraph 3 жыл бұрын
видимо нигде) значит я не использовал его
@igorsemenov5843 3 жыл бұрын
@@maxgraph но вы стиле меняли, ренж слайдеру, я просто новичок, все делал по вашем рекомендациям, прослушал 3 раза и не увидел где вы подключили цсс файл (ренж слайдер)
@vitalb7907 3 жыл бұрын
А без плагина можно такое сделать?)
@maxgraph 3 жыл бұрын
Ну раз плагином можно - то и без можно :)
@peregrinus4306 Жыл бұрын
как пофиксить то, что когда мы правому ползунку ставим right: 0 он теперь может встать левее левого ползунка
@maxgraph Жыл бұрын
Не ставить right: 0, видимо. Нужно лучше понимать, что там у вас
@peregrinus4306 Жыл бұрын
@@maxgraph нет, просто мы прописали этот right чтобы слайдер не выходил за пределы блока, что необходимо. Но попробуйте с этим параметром скрестить два ползунка, один выходит за пределы другого (например правый может уехать левее левого). Уже все испробовал, так и не понял как пофиксить
@user-ed8eb6cx7o 2 жыл бұрын
Ничего не сработало, всё сделал как и автор
@maxgraph 2 жыл бұрын
Смотреть надо)
@user-ed8eb6cx7o 2 жыл бұрын
Смотрел, не работает nouislider
@alexwild5605 3 жыл бұрын
А если нет больше папки distribute???(((( От куда качать, что делать????
@maxgraph 3 жыл бұрын
С cdn можно скачать
@alexwild5605 3 жыл бұрын
@@maxgraph Спасибо, я уже успел найти ответ на этот вопрос!)))
@user-pd3vv1ij6b 3 жыл бұрын
Привет верстаю сайт из 13 страниц на сайте три ползунка плагин поддерживает не сколько?
@maxgraph 3 жыл бұрын
Привет, да сколько угодно)
@user-pd3vv1ij6b 3 жыл бұрын
Мучения)
@user-pd3vv1ij6b 3 жыл бұрын
@@maxgraph а три ползунка на сайте диапазон цен разный у каждого слайдера получается не сколько конструкций в js
@maxgraph 3 жыл бұрын
Не понял)
@user-pd3vv1ij6b 3 жыл бұрын
@@maxgraph я добавил цикл получилось создать не сколько ползунка в. Но в ползунках одинаковый диапазон цен. А мне надо разный диапазон цен для каждого ползунка понял?
@user-pf6jf9oz2t 2 жыл бұрын
я не понимаю, ты перед тем как выкладывать видео ускоряешь чтоли ?
@maxgraph 2 жыл бұрын
нет
@user-pf6jf9oz2t 2 жыл бұрын
@@maxgraph ясно ,тогда поздравляю ты очень видимо быстро соображаешь , я обычно ютуберов смотрю на 1.25, 1.5 , а тебя на обычной , а про свипер вообще замедлял O_o
@vovergg 2 жыл бұрын
Эх, а я думал, что на чистом js слайдер будем сами писать, а тут уже готовый... Жалко.((
@maxgraph 2 жыл бұрын
Зачем писать, если уже есть готовое?)
@vovergg 2 жыл бұрын
@@maxgraph Чтобы научиться, понять, как это работает изнутри.)
@megafalos850 Жыл бұрын
Подскажи как ты его докручивал в плане отправки запроса на сервер ? тут видишь какая история, если ты будет слушать каждое изменение при перетаскивании то просто уйдет куча не нужных запросов, как при движении ползунка так и при вводе значения в input
@maxgraph Жыл бұрын
Никак) моя задача как верстальщика сделать внешний вид
@megafalos850 Жыл бұрын
@@maxgraph а понял, просто думал ты и бэк делаешь одновременно
MaxGraph - cайты как страсть
Рет қаралды 5 М.
Harley Quinn with the Joker
Рет қаралды 22 МЛН
Travels Code
Рет қаралды 11 М.
MaxGraph - cайты как страсть
Рет қаралды 4,8 М.
Aida Drogan #BlondieCode
Рет қаралды 10 М.
MaxGraph - cайты как страсть
Рет қаралды 10 М.