Настройте ползунок ввода с помощью 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 или на любых других сайтах. Удачного кодирования.