Верстальщик html страницmariia.belogubova@gmail.com

Как сделать двойной ползунок?

Стилизация и реализация

Нативный двойной ползунок не работает! Если вы пропишите в html коде просто тег input[type=range] с атрибутом multiple, к сожалению, двойного ползунка не получиться. Для решения данной задачи надо писать все самому либо использовать готовые "велосипеды", которые можно найти в интернете (noUiSlider, jQuery UI — slider()).

В данной статье написано одно из решений создания двойного ползунка с помощью js компилятора svelte.

Пошаговое руководство с реализацией двойного ползунка

  1. HTML разметка
  2. CSS cтилизация
  3. Подготовка к написанию js реализации
  4. js реализация

Svelte файлы

html, css и js

Файл App.svelte

<script>
import Multirange from './Multirange.svelte'
let multirange = {
min: 10, max: 200,
coord: {from: 10, to: 100}
};
</script>

<Multirange bind:multirange={multirange} />

Файл Multirange.svelte

<script>
export let multirange = {
min: 0, max: 100,
coord: {from: 10, to: 50}
}
let validFrom = false,
validTo = false,
rangeParam = {
xMin: 0,
length: 0
},
xPoint = 0;
$: from = getPercent(multirange.coord.from);
$: to = getPercent(multirange.coord.to);
$: multirangeWidth = to - from;

function setParentParams(e) {
let range = e.target.closest('.multirange');
rangeParam.length = range.clientWidth;
rangeParam.xMin = Math.round(range.getBoundingClientRect().left + pageXOffset);
}

function getPercent(value) {
return (value - multirange.min) * 100 / (multirange.max - multirange.min);
}

function handleMousedownFrom(e) {
validFrom = true;
handleMousedown(e);
}

function handleMousedownTo(e) {
validTo = true;
handleMousedown(e);
}

function handleMousedown(e) {
setParentParams(e);
window.addEventListener('mousemove', handleMousemove);
window.addEventListener('mouseup', handleMouseup);
}

function handleMouseup(e) {
window.removeEventListener('mousemove', handleMousemove);
window.removeEventListener('mousedown', handleMousedown);
validFrom = validTo = false;
}

function handleMousemove(e) {
xPoint = Math.round(((e.clientX - rangeParam.xMin) * (multirange.max - multirange.min)) / rangeParam.length) + multirange.min;
if(xPoint > multirange.max) xPoint = multirange.max;
if(xPoint < multirange.min) xPoint = multirange.min;
if(validFrom) {
multirange.coord.from = (xPoint > multirange.coord.to) ? multirange.coord.to : xPoint;
} else if(validTo) {
multirange.coord.to = (xPoint < multirange.coord.from) ? multirange.coord.from : xPoint;
} else {
console.log("Error: Can not find toggle");
}
}
</script>

<div class="multirange">
<div class="multirange__scale">
<div class="multirange__bar" style="left:{from}%; width:{multirangeWidth}%;"></div>
</div>
<div class="multirange__toggle" style="left:{from}%"
on:mousedown={handleMousedownFrom}></div>
<div class="multirange__toggle" style="left:{to}%"
on:mousedown={handleMousedownTo}></div>
</div>
<div>
<lable> от <input type="number" bind:value={multirange.coord.from} min="{multirange.min}" max="{multirange.max}">
<lable> до <input type="number" bind:value={multirange.coord.to} min="{multirange.min}" max="{multirange.max}"></lable>
</div>
<p>{multirange.coord.from} - {multirange.coord.to}</p>

<style>
.multirange {
position: relative;
margin-bottom: 20px;
}
.multirange__scale {
height: 2px;
background: gray;
}
.multirange__bar {
position: relative;
height: 4px;
background: #463a8a;
}
.multirange__toggle {
position: absolute;
top: -9px;
width: 4px;
height: 4px;
background:#463a8a;
border: 8px solid #b3b0bb;
border-radius: 50%;
box-shadow: 0 2px 1px 0 rgba(0, 0, 255, 0.2);
cursor: pointer;
transform: translate(-50%, 0);
}
</style>

Пошаговое руководство

Как создать двойной ползунок?

В одном файле компоненте Multirange.svelte прописаны css стили, html разметка и скрипты. Разберем по шагам, как это сделано.

Шаг 1. Разметка двойного ползунка

html разметка двойного ползунка

Для реализации двойного ползунка нам потребуется создать несколько простых дивов (тег div): дивы для шкалы <div class="multirange__scale">, для двух переключателей <div class="multirange__toggle"> и для активной полосы на шакале <div class="multirange__bar">.

Шаг 2. Стилизация ползунка

Далее переходим к css стилизации. Для этого нам потребуется стилизовать основные сущности ползунка по классам. Рисуем шкалу .multirange__scale в виде серой полосы в 2px высотой, активную часть шкалы .multirange__bar в виде синей полосы с шириной 4px и два ползунка .multirange__toggle в виде кружочков диаметром 12px.

css стилизация двойного ползунка

Шаг 3. Подготовка к написанию js реализации

html разметка двойного ползунка

После навешиваем события по нажатию on:mousedown для переключателей. Данное событие будет вызывать события движения мыши и отпускания кнопки мыши.

Шаг 4. JS реализация

На последнем этапе реализуем функции событий. Основной подсчет координат происходит в функции handleMouseMove(). Основная задача заключается в том, чтобы с помощью координат мыши изменить переменные multirange.coord.from и multirange.coord.to. Данные переменные выводятся под двойным ползунком и так же преобразуются в проценты для переключателей ползунка.

Весь js код приведен в начале страницы.

css стилизация двойного ползунка

Контакт

mariia.belogubova@gmail.com

Информация, которую стоит указать в письме:

  • Имя, роль, контакты
  • Краткое описание проекта или список проблем.
  • Срок сдачи проекта
  • Бюджет проекта
  • Как вы обо мне узнали?

По любым вопросам пишите на почту

Написать письмо