Ползунок двойного диапазона с использованием HTML и JavaScript

Всем привет. Добро пожаловать в сегодняшнее руководство по Codewithrandom. Мы узнаем, как сделать Ползунок двойного диапазона с помощью HTML, Css и JavaScript. проект, который в основном можно увидеть на платформах онлайн-покупок, чтобы установить диапазон бюджета, который требуется пользователю.

Ползунок двойного диапазона с использованием HTML и JavaScript[/caption]

HTML (язык гипертекстовой разметки) поможет нам создать структуру списка с некоторыми необходимыми атрибутами и элементами для создания проекта слайдера с двойным диапазоном.

Затем мы воспользуемся CSS (каскадной таблицей стилей), которая поможет нам стилизовать или спроектировать проект с подходящими отступами и выравниванием в проекте ползунка с двойным диапазоном.

Наконец, мы будем использовать JS (JavaScript), который добавит логику, чтобы сделать проект Double Range Slider Project отзывчивым со стороны пользователя.

Надеюсь, у вас есть представление о проекте.

HTML-код для ползунка с двойным диапазоном: -

<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Double Range Slider</title>
    <!--Google Fonts-->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
    <!--Stylesheet-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="values">
            <span id="range1">
                0
            </span>
            <span> &dash; </span>
            <span id="range2">
                100
            </span>
        </div>
        <div class="container">
            <div class="slider-track"></div>
            <input type="range" min="0" max="100" value="30" id="slider-1" oninput="slideOne()">
            <input type="range" min="0" max="100" value="70" id="slider-2" oninput="slideTwo()">
        </div>
    </div>
    
    <!--Script-->
    <script src="script.js"></script>
</body>
</html>

Мы начнем с создания структуры проекта Double Range Slider. Как видно из приведенного выше кода, мы строим структуру, используя все необходимые элементы и атрибуты. Мы создадим класс-оболочку для нашего ползунка диапазона, используя тег div, установим значение 0, используя тег div со значениями класса, добавим знак тире, используя тег &dash, а затем добавим следующее число, используя тег div.

Теперь мы создадим два ползунка диапазона, используя диапазон типа ввода. Для этих значений ползунка диапазона уже установлены минимальная и максимальная ширина.

Дайте нам знать код части CSS, чтобы добавить стиль и выровнять теги.

Вывод HTML-кода:

Код CSS для слайдера с двойным диапазоном: -

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins",sans-serif;
}
body{
    height: 100vh;
    display: -ms-grid;
    display: grid;
    background-color: #3264fe;
    place-items: center;
}
.wrapper{
    position: relative;
    width: 95vmin;
    background-color: #ffffff;
    padding: 50px 40px 20px 40px;
    border-radius: 10px;
}
.container{
    position: relative;
    width: 100%;
    height: 100px;
    margin-top: 30px;
}
input[type="range"]{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    outline: none;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    background-color: transparent;
    pointer-events: none;
}
.slider-track{
    width: 100%;
    height: 5px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    border-radius: 5px;
}
input[type="range"]::-webkit-slider-runnable-track{
    -webkit-appearance: none;
    height: 5px;
}
input[type="range"]::-moz-range-track{
    -moz-appearance: none;
    height: 5px;
}
input[type="range"]::-ms-track{
    appearance: none;
    height: 5px;
}
input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    height: 1.7em;
    width: 1.7em;
    background-color: #3264fe;
    cursor: pointer;
    margin-top: -9px;
    pointer-events: auto;
    border-radius: 50%;
}
input[type="range"]::-moz-range-thumb{
    -webkit-appearance: none;
    height: 1.7em;
    width: 1.7em;
    cursor: pointer;
    border-radius: 50%;
    background-color: #3264fe;
    pointer-events: auto;
}
input[type="range"]::-ms-thumb{
    appearance: none;
    height: 1.7em;
    width: 1.7em;
    cursor: pointer;
    border-radius: 50%;
    background-color: #3264fe;
    pointer-events: auto;
}
input[type="range"]:active::-webkit-slider-thumb{
    background-color: #ffffff;
    border: 3px solid #3264fe;
}
.values{
    background-color: #3264fe;
    width: 32%;
    position: relative;
    margin: auto;
    padding: 10px 0;
    border-radius: 5px;
    text-align: center;
    font-weight: 500;
    font-size: 25px;
    color: #ffffff;
}
.values:before{
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    border-top: 15px solid #3264fe;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    margin: auto;
    bottom: -14px;
    left: 0;
    right: 0;
}

Во-вторых, идет код CSS, который мы стилизовали для структуры, которую мы дополнили, а также выровняли проект ползунка двойного диапазона, чтобы он был правильно расположен и не запутался с подходящими элементами CSS.

Шаг 1.Отступы и поля будут установлены на ноль с помощью универсального селектора тегов, размер поля будет установлен на «, а семейство шрифтов будет установлено на «Поппинс» с помощью атрибута семейства шрифтов. .

Теперь, когда мы выбрали тег body, мы установим высоту на «100 vh», свойство отображения будет установлено на «сетку», а свойство элементов позиции будет использоваться для центрирования элементов на странице.

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins",sans-serif;
}
body{
    height: 100vh;
    display: -ms-grid;
    display: grid;
    background-color: #3264fe;
    place-items: center;
}

Шаг 2.Теперь с помощью селектора класса (.wrapper) мы установим положение как «относительное», а с помощью свойства ширины мы установим ширину 95vmin, а с помощью свойства радиуса границы мы установим границу радиус как «10px».

Теперь, используя селектор входного тега, мы добавим стиль к нашим ползункам диапазона, ширина наших ползунков диапазона установлена как «100%», и с помощью свойства положения мы установим положение как «Абсолютное», а с помощью свойства фона мы установим background-color как «прозрачный».

