Ползунок ценового диапазона — это ползунок, с помощью которого пользователь может перемещать счетчик, чтобы выбрать соответствующий ценовой диапазон., который автоматически вводит значения в текстовые поля с шагом 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>

Далее создайте файл 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

Атрибут dir определяет направление текста содержимого элемента. Используется для языков у которых написание начинается справа. Ну и для всевозможного оформления текста.

<element dir="ltr|rtl|auto">

Определение и использование

Атрибуты data-* используются для хранения пользовательских данных, закрытых для страницы или приложения.

Атрибуты data-* дают нам возможность встраивать пользовательские атрибуты данных во все элементы HTML.

Сохраненные (настраиваемые) данные затем можно использовать в jаvascript страницы для создания взаимодействия с пользователем (без каких-либо вызовов Ajax или запросов к базе данных на стороне сервера).

Атрибуты data-* состоят из двух частей:

1. Имя атрибута не должно содержать заглавных букв и должно состоять как минимум из одного символа после префикса «data-».
2. Значением атрибута может быть любая строка

Примечание. Пользовательские атрибуты с префиксом «data-» будут полностью игнорироваться пользовательским агентом.

Синтаксис

<element data-*="somevalue">

Значения атрибутов

Атрибут contenteditable указывает, является ли содержимое элемента редактируемым или нет. Можно добавлять либо удалять текст.

Примечание. Если атрибут  contenteditable не установлен для элемента, элемент унаследует его от своего родителя.

Пример

Редактируемый абзац:

Синтаксис

Значения атрибута

Использование атрибута class в документе HTML:

<html>
<head>
<style>
h1.intro {
  color: blue;
}

p.important {
  color: green;
}
</style>
</head>
<body>

<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph. :)</p>

</body>
</html>

Определение и использование

Атрибут class указывает одно или несколько имен классов для элемента.

Атрибут class в основном используется для указания на класс в таблице стилей. Однако он также может использоваться jаvascript (через HTML DOM) для внесения изменений в элементы HTML с указанным классом.

Синтаксис

Добавьте несколько классов к одному элементу HTML:

<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
  color: blue;
  text-align: center;
}

.important {
  background-color: yellow;
}
</style>
</head>
<body>

<h1 class="intro important">Header 1</h1>
<p>A paragraph.</p>

</body>
</html>

Использование jаvascript для добавления желтого цвета фона к первому элементу с class="example" (индекс 0).

var x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";

Использование jаvascript для добавления класса «mystyle» к элементу с id="myDIV":

document.getElementById("myDIV").classList.add("mystyle");

Синтаксис

Пример:

Пример ссылки

<a href="https://for-web.ru/">Посетите веб справочник</a>

Определение и использование

Элемент <a> (в переводе с англ. anchor — якорь) предназначен для создания ссылок, которая используется для связи одной страницы с другой. Самым важным атрибутом элемента  <a> является  атрибут href, указывающий место назначения ссылки. Адрес ссылки может быть абсолютным и относительным. Абсолютные ссылки - это те адреса которые указывают на полный путь к файлу, документу , картинке.

https://for-web.ru/

Относительные ссылки - это те адреса которые построены относительно корня сайта.

/html

По умолчанию во всех браузерах ссылки будут выглядеть следующим образом:

• Непосещенная ссылка подчеркнута и синего цвета.
• Посещенная ссылка подчеркнута и окрашена в фиолетовый цвет.
• Активная ссылка подчеркнута и красна.

Соответственно оформление ссылок можно переопределить с помощью CSS.

Настройки CSS по умолчанию

Большинство браузеров будут отображать элемент  <a> со следующими значениями по умолчанию:

a:link, a:visited {
  color: (internal value);
  text-decoration: underline;
  cursor: auto;
}

a:link:active, a:visited:active {
  color: (internal value);
}

Атрибуты

Примеры

Как использовать изображение в качестве ссылки:  

<a href="https://for-web.ru/">
<img border="0"  src="путь к картинке" width="100" height="100">
</a>

Как открыть ссылку в новом окне браузера: 

<a href="https://for-web.ru" target="_blank">Посетите наш ресурс</a>

Как сделать ссылку на адрес электронной почты: 

<a href="mailto:someone@example.com">Отправить email</a>

Как привязать к номеру телефона: 

<a href="tel:+4733378901">+47 333 78 901</a>

Как сделать ссылку на другой раздел на той же странице: 

<a href="#section2">Go to Section 2</a>

Как сделать ссылку на jаvascript: 

<a href="jаvascript:alert('Hello World!');">Execute jаvascript</a>

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

Определение и использование

Все документы HTML должны начинаться с объявления типа документа <!DOCTYPE>.

<!DOCTYPE> (от англ. document type — тип документа) предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа).

Доктайп не является тегом HTML. Это «информация» для браузера чтобы он понимал, как следует интерпретировать текущую веб-страницу, 

В HTML 5 объявление типа документа упрошено и выглядит вот так:

<!DOCTYPE html>

Старые HTML-документы

В более старых документах (HTML 4 или XHTML) объявление более сложное, поскольку объявление должно ссылаться на DTD (описание типа документа).

HTML 4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.1: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Синтаксис

<!DOCTYPE [Элемент верхнего уровня] [Публичность] "[Регистрация]//[Организация]//[Тип] [Имя]//[Язык]" "[URL]">

Атрибуты

Элемент верхнего уровня — указывает элемент верхнего уровня в документе, для HTML это тег <html>.

Публичность — объект является публичным (значение PUBLIC) или системным ресурсом (значение SYSTEM), например, таким как локальный файл. Для HTML/XHTML указывается значение PUBLIC.

Регистрация — сообщает, что разработчик DTD зарегистрирован в международной организации по стандартизации (International Organization for Standardization, ISO). Принимает одно из двух значений: плюс (+) — разработчик зарегистрирован в ISO и - (минус) — разработчик не зарегистрирован. Для W3C значение ставится «-».

Организация — уникальное название организации, разработавшей DTD. Официально HTML/XHTML публикует W3C, это название и пишется в <!DOCTYPE>.

Тип — тип описываемого документа. Для HTML/XHTML значение указывается DTD.

Имя — уникальное имя документа для описания DTD.

Язык — язык, на котором написан текст для описания объекта. Содержит две буквы, пишется в верхнем регистре. Для документа HTML/XHTML указывается английский язык (EN).

URL — адрес документа с DTD.

Примечание

Тег комментария используется для комментирования исходного кода. Комментарии не отображаются в браузерах, конечно же если вы не перейдёте в режим разработчика.

Вы можете использовать комментарии для объяснения своего кода, которые в последствии помогут вам быстро ориентироваться в большом количестве кода. Соответственно новичкам в этой сфере будет легче понять за что, отвечает та  или иная часть кода.

Пример тега комментария

<!--Это комментарий. Он не отображается в браузере-->

<p>А это параграф , он будет виден на странице</p>

Советы по применению

Вы также можете использовать тег комментария, чтобы скрыть различные скрипты от браузеров без применения скриптов (чтобы они не отображались как простой текст):

<script type="text/jаvascript">
<!--
function displayMsg() {
  alert("Hello World!")
}
//-->
</script>