Создаём нормальный range

[loonlylokly]

Описание

Написал статью с подробной реализацией слайдера с помощью тэга <input type="range".

Closes #472

Превью: https://content-5441.dev.doka.guide/recipes/input-range-style/

Чек-лист

• Текст оформлен согласно руководству по стилю
• Ссылки на внутренние материалы начинаются со слеша и заканчиваются слэшем либо якорем на заголовок (/css/color/, /tools/json/, /tools/gulp/#kak-ponyat)
• Ссылки на картинки, видео и демки относительные (images/example.png, demos/example/, ../demos/example/)

[loonlylokly]

Это лишь черновой вариант, который в ближайшее время будет дописан. Хочу спросить на счёт объема. У меня получается около 1000 строк. Я понимаю, что большая часть это код, но всё-таки это достаточно много. И я не знаю как сократить. В теории можно перенести разделы с 2-мя и 4-мя ползунками в раздел "На практике".

И у меня 500 ошибка при попытке открыть превью((

[solarrust]

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

[solarrust]

Я понимаю, что рецепт ещё в процессе написания, поэтому я потрогала лапкой только самое его начало:

• Немного подсушила вступление, чтобы проще читалось
• Поменяла заголовок первого блока про термины и внутри актуализировала имена элементов, из которых состоит наш рендж. Опиралась на устоявшуюся в русскоязычной среде практику. Если ты согласен с такими наименованиями, пожалуйста, поправь это в тексте ниже.
• Убрала закрывающие слэши у одиночных тегов в тексте и в демках.
• Добавила двоеточие для ::before и ::after.
• Чуть подправила форматирование, но пока без фанатизма.
• Поменяла в JS в демках двойные кавычки на одинарные и убрала точки с запятой.
• Подправила опечатки в тексте.

У меня осталась пара вопросов:

1. Последние демки строятся на большом количестве переменных. Посмотри, пожалуйста, на них пристально, подумай, правда ли надо так много?
2. Не везде, но в некоторых местах, кажется, можно было бы использовать новые трюки типа inset и width + aspect-ratio. Как думаешь?

Пожалуйста, продолжай работу в комфортном тебе темпе. Мне очень хочется увидеть финальный результат =)

[github-actions]

Превью контента из 70d2dcc опубликовано.

[loonlylokly]

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

• Не везде, но в некоторых местах, кажется, можно было бы использовать новые трюки типа inset и width + aspect-ratio. Как думаешь?

1. Сначала их было 1-2, но потом я начал делать вертикальные варианты и горизонтальный в другую сторону. И понял, что если хочется универсальный рендж, который одновременно может быть сразу во все стороны и изменить нужно будет только два атрибута в html. Получился по сути полноценный компонент.
2. БОЛЬШОЕ СПАСИБО про inset. Я не знал об этом сокращении!!!! Просто супер, большое спасибо. aspect-ratio уже добавил, но не залил.

Переменные прям очень хорошо решают проблему поворотов элемента и не хотелось бы от них отказываться.

Правки в тексте обязательно учту и поправлю.
По поводу : и ; и /> это у меня vscode форматирует на автомате, и в целом привык к такому стилю, по предыдущей статье понял, что нужно поддерживать стиль доки и буду редачить, сейчас пока грязный вариант пишу.

Завис на последней проблеме. Обработка клика по трэку, для рэнджа с двумя ползунками, чтобы ближайший из двух ползунков перемещался к месту клика и изменялись данные, а ползунок становился активным. Реализую её и буду чистить текст и дописывать его.

Вот дэмку можно глянуть, но пока мне не нравиться js код и он не дописан для обработки клика по трэку.
https://codepen.io/lonlylokly/pen/YzoyMjE

[solarrust]

Вот дэмку можно глянуть, но пока мне не нравиться js код и он не дописан для обработки клика по трэку. https://codepen.io/lonlylokly/pen/YzoyMjE

Призову @HellSquirrel посмотреть на JS-код демки

[HellSquirrel]

хехе вообще не знала что так можно. Типичный патерн подписывать на какие-то события прямо в скрипте, так что я бы чуть исправила на (см ниже)

[HellSquirrel]

// handleInputRage as is
document.querySelector('.range-input').addEventlistener('input', handleInputRange)

[HellSquirrel]

Тут можно вот так переписать покороче (и убрать oniput)

const createHandler = (valueName) => (event) => {
    event.target.parentNode.parentNode.style.setProperty(
      valueName,
      event.target.value
    )
    event.target.nextElementSibling.value = event.target.value
  }
};

document.querySelectorAll('.range-input').forEach((rangeInput, idx) => {
    rangeInput.addEventListener('input', createHandler(`--value-${idx + 1}`));
});

[solarrust]

Пинг? 👀

[loonlylokly]

На месте, не хватает времени. Все демки в codepen готовы, нужно только дописать текст.
Это я для этого ПР недавно спрашивал, как обновить ветку локально, когда в ПР есть чужие коммиты. Надеюсь на этой неделе дописать.