Ползунок ценового диапазона в 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

Скачать

Чтобы скачать этот файл зарегистрируйтесь и/или войдите на сайт используя форму сверху.

Введение в скриптинг

12.02.2021, Статьи

Введение в скриптинг 2

24.12.2020, Клиенты MTA

Обучение LUA

24.12.2020, Статьи

Руководство по отладке - как найти ошибки в ваших

24.12.2020, Статьи

Нет комментариев.

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Комментарии