Ползунок ценового диапазона в HTML CSS и JavaScript
Ползунок ценового диапазона — это ползунок, с помощью которого пользователь может перемещать счетчик, чтобы выбрать соответствующий ценовой диапазон., который автоматически вводит значения в текстовые поля с шагом 100. В этом скрипте (ползунок ценового диапазона в jаvascript), как вы можете увидеть на изображении предварительного просмотра, есть минимальные и максимальные входные данные и ползунок ценового диапазона.
Вы можете использовать ползунок или ввести минимальные и максимальные значения цены, чтобы выбрать соответствующий ценовой диапазон. В основном этот тип слайдера используется на сайтах электронной коммерции.
Чтобы создать ползунок пользовательского ценового диапазона. Вам нужно создать три файла: 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>/* 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);
}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 + "%";
}
});
});
Информация
Посетители, находящиеся в группе Гости, не могут скачивать файлы с нашего сайта.
Пожалуйста зарегистрируйтесь или авторизируйтесь для доступа к файлу.
У данной публикации нет комментариев.
Ublogi
Автор28-04-2023, 20:09
Дата пуликацииБлог / JavaScript / Литература
Категория- Комментариев: 0
- Просмотров: 281
Блог / HTML / Литература
Блог / HTML
Блог
HTML
HTML
Статистика
Гости1
Комментарии
Ссылка ведет на реферальную ссылку. Мне бы достать ориг этого скрипта т.к у меня есть копия, но надо откатить некоторые правки... да в 2k25 я использую подобные скрипты значит в этом есть смысл другое вам знать не нужно..
24 августа 2025 20:35
kouttepe
Ссылка на скачку не работает
22 июля 2025 21:37
Ilya5412
Ссылка на скачивание не рабочая
31 августа 2023 18:55
smoky
Ссылка нерабочая
28 августа 2023 16:17
Mandarin4ik2007
Ublogi,
дайте ссылку на скачивание
дайте ссылку на скачивание
7 августа 2023 11:24
mandarin4ik
Облако тегов
Angrybird2 AutoClub Babushkiny-semki BIRDS BTC Casino Platform Cкрипт King-Birds Kosmobit Paper Island worldschool wp youmoney Аптека Бумажки Веб Инвестиционная Инвестиционной Оружейный Остров Пасека Пивная Скрипт Уникальный скрипт инвестиционный игры Ниндзя барон денег игра игры империя инвестиционного инвестиционной инвестиционный попугаев проекта с выводом симулятора фермы экономического экономической экономической игры
Реклама
Бесплатный хостинг с поддержкой PHP, MySQL, Python. Это отличная возможность проверить работу своего сайта на настоящем хостинге без рекламы.
Заказать хостинг