Настройте ползунок ввода с помощью JavaScript и CSS, чтобы сделать свой веб-сайт или веб-приложение уникальным. Не все методы CSS поддерживаются всеми браузерами, но вы можете использовать некоторые из них, используя JavaScript и расширяя совместимость браузера. Несмотря на то, что совместимость браузера ограничена, он будет работать практически со всеми современными браузерами, но вы всегда можете использовать резервный метод в случае проблем с совместимостью.
Сначала создайте HTML для ползунка ввода.
<div class="slider"> <div class="slider-value"> <span></span> </div> <div class="field"> <input type="range" min="0" max="100" value="50" steps="1"> </div> </div>
Затем добавьте CSS для стилизации поля ползунка. Вы можете пойти со своим дизайном.
.slider{
width: 400px;
height: 80px;
background: white;
border-radius: 40px;
padding: 0 45px;
}
Теперь, чтобы отобразить значок капли воды, нам нужно присвоить position: relative; его родительскому элементу div, имеющему класс slider.value. Элемент span внутри div будет нашей пиктограммой. Затем присвойте position: absolute; диапазону, чтобы он выровнялся относительно своего родительского div.
.slider-value{
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.slider-value span{
position: absolute;
height: 45px;
width: 45px;
color: white;
font-size: large;
font-weight: 500;
top: -35px;
transform: translateX(-50%) scale(0);
transform-origin: bottom;
transition: transform 0.3s ease-in-out;
line-height: 55px;
z-index: 2;
}
Чтобы сделать значок капли, используйте transform: ratateZ(); , чтобы повернуть значок и сделать его углы круглыми, кроме нижнего. Мы делаем это с помощью свойства border-radius и устанавливаем 50% 50% 0 50%. Теперь икона готова. Чтобы отобразить диапазон, нам нужно присвоить свойству z-index значение -1, чтобы его слой отображался ниже текста. Мы используем ::after, потому что не хотим постоянно отображать значок.
.slider-value span::after{
position: absolute;
content: "";
height: 45px;
width: 45px;
left: 50%;
background: darkblue;
transform: translateX(-50%) rotateZ(45deg);
line-height: 55px;
z-index: -1;
border-radius: 50% 50% 0 50%;
border: 3px solid white;
}
Теперь мы используем свойство background: linear-gradient(), чтобы задать цвет входной дорожке. Для этого нам нужно избежать стиля по умолчанию для элемента ввода, -webkit-appearance: none; удалит все стили элемента по умолчанию.
.field{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.field input{
-webkit-appearance: none;
height: 10px;
width: 100%;
background: linear-gradient(to right, darkblue 0%, darkblue 50%, grey 50%, grey 100%);
border-radius: 5px;
outline: none;
border: none;
}
Селектор ::-webkit-slider-thumb можно использовать для оформления бегунка ползунка, но совместимость плохая, это не стандарт, поэтому он не поддерживается во многих браузерах, включая Firefox. В Firefox вы можете использовать ::-moz-range-thumb, но вы не должны использовать его вместе с ::-webkit-slider-thumb selector это испортит стиль. Поэтому мы используем его как отдельный, чтобы избежать каких-либо проблем.
.field input::-webkit-slider-thumb{
-webkit-appearance: none;
border: none;
height: 30px;
width: 30px;
border: 3px solid white;
background: darkblue;
border-radius: 50%;
}
.field input::-moz-range-thumb{
-moz-appearance: none;
border: none;
height: 30px;
width: 30px;
border: 3px solid white;
background: darkblue;
border-radius: 50%;
}
Поиграйте с параметрами, чтобы настроить их при необходимости. Наконец, мы используем JavaScript для стилизации дорожки слайдера. Это довольно просто, требуются только базовые знания JavaScript. Если вы не знакомы с JavaScript, вы можете просто скопировать его и изучить позже. Во-первых, нам нужно выбрать span (значок перетаскивания) и input из DOM.
const slideValue = document.querySelector("span")
const inputSlide = document.querySelector("input")
Теперь нам нужно использовать обработчик событий target.oninput, чтобы настроить цвет фона дорожки ползунка так, чтобы он менялся при изменении входного значения. И выберите входной диапазон с помощью метода object.value() и передайте его в процентах свойству CSS background . Чтобы отобразить значок перетаскивания при использовании ползунка, мы назначаем класс .show для ввода с помощью свойства element.classList.add()и чтобы значок исчез, когда ползунок не используется, мы используем element.classList.remove()внутри target.onblurобработчика событий . Поместите ниже код в файл CSS.
.slider-value span.show{
transform: translateX(-50%) scale(1);
}
JavaScript для настройки фона дорожки входного диапазона приведен ниже. Если кому интересно, для чего нужен знак $? он используется для передачи переменных внутри строки шаблона/литерала шаблона.
inputSlide.oninput = (() =>{
let value = inputSlide.value
slideValue.textContent = value
slideValue.style.left = value + "%"
slideValue.classList.add("show")
inputSlide.style.background = `linear-gradient(to right, darkblue 0%, darkblue ${inputSlide.value}%, grey ${inputSlide.value}%, grey 100%)`
})
inputSlide.onblur = (() => {
slideValue.classList.remove("show")
})
И теперь у вас есть красивый слайдер, который вы можете использовать в своих проектах. Если вы интересуетесь JavaScript и веб-разработкой, вы можете изучать языки на MDN/W3school или на любых других сайтах. Удачного кодирования.
