21 посетитель на сайте. Из них:
Пользователи1
Роботы20
Список пользователей
Nikita Igonin Сейчас на сайте
Сергей Шемет Был(a) в сети 5 минут назад
Был(a) в сети 6 минут назад
KraKen Hack Был(a) в сети 12 минут назад
Максим Был(a) в сети 22 минуты назад
Виталий Меренков Был(a) в сети 25 минут назад
Денис Бачурин Был(a) в сети 44 минуты назад
Hyundai Accent Был(a) в сети 48 минут назад
Команда Сервера Был(a) в сети 1 час назад
0987654321 Был(a) в сети 1 час назад
Юра Вондра Был(a) в сети 1 час назад
Ян Бочан Был(a) в сети 2 часа назад
Мар'ян Цісельський Был(a) в сети 3 часа назад
Sergo MSK Был(a) в сети 3 часа назад
Ab Antonian Был(a) в сети 4 часа назад
AGGRESS1VEX Был(a) в сети 4 часа назад
Тимур Нач Был(a) в сети 4 часа назад
Павел Евдокимов Был(a) в сети 4 часа назад
Данил Поланейчик Был(a) в сети 5 часов назад
Иван Был(a) в сети 5 часов назад
Rey Aldrigde Был(a) в сети 5 часов назад
KompInteh 76 Был(a) в сети 5 часов назад
Platon Seven Был(a) в сети 6 часов назад
Асхьаб Вараев Был(a) в сети 6 часов назад
Stas Kozur Был(a) в сети 6 часов назад
Андрей Лимонский Был(a) в сети 6 часов назад
Accidentally Был(a) в сети 7 часов назад
George Iftimovici Был(a) в сети 8 часов назад
danila feliks Был(a) в сети 8 часов назад
Стёпа' Громов Был(a) в сети 8 часов назад
Khonyagar Был(a) в сети 8 часов назад
Ага Был(a) в сети 8 часов назад
Batuhan Sanlı Был(a) в сети 8 часов назад
Mars Был(a) в сети 8 часов назад
Ярослав Был(a) в сети 8 часов назад
Никита Беспанский Был(a) в сети 9 часов назад
олег Был(a) в сети 9 часов назад
Makeshov Был(a) в сети 9 часов назад
Den 777 Был(a) в сети 9 часов назад
Список ботов
rambler (20)

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

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

mtasa-blue
mtasa-blue
12.11.2023, Прочее MTA
Система античита для кастом клиентов МТА
Система античита для кастом клиентов МТА
27.12.2021, Скрипты Мта
Модуль web EGP
Модуль web EGP
11.11.2023, Модули EGP
ЛУЧШИЙ БОНУС ПРОЕКТ! ELOISE MTA:SA RPG Server [50KK BONUS](Закрыт)
ЛУЧШИЙ БОНУС ПРОЕКТ! ELOISE MTA:SA RPG Server
22.11.2022, Корзина(Архив)

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