Может кому будет полезно - формула вычисления позиции: показатель.style.left = текущее_значение*(ширина_родителя-50)+"px", при условии, что текущее_значение в диапазоне от 0 до 1, а 50 зависит от размера ползунка и range (50, при ширине ползунка 16px, 25 при 8 px). (ширину можно получить через getComputedStyle)
У меня тоже в VSC style заменяется на getElementsByClassName; console.log('Выходит, что я тоже криворукий!'); Автору видео большое почтение и респект за понятное разъяснение. Таких уроков очень и очень мало. Продолжай в том же духе! Молодец!!!
отличное объяснение, спасибо, в последнее время смотрю практически только ваш контент - а насчет замены style на другие слова - это боль, я каждый раз ругаюсь, приходится применять ctrl+z
You prolly dont give a shit but if you guys are bored like me during the covid times you can stream all the latest movies on instaflixxer. Been watching with my gf these days =)
У меня был небольшой опыт написания подобного элемента. Я поймал сам элемент ползунка и скриптом добавил ему потомка див-элемент. Этому диву задал абсолютное позиционирование. Остаётся отследить изменение значения и вписать в этот элемент.
Александр, если функцию именовать (я назвал ее go ) и вызвать вначале, то отдает undefined. Я решил это привязкой вызова к контексту : go.call(range); правильно ли, или есть более изящный способ? UPD: функция отдает undefined потому что при вызове вне объекта range она теряет контекст (this). Более элегантный способ нашел - использовать bind. Вот что получилось в итоге (понимаю, что все очевидно, но, может, кому-то будет полезно): let range = document.querySelector('.number'); // получили input range let rangeNum = document.querySelector('.range-num'); // получили квадратик сверху для цифр function go() { // объявил функцию go (она имеет в себе this, значит, без контекста ее нельзя использовать) rangeNum.style.left = this.value - 15 + 'px'; rangeNum.innerHTML = this.value; }.bind(range); // здесь мы жестко привязали функцию go к контексту объекта range. Теперь this = range при любом вызове. go(); // вызвал функцию go (чтобы при загрузке страницы отображался нолик) range.oninput = function() { go() } // Теперь при каждом изменении range будет срабатывать функция go с привязкой к контексту range. Спасибо!
честно говоря, лучше выложить код на codepen - здесь тяжело смотреть код. Ваш вариант конечно имеет право быть - по оптимальности - тяжело с мобильного оценить код здесь.
Спасибо, Александр. Решил повторить, и разобраться, почему не выравнивалось codepen.io/BlackStar1991/pen/ywxVyG Вообщем, если задавать в оббертке, с text-align: center; то всё становиться хорошо. (Для WebKit браузеров, в других оно выглядит иначе)
добрый день. очень нравятся ваши видео! скажите, как я могу полностью заменить бегунок своим дивом, что бы стилизовать его уже без префиксов при это покаатели счетчика будут меняться по шагам step.
Спасибо. пересматриваю все плейлисты! Говорили можно подкидывать идейки! Т.к. затронули импуты, то может авто техтериа, чтобы изменялась высота под текст и при стирании текста в исходную, ну, как зис поле для комментов.
Александр, очень интересно было бы посмотреть на вашу реализацию сортировки. Например, в портфолио или в товарной номенклатуре. Интересно как бы это можно было максимально просто реализовать на нативном js.
@@itgid но было бы очень интересно! Например, есть ведь в сетке css flex и grid свойство order. Можно ведь присваивать через js различные значения order flex-элементам в зависимости от нажатой кнопки фильтра. Я бы даже посмотрел такую реализацию в продолжении вашего урока по интернет-витрине на гугл таблицах. Обычно ведь и каталог делается не с помощью онлайн таблиц. Мне кажется, опыт такого прикладного js был бы очень интересен на канале для аудитории. Я не настаиваю на order, но я, например, другого решения не вижу, может быть ваш опыт подсказал бы изящное решение))
@@АлександрМарченко-ы4к увы, даже элементарное упорядочивание массива по двум параметрам при выборке из базы делается намного проще чем эмулировать это в JS. И быстрее. Подумаю над вопросом, но это в любом случае будут "велосипеды"
Так все-таки, как можно избавиться от эффекта "обгона" слайдера? Пытаюсь изменить длину блока в зависимости от положения слайдера. Длинна увеличивается по экспоненте. Хотя в коде числовое значение this.Value совпадает со значением длинны. А визуально длинна больше.
Кстати о таком ползунке думал недавно, хотел реализовать) углубился в jquery, а его оказывается можно сделать видимо на чистом js) посмотрю ролик, опишу как понравилось
@@itgid т.е там плагины могут быть рабочими раз они остаются на сайтах в неизменном старом виде? Там же огонь плагины, причем очень мало строк кода, достаточно скачать 3 библиотеки и можно создавать интерфейсы для разных приложений на уровне гугла или яндекса
Нужная, если вам нужно, например, знать какие фичи поддерживаются, тач устройство или нет. Подходит, что бы фиксить какие проблемы со стилями на телефонах.
Можна уроки в CodePen записувати там і зручно і код можна після уроку демонструвати. у мене по ходу виконання виникло питання можливо трохи не по темі заняття але всеж: я в прикладі замість звичайної функції використав стрілочну range.oninput = () => { console.log(this.value );} ось так і в мене замість значення з повзунка range відобразилось underfined, з звичайною функцією проблем не було. Так от в чому проблема і чи це якось повязано з тим що стрілочні функції беруть this з зовнішнього лексичного середовища???
Жодної проблеми, ви відповіли самі на своє питання в останньому реченні. Не варто використовувати стрілочні функції всюди як заміну оголошенню, вони мають своє призначення.
@@ПростоЕвгений-е3б this використовується в стрілочних функціях в цьому якраз їхня фішка, при використанні стрілочної функції відсутня втрата контексту в callback функціях
14:15 а так интересно получается потому, что JS понимает это выражение как строку. А значит, например 20 + 10 + рх = 2010рх. Динамическая типизация это же неоспоримое преимущество! (минутка хейта JS)
Так это ж удобно) Чтобы исправить это нужно добавить один символ, зато в похожей ситуации можно не приводить числовое значение к строке, чтобы добавить 'px'
@@странствие тут дело не в одном символе. Динамическая типизация выглядит удобной, но, в последствии, приносит кучу проблем. Настолько кучу, что целый язык выдумали, Type Script, чтобы бороться с "удобствами" динамической типизации в JS.
@@странствие основных две: 1) неявное приведение типов иногда подкидывает головную боль, особенно если мало опыта. Но с этим жить можно. 2) необходимость проверки параметров функций, если предполагается, что ей будут пользоваться другие люди. И вот это в крупных проектах становится серьёзной проблемой. Ведь я вынужден проконтролировать, что пользователь моей функции правильно передаст параметры нужного типа. В языках со строгой типизацией за меня это сделает компилятор. Это, собственно, одна из основных причин появления Type Script. Ну и так, по мелочи: указание типа переменной, параметра функции и т.п. помогает документировать код, ведь уже при объявлении я понимаю, какого типа данные тут должны быть.
@@simplewebdev1098 1) ну о какой головной боли ты говоришь-то? Обычно ошибку сразу заметно, так что она решается за пару секунд. 2) а смысл их проверять? используй toString() или унарный плюс, вот и все. Или можно пример кода, а то я не совсем понимаю
