Как сделать ползунок в css
Перейти к содержимому

Как сделать ползунок в css

  • автор:

Как сделать ползунок в css

Блог веб разработки статьи | видеообзоры | исходный код

webfanat вконтакте webfanat youtube

Стилизация ползунка

Стилизация ползунка

Добрый день! Тема сегодняшней рубрики css — стилизация ползунка(поля range). Итак, приступим к рассмотрению!

Для начала создадим ползунок:

Видим ползунок со стандартными стилями, причем в разных браузерах он будет отображаться по разному.

Зададим ему ширину 200px.

input[type=range]

Здесь помимо ширины мы указали специальное свойство appearance которое отвечает за базовые стили отображения элемента вашей операционной системы. Значение ‘none’ указывает на то что мы эти стили сбрасываем. По итогу поле range будет отображаться не полностью. Это нам необходимо чтобы задать свои собственные стили для ползунка. Заметьте что вместе со свойством ‘appearance’ мы используем вендорные префиксы -webkit — Для браузеров на движке хромиум(google chrome) и -moz — для браузера mozilla firefox. Сразу отмечу что мы нацелены только на современные браузеры без всяких там IE(Internet Explorer).

Теперь давайте попробуем стилизовать ползунок, делается это через специальные псевдоселекторы.

input[type=range] < width: 200px; -webkit-appearance: none; -moz-appearance: none; appearance: none; >input[type=range]::-webkit-slider-runnable-track < border-radius: 10px/100%; height: 7px; border: 1px solid cyan; background-color: #fff; >input[type=range]::-webkit-slider-thumb < background: #ecf0f1; border: 1px solid cyan; border-radius: 10px/100%; cursor: pointer; width:15px; height: 15px; -webkit-appearance: none; margin-top: -4px; >input[type=range]::-moz-range-track < border-radius: 10px/100%; height: 5px; border: 1px solid cyan; background-color: #fff; >input[type=range]::-moz-range-thumb < background: #ecf0f1; border: 1px solid cyan; border-radius: 10px/100%; cursor: pointer; >

Для браузеров webkit(google chrome, chromium) используются псевдоселекторы -webkit-slider-runnable-track, -webkit-slider-thumb, а для mozilla firefox -moz-range-track, -moz-range-thumb.

track — на конце каждого псевдоселектора отвечает за стилизацию полосы ползунка, а thumb за сам элемент ползунка. Отображение в разных браузерах может немного отличаться но в целом по стилистике будет одинаковым. Можете взять пример и поиграться со стилями!

Еще один пример стилизации:

input[type=range] < width: 200px; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; overflow: hidden; height: 7px; >input[type=range]::-webkit-slider-runnable-track < height: 7px; background-color: blue; >input[type=range]::-webkit-slider-thumb < background: #ecf0f1; cursor: pointer; width:15px; height: 15px; -webkit-appearance: none; margin-top: -4px; box-shadow: -200px 0 0 200px #43e5f7; >input[type=range]::-moz-range-track < height: 7px; background-color: blue; >input[type=range]::-moz-range-thumb

Здесь получили другое отображение ползунка с эффектом выделения выбранного диапазона.

На этом в принципе у меня все. Если статья оказалась для вас полезной, подписывайтесь на группу Вконтакте и переходите на мой канал Youtube.

Всем удачи и здоровья!

Оцените статью:
Статьи
  • Работа с выделением текста и курсором.
  • transform CSS
  • HTML Drag-and-drop
  • кодирование JavaScript
  • файлы GIT
  • html во весь экран
  • CSS supports
  • meter html
Комментарии

Внимание. Все комментарии проходят модерацию перед публикацией!

В данном разделе пока нет комментариев!

© 2017-2024 webfanat.com Все права защищены.

Реклама

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm

Добавить приложение на рабочий стол

25 удивительных дизайнов ползунков на CSS

Ползунок диапазона или Range slider — это очень интуитивно понятный пользовательский интерфейс с одним или двумя переключателями, позволяющий пользователю выбирать значение в ограниченном диапазоне.

Пользователь перетаскивает маркер вдоль одного измерения, чтобы установить значение.

Типичный пример такого слайдера обычно можно найти в палитре цветов, где мы можем перетащить стрелку влево и вправо, чтобы выбрать правильное значение RGB.

Итак, вот 25 примеров ползунков диапазона CSS, которые помогут пользователю интерактивно и легко изменить значения в выбранном диапазоне.

Как сделать ползунок от и до?

5d9eebd897bb7913495295.png

Верстаю интернет магазин, в дизайне есть такой момент, как ползунок цены от и до, с таким еще не сталкивался, глянул как такие ползунки реализованы на крупных интернет магазинах — там все через дивы или на табличке.
Как такое можно сделать?

  • Вопрос задан более трёх лет назад
  • 11551 просмотр

Комментировать

Решения вопроса 0

Ответы на вопрос 2

criticalsomethoughts

Robert-critical-thoughts @criticalsomethoughts

UI\UX Developer, Project Manager

5d9eecd05a35d367909611.png

https://atuin.ru/blog/varianty-oformleniya-jquery-. — все варианты погуглил за вас/ 5й примерно похож.

Ответ написан более трёх лет назад

Комментировать

Нравится 2 Комментировать

Ankhena

Нежно люблю верстку

Просто верстка, с которой потом можно делать что угодно на js

Ответ написан более трёх лет назад

Комментировать

Нравится 2 Комментировать

Создание ползунка Range slider

Сегодня мы с вами научимся верстать range slider. Иначе говоря, ползунок для выбора количества чего-либо. Подобные ползунки часто используются, преимущественно, в интернет магазинах. но в них есть загвоздка. Изначально, не предусматривает стилизацию. Это мы с вами сегодня и исправим. Для создания пользовательского ползунка вам надо перекопировать следующие часи кодов:

.range_box < position: relative; display: flex; justify-content: center; align-items: center; padding: 20px; background-color: #c9c9c9; border-radius: 40px; >.range < width: 400px; height: 15px; appearance: none; background: #edf1f4; outline: none; border-radius: 15px; overflow: hidden; >.range::-webkit-slider-thumb < appearance: none; width: 15px; height: 15px; background: #fff; border-radius: 50%; border: 2px solid #022f52; box-shadow: -407px 0 0 400px #022f52; cursor: pointer; >.rangeValue

document.querySelectorAll('.range_box input').forEach(item => < item.addEventListener('mousemove', function() < this.closest('.range_box').querySelector('.rangeValue').innerHTML = this.value; >) >);

После копирования вышеупомянутых кусков кода, у вас должен появиться такой ползунок:

Наш ползунок готов. Все изменять стили CSS по своему желанию. Для корректной работы ползунка, не рекомендуем вносить изменения в структуру html или JavaScript кода.

г. Тула, ул. Некрасова, 7, оф. 315

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *