Ползунок ценового диапазона в HTML CSS и JavaScript
Описание
Вы можете использовать ползунок или ввести минимальные и максимальные значения цены, чтобы выбрать соответствующий ценовой диапазон. В основном этот тип слайдера используется на сайтах электронной коммерции.
Чтобы создать ползунок пользовательского ценового диапазона. Вам нужно создать три файла: HTML, CSS и файл jаvascript. После создания этих файлов просто вставьте коды в каждый файл, также можете загрузить файлы исходного кода этого ползунка диапазона, скачав у нас.
Сначала создадим HTML файл с именем index.html и вставим данный код в свой файл HTML. Помните, что вы должны создать файл с расширением .html.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Ценовой ползунок</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<header>
<h2>Ползунок цен</h2>
<p>Используйте ползунок, чтобы задать границы ценового диапазона </p>
</header>
<div class="price-input">
<div class="field">
<span>Min</span>
<input type="number" class="input-min" value="2500">
</div>
<div class="separator">-</div>
<div class="field">
<span>Max</span>
<input type="number" class="input-max" value="7500">
</div>
</div>
<div class="slider">
<div class="progress"></div>
</div>
<div class="range-input">
<input type="range" class="range-min" min="0" max="10000" value="2500" step="100">
<input type="range" class="range-max" min="0" max="10000" value="7500" step="100">
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Далее создайте файл CSS с именем style.css и вставьте данный код в свой файл CSS. Помните, что вы должны создать файл с расширением .css.
/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #17A2B8;
}
::selection{
color: #fff;
background: #17A2B8;
}
.wrapper{
width: 400px;
background: #fff;
border-radius: 10px;
padding: 20px 25px 40px;
box-shadow: 0 12px 35px rgba(0,0,0,0.1);
}
header h2{
font-size: 24px;
font-weight: 600;
}
header p{
margin-top: 5px;
font-size: 16px;
}
.price-input{
width: 100%;
display: flex;
margin: 30px 0 35px;
}
.price-input .field{
display: flex;
width: 100%;
height: 45px;
align-items: center;
}
.field input{
width: 100%;
height: 100%;
outline: none;
font-size: 19px;
margin-left: 12px;
border-radius: 5px;
text-align: center;
border: 1px solid #999;
-moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.price-input .separator{
width: 130px;
display: flex;
font-size: 19px;
align-items: center;
justify-content: center;
}
.slider{
height: 5px;
position: relative;
background: #ddd;
border-radius: 5px;
}
.slider .progress{
height: 100%;
left: 25%;
right: 25%;
position: absolute;
border-radius: 5px;
background: #17A2B8;
}
.range-input{
position: relative;
}
.range-input input{
position: absolute;
width: 100%;
height: 5px;
top: -5px;
background: none;
pointer-events: none;
-webkit-appearance: none;
-moz-appearance: none;
}
input[type="range"]::-webkit-slider-thumb{
height: 17px;
width: 17px;
border-radius: 50%;
background: #17A2B8;
pointer-events: auto;
-webkit-appearance: none;
box-shadow: 0 0 6px rgba(0,0,0,0.05);
}
input[type="range"]::-moz-range-thumb{
height: 17px;
width: 17px;
border: none;
border-radius: 50%;
background: #17A2B8;
pointer-events: auto;
-moz-appearance: none;
box-shadow: 0 0 6px rgba(0,0,0,0.05);
}
Третьим файлом создайте файл jаvascript с именем script.js и вставьте данные коды в свой файл jаvascript. Помните, что вы должны создать файл с расширением .js.
const rangeInput = document.querySelectorAll(".range-input input"),
priceInput = document.querySelectorAll(".price-input input"),
range = document.querySelector(".slider .progress");
let priceGap = 1000;
priceInput.forEach(input =>{
input.addEventListener("input", e =>{
let minPrice = parseInt(priceInput[0].value),
maxPrice = parseInt(priceInput[1].value);
if((maxPrice - minPrice >= priceGap) && maxPrice <= rangeInput[1].max){
if(e.target.className === "input-min"){
rangeInput[0].value = minPrice;
range.style.left = ((minPrice / rangeInput[0].max) * 100) + "%";
}else{
rangeInput[1].value = maxPrice;
range.style.right = 100 - (maxPrice / rangeInput[1].max) * 100 + "%";
}
}
});
});
rangeInput.forEach(input =>{
input.addEventListener("input", e =>{
let minVal = parseInt(rangeInput[0].value),
maxVal = parseInt(rangeInput[1].value);
if((maxVal - minVal) < priceGap){
if(e.target.className === "range-min"){
rangeInput[0].value = maxVal - priceGap
}else{
rangeInput[1].value = minVal + priceGap;
}
}else{
priceInput[0].value = minVal;
priceInput[1].value = maxVal;
range.style.left = ((minVal / rangeInput[0].max) * 100) + "%";
range.style.right = 100 - (maxVal / rangeInput[1].max) * 100 + "%";
}
});
});Вот и все, теперь вы успешно создали ползунок ценового диапазона в HTML, CSS и jаvascript.
Вы можете изменить шаг, если поправите index.html script.js.
Если ваш код не работает или вы столкнулись с какой-либо проблемой, загрузите файлы исходного кода у нас.
Это бесплатно, и файл .zip распакуйте архив и запустите index.html
-
- Всё Для Веб-Мастера / Скрипты сайтов
- 2650
- Автор - TRADARENA
Введение в скриптинг
12.02.2021, Статьи
Введение в скриптинг 2
24.12.2020, Клиенты MTA
Обучение LUA
24.12.2020, Статьи
Нет комментариев.Оставишь комментарий?
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.