Как сделать - Ползунки диапазона
Узнать, как создавать пользовательские ползунки диапазона с помощью CSS и JavaScript.
По умолчанию:
Квадрат:
Круг:
Изображение:
Значение:Создание ползунка диапазона
Шаг 1) Добавить HTML:
Пример
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
Шаг 2) Добавить CSS:
Пример
.slidecontainer {
width: 100%; /* Ширина внешнего контейнера */
}
/* Сам ползунок */
.slider {
-webkit-appearance: none; /* Переопределение стилей CSS по умолчанию */
appearance: none;
width: 100%; /* Полная ширина */
height: 25px; /* Заданная высота */
background: #d3d3d3; /* Серый фон */
outline: none; /* Удалить контур */
opacity: 0.7; /* Установите прозрачность (для эффектов наведения мыши при наведении курсора) */
-webkit-transition: .2s; /* 0.2 секундный переход при наведении курсора */
transition: opacity .2s;
}
/* Эффекты наведения курсора мыши */
.slider:hover {
opacity: 1; /* Полностью отображается при наведении курсора мыши */
}
/*Ползунок обработчик (использовать -webkit- (Chrome, Opera, Safari, Edge) и -moz- (Firefox) чтобы переопределить внешний вид по умолчанию ) */
.slider::-webkit-slider-thumb {
-webkit-appearance: none; /* Переопределить внешний вид по умолчанию */
appearance: none;
width: 25px; /* Установите определенную ширину обработчика ползунка */
height: 25px; /* Высота обработчика ползунка */
background: #4CAF50; /* Зеленый фон */
cursor: pointer; /* Курсор при наведении */
}
.slider::-moz-range-thumb {
width: 25px; /* Установите определенную ширину обработчика ползунка */
height: 25px; /* Высота обработчика подзунка */
background: #4CAF50; /* Зеленый фон */
cursor: pointer; /* Курсор при наведении */
}
Редактор кода »
Шаг 3) Добавить JavaScript:
Создайте ползунок динамического диапазона для отображения текущего значения с помощью JavaScript:
Пример
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Отображение значения ползунка по умолчанию
// Обновите текущее значение ползунка (при каждом перетаскивании маркера ползунка)
slider.oninput = function() {
output.innerHTML = this.value;
}
Редактор кода »
Круглый ползунок
Чтобы создать круглый ползунок, используйте свойство border-radius. Совет: Установите высоту ползунка на другое значение, чем ползунок большого пальца, если вы хотите неравные высоты (15px и 25px в этом примере):
Пример
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
Редактор кода »
Ползунок значок/изображение
Чтобы создать значок/изображение ползунка, используйте свойство background и вставить url адрес изображения:
Пример
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 23px;
height: 24px;
border: 0;
background: url('contrasticon.png');
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 23px;
height: 25px;
border: 0;
background: url('contrasticon.png');
cursor: pointer;
}
Редактор кода »
