Вопрос или проблема
Я работаю над настройкой ползунков для сайта, который я создаю. Единственный способ, который я знаю, чтобы добавить другой цвет для обеих сторон ползунка, это добавить тень к бегунку и затем скрыть переполнение. Однако я хотел сделать бегунок больше, чем полоса, но я не могу этого сделать, не отключив переполнение, что позволит тени выйти за пределы коробки.
Я пытался отключить переполнение только для бегунка и включить переполнение только для тени, но ни один из вариантов не сработал. Ниже приведен мой код.
HTML:
<div class="slider">
<input type="range" class="customRange" id="rangeInput1" name="rangeInput1" min="0" max="100" value="50"
oninput="amount1.value=rangeInput1.value">
<output id="amount1" name="amount1" for="rangeInput1">50</output>
CSS:
.customRange {
-webkit-appearance: none;
background-color: #F998F6;
height: 20px;
overflow: hidden;
width: 400px;
border-radius: 50px;
}
.customRange::-webkit-slider-thumb {
-webkit-appearance: none;
background: #92008D;
border-radius: 50%;
box-shadow: -210px 0 0 200px #DD00D6;
cursor: pointer;
height: 20px;
width: 20px;
border: 0;
}
Возможно, существует другой способ добавить два разных цвета для разных сторон, потому что тогда я мог бы включить переполнение, но у меня просто нет идей.
Вы можете сделать это с помощью небольшого JavaScript. Для этого вам нужно удалить метод тени, а также использовать градиенты, чтобы заполнить разные части полосы прокрутки. Вы можете добавить градиент в ваш CSS следующим образом:
<style>
.customRange {
-webkit-appearance: none;
width: 400px;
height: 20px;
border-radius: 50px;
background: linear-gradient(to right, #DD00D6 50%, #F998F6 50%);
outline: none;
transition: background 0.3s;
}
.customRange::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #92008D;
border-radius: 50%;
height: 30px;
width: 30px;
cursor: pointer;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.customRange::-webkit-slider-runnable-track {
-webkit-appearance: none;
height: 20px;
background: transparent;
}
.customRange::-moz-range-track {
background: transparent;
}
.customRange::-ms-track {
background: transparent;
border-color: transparent;
color: transparent;
}
.customRange:active {
background: linear-gradient(to right, #DD00D6 var(--value), #F998F6 var(--value));
}
</style>
и после добавления этих стилей вам нужно добавить функцию JScript, которая изменяет градиент фона по мере перемещения ползунка.
<script>
const rangeInput = document.getElementById("rangeInput1");
const updateBackground = () => {
const value = rangeInput.value;
rangeInput.style.background = `linear-gradient(to right, #DD00D6 ${value}%, #F998F6 ${value}%)`;
};
rangeInput.addEventListener('input', updateBackground);
</script>
Таким образом, вы можете изменить размер бегунка, не имея дело с переполнением.
.
Ответ или решение
Чтобы создать настраиваемый ползунок с увеличенным размером его "thumb" (ползунок), который при этом не будет перекрывать тени, необходимо использовать градиентный фон вместо теней. Это решение позволяет избежать проблем с переполнением и одновременно добиться желаемого визуального эффекта. Рассмотрим данный подход более подробно.
Шаг 1: Основная разметка HTML
Ваша HTML-разметка выглядит правильно. Вы создаете элемент input типа "range" и output для отображения значения:
<div class="slider">
<input type="range" class="customRange" id="rangeInput1" name="rangeInput1" min="0" max="100" value="50" oninput="amount1.value=rangeInput1.value">
<output id="amount1" name="amount1" for="rangeInput1">50</output>
</div>Шаг 2: Стилизация CSS
Измените ваш CSS-код, чтобы использовать градиенты и адаптировать размеры ползунка. Вот пример, который можно использовать:
.customRange {
-webkit-appearance: none; /* Убираем стандартный вид */
width: 400px;
height: 20px;
border-radius: 50px;
background: linear-gradient(to right, #DD00D6 50%, #F998F6 50%);
outline: none;
transition: background 0.3s;
}
.customRange::-webkit-slider-thumb {
-webkit-appearance: none; /* Убираем стандартный вид */
background-color: #92008D;
border-radius: 50%; /* Для создания округлой формы */
height: 30px; /* Увеличение высоты ползунка */
width: 30px; /* Увеличение ширины ползунка */
cursor: pointer;
position: relative; /* Позиционирование относительно текущего положения */
top: 50%;
transform: translateY(-50%); /* Центрируем вертикально */
}
.customRange::-webkit-slider-runnable-track {
-webkit-appearance: none; /* Убираем стандартный вид */
height: 20px;
background: transparent; /* Делаем трек прозрачным, чтобы видеть градиент */
}
.customRange:active {
background: linear-gradient(to right, #DD00D6 var(--value), #F998F6 var(--value)); /* Динамическое изменение градиента */
}Шаг 3: Скрипт на JavaScript
Теперь необходимо добавить JavaScript-код для динамического обновления фона ползунка в зависимости от его значения. Это позволит обновлять градиент фона при изменении значения:
const rangeInput = document.getElementById("rangeInput1");
const updateBackground = () => {
const value = rangeInput.value;
rangeInput.style.background = `linear-gradient(to right, #DD00D6 ${value}%, #F998F6 ${value}%)`;
};
// Инициализация фона сразу
updateBackground();
// Добавляем обработчик события на изменение значения ползунка
rangeInput.addEventListener('input', updateBackground);Заключение
Таким образом, вместо использования тени, мы применяем линейный градиент, который позволяет визуально разделять разные стороны ползунка. Увеличение размерности "thumb" больше ширины трека не пойдет вразрез с выходом за пределы, поскольку градиент сам по себе изменяет цвет в зависимости от текущего положения ползунка.
Этот подход не только решает проблему с переполнением, но и делает интерфейс более привлекательным и современным. Вы можете экспериментировать с цветами, размерами и другими стилями, чтобы добиться желаемого эффекта для вашего сайта.