HTML5: Можливий повзунок із двома входами?

99

Чи можна зробити повзунок HTML5 з двома вхідними значеннями, наприклад, вибрати ціновий діапазон? Якщо так, то як це зробити?

forms  html  slider 
— часті
джерело

Відповіді:

64

Ні, вхід для діапазону HTML5 приймає лише один вхід. Я б рекомендував використовувати для цього завдання щось на зразок повзунка діапазону інтерфейсу jQuery .

— Мартін Буберль
джерело
Дякуємо за посилання та інформацію. Мені потрібно перевірити, чи можу я це запустити на мобільних пристроях.
— часті
33
Деякий час тому ... але мені вдалося «підробити» подвійний повзунок, поставивши два повзунки точно один на одного. Один починається з мінімального значення, інший починається з максимального значення. Я думаю, що це обман, але ... це працює на мене.
— часті
WhatWG принаймні обговорює його реалізацію: html.spec.whatwg.org/multipage/…
— kunambi
7
Мені подобається ionRangeSlider трохи більше, ніж мені сам слайдер jQuery UI: ionden.com/a/plugins/ion.rangeSlider/en.html
— Шарлотта,
4
Іншим підходом є «підробка» подвійного повзунка за допомогою паралельних
— SimplGy
79

Я деякий час шукав легкий подвійний повзунок, залежний від залежності (здавалося, що імпортувати jQuery тільки для цього), здається, що там багато. У підсумку я трохи змінив код @ Wildhoney і мені це дуже подобається.

Показати фрагмент коду

— Гері
джерело
На жаль, він не працює з браузером Android 4.0.4 Mobile Safari 4.0. :-(
— erik
@erik У мене насправді немає гарного способу перевірити ці версії, але це працює для мене на Android 5.0 з останньою версією Safari (про яку в програванні Google google сказано, що це 1,2, тому я плутаюсь щодо вашого 4.0). Якщо ви це зрозумієте, я хотів би це знати.
— Гері
1
Це справді розумно! Цікаво, як це не позначено як правильну відповідь, оскільки вона вирішує проблему витончено без будь-якої залежності. Додавання jQuery лише для цього очевидно є надмірним.
— zanona
@zanona Дякую, але правильна відповідь була позначена за 4 роки до цього, тому я не думаю, що ОП піклувався про інше рішення.
— Gary
11
Мені дуже подобається ваш підхід і намагався адаптувати його до мого використання, але довелося відмовитися від нього, коли я зрозумів, що деякі технічні характеристики у мене є (наприклад, забарвлення "активної" частини діапазону інакше, ніж решта доріжки ) неможливо реалізувати за допомогою цього. Тож я шукав інше рішення і знайшов цей дійсно охайний проект: refreshless.com/nouislider Це залежність вільна, має приємний та чистий API, сумісний з AMD та пропонує безліч варіантів. Поки що я цілком цим задоволений.
— Фелікс Віенберг
37

Запізнення , але noUiSlider уникає наявності jQuery-ui залежності, чого прийнята відповідь не робить. Єдиним "застереженням" є підтримка IE для IE9 та новіших версій, якщо застарілий IE є для вас угоди.

Він також безкоштовний, з відкритим кодом і може використовуватися в комерційних проектах без обмежень.

Встановлення: Завантажте noUiSlider, витягніть файл CSS та JS десь у файловій системі вашого сайту, а потім посилайте на CSS з голови та на JS з тіла:

<!-- In <head> -->
<link href="nouislider.min.css" rel="stylesheet">

<!-- In <body> -->
<script src="nouislider.min.js"></script>

Приклад використання: створює повзунок, який переходить від 0 до 100, і починається з 20-80.

HTML:

<div id="slider">
</div>

JS:

var slider = document.getElementById('slider');

noUiSlider.create(slider, {
    start: [20, 80],
    connect: true,
    range: {
        'min': 0,
        'max': 100
    }
});
— dario_ramos
джерело
WOW, дивовижно !! Це саме те, що нам потрібно, і це чудово розроблено! WHITOUT jQuery
— DavidTaubmann
Це має бути досить просто додати це та надіслати запит на вилучення проекту?
— dario_ramos
3
Я не копався в цьому, але я міг використовувати повзунок з клавіатурою, тому думаю, що це реалізовано зараз @ptrin :)
— Еду Руїс
21

