Следите за нами!

Ползунок ценового диапазона в 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');
*{
  margin0;
  padding0;
  box-sizing: border-box;
  font-family'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height100vh;
  background#17A2B8;
}
::selection{
  color#fff;
  background#17A2B8;
}
.wrapper{
  width400px;
  background#fff;
  border-radius10px;
  padding20px 25px 40px;
  box-shadow0 12px 35px rgba(0,0,0,0.1);
}
header h2{
  font-size24px;
  font-weight600;
}
header p{
  margin-top5px;
  font-size16px;
}
.price-input{
  width100%;
  display: flex;
  margin30px 0 35px;
}
.price-input .field{
  display: flex;
  width100%;
  height45px;
  align-items: center;
}
.field input{
  width100%;
  height100%;
  outline: none;
  font-size19px;
  margin-left12px;
  border-radius5px;
  text-align: center;
  border1px 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{
  width130px;
  display: flex;
  font-size19px;
  align-items: center;
  justify-content: center;
}
.slider{
  height5px;
  position: relative;
  background#ddd;
  border-radius5px;
}
.slider .progress{
  height100%;
  left25%;
  right25%;
  position: absolute;
  border-radius5px;
  background#17A2B8;
}
.range-input{
  position: relative;
}
.range-input input{
  position: absolute;
  width100%;
  height5px;
  top: -5px;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
input[type="range"]::-webkit-slider-thumb{
  height: 17px;
  width17px;
  border-radius50%;
  background#17A2B8;
  pointer-events: auto;
  -webkit-appearance: none;
  box-shadow0 0 6px rgba(0,0,0,0.05);
}
input[type="range"]::-moz-range-thumb{
  height: 17px;
  width17px;
  border: none;
  border-radius50%;
  background#17A2B8;
  pointer-events: auto;
  -moz-appearance: none;
  box-shadow0 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




Автор публикации:

Flox Даниил Девелоп

Скачать:

Скачать

Дата:
Автор ресурса:

TRADARENA

Введение в скриптинг
Введение в скриптинг
12.02.2021, Статьи
Введение в скриптинг 2
Введение в скриптинг 2
24.12.2020, Клиенты MTA
Обучение LUA
Обучение LUA
24.12.2020, Статьи
Руководство по отладке - как найти ошибки в ваших скриптах
Руководство по отладке - как найти ошибки в ваших
24.12.2020, Статьи

Нет комментариев.Оставишь комментарий?