9 посетителей на сайте. Из них:
Пользователи1
Роботы8
Список пользователей
Rainbow Сейчас на сайте
SerVant Сейчас на сайте
BRUNO fx Был(a) в сети 8 минут назад
любитель Heed For Spead Most Wanted Был(a) в сети 11 минут назад
Сергей Шемет Был(a) в сети 13 минут назад
Clopo Alex Был(a) в сети 13 минут назад
ViTaLyK PhiL Был(a) в сети 13 минут назад
Deniska Hansen Был(a) в сети 19 минут назад
МОДЕРАЦИЯ Тик Ток Был(a) в сети 20 минут назад
Эндрю Был(a) в сети 23 минуты назад
Victor Vladimirovich Был(a) в сети 24 минуты назад
Dimango Был(a) в сети 29 минут назад
lkaus Lonselot Был(a) в сети 30 минут назад
Был(a) в сети 30 минут назад
Dmitry Obuchowski Был(a) в сети 39 минут назад
holodlav1 Губанов Был(a) в сети 40 минут назад
Эд жопа Эд жопа Был(a) в сети 44 минуты назад
Famin066 Был(a) в сети 47 минут назад
Sergey Sergeev Был(a) в сети 1 час назад
[ГСЗФ] Tommy_Doms Был(a) в сети 1 час назад
фыв фыв Был(a) в сети 1 час назад
Demon Был(a) в сети 1 час назад
Даниил Девелоп Был(a) в сети 1 час назад
Данил Редько Был(a) в сети 1 час назад
ArTeM Vivdich Был(a) в сети 2 часа назад
Aleksandr Vikhrov Был(a) в сети 2 часа назад
TONI OWNPONI Был(a) в сети 2 часа назад
Владимир Был(a) в сети 2 часа назад
Den 777 Был(a) в сети 2 часа назад
Fixter Был(a) в сети 3 часа назад
Adim129 Был(a) в сети 3 часа назад
יורי בוריסוב Был(a) в сети 3 часа назад
Pirzrak Был(a) в сети 3 часа назад
Юля Марки Был(a) в сети 3 часа назад
Был(a) в сети 3 часа назад
raimonds21 sdsfdsfds Был(a) в сети 3 часа назад
Alex Businessman Был(a) в сети 3 часа назад
Ded inside Был(a) в сети 4 часа назад
Михаил Логопе Был(a) в сети 4 часа назад
Хамзат Был(a) в сети 4 часа назад
#HEX Был(a) в сети 4 часа назад
LIMMA 86 Был(a) в сети 4 часа назад
Мария Смаглова Был(a) в сети 5 часов назад
Nikita Был(a) в сети 5 часов назад
Данил Чиспияков Был(a) в сети 5 часов назад
миша княжев Был(a) в сети 5 часов назад
Ami Standoff Был(a) в сети 5 часов назад
POLYGON Был(a) в сети 5 часов назад
destroy Был(a) в сети 6 часов назад
DENCHIK21 bu3722 Был(a) в сети 6 часов назад
XAMJIO Был(a) в сети 6 часов назад
Тагир Гизатов Был(a) в сети 6 часов назад
Avaneesh Chavan Был(a) в сети 6 часов назад
Hitman Bmwf11 Был(a) в сети 7 часов назад
Alvor Был(a) в сети 7 часов назад
Льоша Босак Был(a) в сети 8 часов назад
Николай Иркутск Был(a) в сети 8 часов назад
Вадим Ткаченко Был(a) в сети 8 часов назад
AGGRESS1VEX Был(a) в сети 8 часов назад
AQUA Был(a) в сети 9 часов назад
Just Founder Был(a) в сети 9 часов назад
Волк Был(a) в сети 9 часов назад
Rafael Gc Был(a) в сети 9 часов назад
Павел Евдокимов Был(a) в сети 9 часов назад
Артем Колєснік Был(a) в сети 10 часов назад
Шулпан Чернова Был(a) в сети 10 часов назад
WiseBear Был(a) в сети 10 часов назад
@lex Был(a) в сети 12 часов назад
Gevorg Был(a) в сети 12 часов назад
Ihor Dm Был(a) в сети 12 часов назад
Khas Был(a) в сети 12 часов назад
Лев Шушпанников Был(a) в сети 13 часов назад
Alinur Был(a) в сети 13 часов назад
Штеркель Ростислав Был(a) в сети 14 часов назад
Makarov Был(a) в сети 15 часов назад
F_enome_n ️ Был(a) в сети 15 часов назад
Fabian Oracz Был(a) в сети 16 часов назад
Олив Был(a) в сети 16 часов назад
LooNiX Был(a) в сети 16 часов назад
дмитрий Был(a) в сети 16 часов назад
FUZE Был(a) в сети 16 часов назад
Был(a) в сети 16 часов назад
Список ботов
rambler (8)

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

Ползунок ценового диапазона в 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, Корзина(Архив)

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