Звичайно, ви можете просто використовувати два повзунки, що накладають один на одного, і додати трохи javascript (насправді не більше 5 рядків), щоб селектори не перевищували мінімальне / максимальне значення (як у @Garys).

Вкладене ви знайдете короткий фрагмент, адаптований до поточного проекту, включаючи стилі CSS3, щоб показати, що ви можете зробити (лише веб-комплект). Я також додав кілька міток для відображення вибраних значень.

Він використовує JQuery, але версія vanillajs не є магією. 

    (function() {

        function addSeparator(nStr) {
            nStr += '';
            var x = nStr.split('.');
            var x1 = x[0];
            var x2 = x.length > 1 ? '.' + x[1] : '';
            var rgx = /(\d+)(\d{3})/;
            while (rgx.test(x1)) {
                x1 = x1.replace(rgx, '$1' + '.' + '$2');
            }
            return x1 + x2;
        }

        function rangeInputChangeEventHandler(e){
            var rangeGroup = $(this).attr('name'),
                minBtn = $(this).parent().children('.min'),
                maxBtn = $(this).parent().children('.max'),
                range_min = $(this).parent().children('.range_min'),
                range_max = $(this).parent().children('.range_max'),
                minVal = parseInt($(minBtn).val()),
                maxVal = parseInt($(maxBtn).val()),
                origin = $(this).context.className;

            if(origin === 'min' && minVal > maxVal-5){
                $(minBtn).val(maxVal-5);
            }
            var minVal = parseInt($(minBtn).val());
            $(range_min).html(addSeparator(minVal*1000) + ' €');


            if(origin === 'max' && maxVal-5 < minVal){
                $(maxBtn).val(5+ minVal);
            }
            var maxVal = parseInt($(maxBtn).val());
            $(range_max).html(addSeparator(maxVal*1000) + ' €');
        }

     $('input[type="range"]').on( 'input', rangeInputChangeEventHandler);
})();
body{
font-family: sans-serif;
font-size:14px;
}
input[type='range'] {
  width: 210px;
  height: 30px;
  overflow: hidden;
  cursor: pointer;
    outline: none;
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
    background: none;
}
input[type='range']::-webkit-slider-runnable-track {
  width: 200px;
  height: 1px;
  background: #003D7C;
}

input[type='range']:nth-child(2)::-webkit-slider-runnable-track{
  background: none;
}

input[type='range']::-webkit-slider-thumb {
  position: relative;
  height: 15px;
  width: 15px;
  margin-top: -7px;
  background: #fff;
  border: 1px solid #003D7C;
  border-radius: 25px;
  z-index: 1;
}


input[type='range']:nth-child(1)::-webkit-slider-thumb{
  z-index: 2;
}

.rangeslider{
    position: relative;
    height: 60px;
    width: 210px;
    display: inline-block;
    margin-top: -5px;
    margin-left: 20px;
}
.rangeslider input{
    position: absolute;
}
.rangeslider{
    position: absolute;
}

.rangeslider span{
    position: absolute;
    margin-top: 30px;
    left: 0;
}

