Pixmora

Иконка ползунков для параметров

Три линии с бегунками Lucide: горизонтальный ряд параметров и вертикальный вариант для узкой панели.

Как применить иконку «Горизонтальные»

Три линии с бегунками Lucide: горизонтальный ряд параметров и вертикальный вариант для узкой панели.

Сценарий страницы: Открытие панели яркости и контраста. Основной вариант - lucide:sliders-horizontal, набор Lucide, автор Lucide Contributors, лицензия ISC.

Горизонтальные (sliders-horizontal): Три горизонтальные направляющие с бегунками. Фильтры фото, эквалайзер, параметры обработки.

Вертикальные (sliders-vertical): Те же бегунки, оси стоят вертикально. Узкая боковая панель регулировок.

В тулбаре редактора 20–24 px. В мобильной камере 28. Не используйте как замену settings, если речь о системных настройках аккаунта.

Это пример разметки без JS. Связь кнопки с панелью, aria-expanded и снятие hidden сделайте в проекте. Путь к SVG замените. Ползунок range - нативный, не картинка.

Лицензия ISC: https://github.com/lucide-icons/lucide/blob/main/LICENSE. Полный текст лицензии добавляется в metadata скачиваемого SVG.

Файлы SVG

Стандартные SVG с полным текстом лицензии ISC в metadata. Отдельных страниц под размер и цвет нет. PNG с выбранным размером и цветом готовится в браузере и требует JavaScript.

Полный текст лицензии ISC

Пример разметки

Доступная подпись: Параметры изображения. Имя файла в примере совпадает с основным вариантом; при смене варианта замените путь на скачанный файл.

<button type="button" aria-controls="adjust-panel" aria-expanded="false" aria-label="Параметры изображения">
  <img src="lucide-sliders-horizontal.svg" width="24" height="24" alt="">
</button>
<div id="adjust-panel" hidden>
  <label>Яркость <input type="range" name="brightness" min="0" max="100" value="50"></label>
</div>

Частые вопросы

Чем это отличается от settings?

settings - шестерёнка общих настроек. sliders - именно регулируемые параметры со шкалой.

Нужен ли filter рядом?

filter чаще про отбор списка. Для яркости и контраста изображения уместнее ползунки.