input[type="range"]::-webkit-slider-runnable-track{
    -webkit-appearance: none;
    height: 5px;
}
input[type="range"]::-moz-range-track{
    -moz-appearance: none;
    height: 5px;
}
input[type="range"]::-ms-track{
    appearance: none;
    height: 5px;
}
input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    height: 1.7em;
    width: 1.7em;
    background-color: #3264fe;
    cursor: pointer;
    margin-top: -9px;
    pointer-events: auto;
    border-radius: 50%;
}
input[type="range"]::-moz-range-thumb{
    -webkit-appearance: none;
    height: 1.7em;
    width: 1.7em;
    cursor: pointer;
    border-radius: 50%;
    background-color: #3264fe;
    pointer-events: auto;
}
input[type="range"]::-ms-thumb{
    appearance: none;
    height: 1.7em;
    width: 1.7em;
    cursor: pointer;
    border-radius: 50%;
    background-color: #3264fe;
    pointer-events: auto;
}
input[type="range"]:active::-webkit-slider-thumb{
    background-color: #ffffff;
    border: 3px solid #3264fe;
}

Шаг 3.Теперь, когда мы добавили стиль к значению, мы будем использовать селектор класса (.values), чтобы изменить цвет фона на «синий», ширину на «32%», положение на быть «Абсолютным», а радиус границы должен быть 5px. Благодаря использованию свойства text-aligned содержимое выравнивается по центру.

.values:before{
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    border-top: 15px solid #3264fe;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    margin: auto;
    bottom: -14px;
    left: 0;
    right: 0;
}

Вывод кода HTML + CSS:

Теперь давайте закодируем часть JavaScript, чтобы сделать ее отзывчивой.

Код JavaScript для ползунка с двойным диапазоном: -

window.onload = function(){
    slideOne();
    slideTwo();
}
let sliderOne = document.getElementById("slider-1");
let sliderTwo = document.getElementById("slider-2");
let displayValOne = document.getElementById("range1");
let displayValTwo = document.getElementById("range2");
let minGap = 0;
let sliderTrack = document.querySelector(".slider-track");
let sliderMaxValue = document.getElementById("slider-1").max;
function slideOne(){
    if(parseInt(sliderTwo.value) - parseInt(sliderOne.value) <= minGap){
        sliderOne.value = parseInt(sliderTwo.value) - minGap;
    }
    displayValOne.textContent = sliderOne.value;
    fillColor();
}
function slideTwo(){
    if(parseInt(sliderTwo.value) - parseInt(sliderOne.value) <= minGap){
        sliderTwo.value = parseInt(sliderOne.value) + minGap;
    }
    displayValTwo.textContent = sliderTwo.value;
    fillColor();
}
function fillColor(){
    percent1 = (sliderOne.value / sliderMaxValue) * 100;
    percent2 = (sliderTwo.value / sliderMaxValue) * 100;
    sliderTrack.style.background = `linear-gradient(to right, #dadae5 ${percent1}% , #3264fe ${percent1}% , #3264fe ${percent2}%, #dadae5 ${percent2}%)`;
}

Теперь мы создадим две дополнительные функции, slideone() и slidetwo, используя функцию window.onload внутри функции.(). Теперь мы выберем каждый элемент HTML, используя document.queryselector. Теперь мы преобразуем значение ползунка в целое число и вычтем его из двух, чтобы получить единицу, используя метод sliderone() и условие if. Кроме того, мы заполним цветом внутреннюю часть нашего слайдера.

Чтобы изменить значения ползунка, мы аналогичным образом создадим функцию slidetwo() и используем условие if, чтобы вычесть два из одного внутри нее.

Последний этап проекта — JavaScript, в который мы добавили логику и закодировали в соответствии с требованиями с некоторыми условиями. Давайте посмотрим на окончательный результат проекта Двойной слайдер с использованием HTML, CSS и JavaScript.

Если вы обнаружите, что этот блог полезен, обязательно поищите в Google код со случайным кодом для интерфейсных проектов с исходными кодами и обязательно следуйте коду со случайной страницей в Instagram.

Спасибо и продолжайте учиться!!!

Идея кода — codingartist

Написано — Харш Савант

Автор кода — @harshh9

Что такое ползунок диапазона Duble?

Ползунки диапазона используются, чтобы позволить пользователям назначать числовое значение, которое не должно быть меньше одного значения или больше другого. Другими словами, он позволяет вам выбрать число из диапазона, отображаемого в виде ползунка. Пользователи могут наблюдать и выбирать значение (или диапазон) в диапазоне вдоль полосы с помощью ползунков. Они идеально подходят для применения фильтров изображения или изменения настроек, таких как яркость и громкость.

Какова функция ползунка двойного диапазона?

Основная функция ползунков диапазона должна использоваться на веб-сайте, таком как электронная коммерция, а также ползунки диапазона могут использоваться для яркости и громкости компьютера, что обеспечивает пользователю важный вид ползунка диапазона.

смотрите также:

Новые материалы

Объяснение документов 02: BERT

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

Как проанализировать работу вашего классификатора?

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

Работа с цепями Маркова, часть 4 (Машинное обучение)

Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]

Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter

Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

Учебные заметки: создание моего первого пакета Node.js

Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!

Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..

Метки

Machine Learning JavaScript Data Science Artificial Intelligence Software Development Python Web Development Coding Deep Learning AI React Software Engineering Nodejs Java Front End Development Typescript Computer Science Data Algorithms Development NLP Tech Programming Languages CSS ChatGPT HTML Python Programming Javascript Tips Angular Computer Vision Startup Data Visualization Neural Networks Tutorial Statistics Productivity Reactjs Learning