.rangeslider .right{
   position: relative;
   float: right;
   margin-right: -5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="rangeslider">
                                <input class="min" name="range_1" type="range" min="1" max="100" value="10" />
                                <input class="max" name="range_1" type="range" min="1" max="100" value="90" />
                                <span class="range_min light left">10.000 €</span>
                                <span class="range_max light right">90.000 €</span>
                            </div>
Розгорніть фрагмент

— користувач1532132
джерело
7
Гей виглядає чудово! але це не працює у Firefox, ви можете перетягнути лише максимальний ввід. Вам вдалося це виправити?
— Тоні Мішель Каубе
5
О чоловіче. Я прийшов сюди, щоб додати майже точно те саме! simple.gy/blog/range-slider-two-handles Моя версія розміщує входи поруч, але також використовує подвійні входи.
— SimplGy
5

Насправді я використовував свій сценарій безпосередньо в html. Але в javascript, коли ви додаєте прослуховувач подій oninput для цієї події, він автоматично передає дані. Вам просто потрібно призначити значення відповідно до ваших вимог.

[slider] {
  width: 300px;
  position: relative;
  height: 5px;
  margin: 45px 0 10px 0;
}

[slider] > div {
  position: absolute;
  left: 13px;
  right: 15px;
  height: 5px;
}
[slider] > div > [inverse-left] {
  position: absolute;
  left: 0;
  height: 5px;
  border-radius: 10px;
  background-color: #CCC;
  margin: 0 7px;
}

[slider] > div > [inverse-right] {
  position: absolute;
  right: 0;
  height: 5px;
  border-radius: 10px;
  background-color: #CCC;
  margin: 0 7px;
}


[slider] > div > [range] {
  position: absolute;
  left: 0;
  height: 5px;
  border-radius: 14px;
  background-color: #d02128;
}

[slider] > div > [thumb] {
  position: absolute;
  top: -7px;
  z-index: 2;
  height: 20px;
  width: 20px;
  text-align: left;
  margin-left: -11px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  background-color: #FFF;
  border-radius: 50%;
  outline: none;
}

[slider] > input[type=range] {
  position: absolute;
  pointer-events: none;
  -webkit-appearance: none;
  z-index: 3;
  height: 14px;
  top: -2px;
  width: 100%;
  opacity: 0;
}

div[slider] > input[type=range]:focus::-webkit-slider-runnable-track {
  background: transparent;
  border: transparent;
}

div[slider] > input[type=range]:focus {
  outline: none;
}

div[slider] > input[type=range]::-webkit-slider-thumb {
  pointer-events: all;
  width: 28px;
  height: 28px;
  border-radius: 0px;
  border: 0 none;
  background: red;
  -webkit-appearance: none;
}

div[slider] > input[type=range]::-ms-fill-lower {
  background: transparent;
  border: 0 none;
}

div[slider] > input[type=range]::-ms-fill-upper {
  background: transparent;
  border: 0 none;
}

div[slider] > input[type=range]::-ms-tooltip {
  display: none;
}

[slider] > div > [sign] {
  opacity: 0;
  position: absolute;
  margin-left: -11px;
  top: -39px;
  z-index:3;
  background-color: #d02128;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 28px;
  -webkit-border-radius: 28px;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
}

[slider] > div > [sign]:after {
  position: absolute;
  content: '';
  left: 0;
  border-radius: 16px;
  top: 19px;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top-width: 16px;
  border-top-style: solid;
  border-top-color: #d02128;
}

[slider] > div > [sign] > span {
  font-size: 12px;
  font-weight: 700;
  line-height: 28px;
}

[slider]:hover > div > [sign] {
  opacity: 1;
}
<div slider id="slider-distance">
  <div>
    <div inverse-left style="width:70%;"></div>
    <div inverse-right style="width:70%;"></div>
    <div range style="left:0%;right:0%;"></div>
    <span thumb style="left:0%;"></span>
    <span thumb style="left:100%;"></span>
    <div sign style="left:0%;">
      <span id="value">0</span>
    </div>
    <div sign style="left:100%;">
      <span id="value">100</span>
    </div>
  </div>
  <input type="range" value="0" max="100" min="0" step="1" oninput="
  this.value=Math.min(this.value,this.parentNode.childNodes[5].value-1);
  let value = (this.value/parseInt(this.max))*100
  var children = this.parentNode.childNodes[1].childNodes;
  children[1].style.width=value+'%';
  children[5].style.left=value+'%';
  children[7].style.left=value+'%';children[11].style.left=value+'%';
  children[11].childNodes[1].innerHTML=this.value;" />

  <input type="range" value="100" max="100" min="0" step="1" oninput="
  this.value=Math.max(this.value,this.parentNode.childNodes[3].value-(-1));
  let value = (this.value/parseInt(this.max))*100
  var children = this.parentNode.childNodes[1].childNodes;
  children[3].style.width=(100-value)+'%';
  children[5].style.right=(100-value)+'%';
  children[9].style.left=value+'%';children[13].style.left=value+'%';
  children[13].childNodes[1].innerHTML=this.value;" />
</div>
Розгорніть фрагмент

— Гімабінду
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.