HTML5: suwak z dwoma wejściami możliwy?

102

Czy można zrobić suwak HTML5 z dwiema wartościami wejściowymi, na przykład w celu wybrania przedziału cenowego? Jeśli tak, jak można to zrobić?

forms  html  slider 
— częsty
źródło

Odpowiedzi:

65

Nie, dane wejściowe z zakresu HTML5 przyjmują tylko jedno dane wejściowe. Zalecałbym użycie czegoś takiego jak suwak zakresu interfejsu użytkownika jQuery do tego zadania.

— Martin Buberl
źródło
Dzięki za link i informacje. Muszę sprawdzić, czy mogę to uruchomić na urządzeniach mobilnych.
— częste
34
Jakiś czas temu… ale udało mi się „sfałszować” podwójny suwak umieszczając dwa suwaki dokładnie jeden na drugim. Jeden zaczyna się od wartości minimalnej, a drugi od wartości maksymalnej. Myślę, że to oszustwo, ale ... na mnie działa.
— częste
CoWG przynajmniej dyskutuje o jego wdrożeniu: html.spec.whatwg.org/multipage/ ...
— kunambi
7
Osobiście lubię ionRangeSlider trochę lepiej niż suwak interfejsu użytkownika jQuery: ionden.com/a/plugins/ion.rangeSlider/en.html
— Charlotte
4
Innym podejściem jest „sfałszowanie” podwójnego suwaka z bocznymi kontrolkami wprowadzania danych: simple.gy/blog/range-slider-two-handles
— SimplGy
81

Od jakiegoś czasu szukałem lekkiego, wolnego od zależności podwójnego suwaka (importowanie jQuery tylko w tym celu wydawało się szalone) i wydaje się, że nie ma tam wielu. Skończyło się na tym, że trochę zmodyfikowałem kod @ Wildhoney i bardzo mi się to podoba.

Pokaż fragment kodu

— Gary
źródło
Niestety nie działa z przeglądarką Android 4.0.4 Mobile Safari 4.0. :-(
— erik
@erik Naprawdę nie mam dobrego sposobu na testowanie tych wersji, ale działa dla mnie na Androidzie 5.0 z najnowszą wersją Safari (która według Google Play to 1.2, więc jestem zdezorientowany co do twojego 4.0). Jeśli to wymyślisz, chciałbym wiedzieć.
— Gary,
1
To naprawdę sprytne! Zastanawiam się, dlaczego nie jest oznaczona jako poprawna odpowiedź, ponieważ rozwiązuje problem z wdziękiem bez żadnej zależności. Dodanie jQuery tylko w tym celu jest oczywiście przesadą.
— zanona
@zanona Dzięki, ale poprawna odpowiedź została zaznaczona 4 lata wcześniej, więc nie sądzę, by OP zależało zbytnio na innym rozwiązaniu.
— Gary
12
Bardzo podoba mi się twoje podejście i próbowałem dostosować je do mojego przypadku użycia, ale musiałem z niego zrezygnować, gdy zdałem sobie sprawę, że niektóre specyfikacje projektowe, które mam (np. Kolorowanie "aktywnej" części zakresu inaczej niż reszta toru ) nie są możliwe do wykonania z tym. Szukałem więc innego rozwiązania i znalazłem ten naprawdę fajny projekt: refreshless.com/nouislider Jest wolny od zależności, ma ładne i czyste API, jest kompatybilny z AMD i oferuje wiele opcji. Jak dotąd jestem z tego całkiem zadowolony.
— Felix Wienberg
38

Spóźnianie się , ale noUiSlider unika zależności jQuery-ui, czego nie ma zaakceptowana odpowiedź. Jedynym „zastrzeżeniem” jest obsługa IE dla IE9 i nowszych, jeśli starsza wersja IE jest dla Ciebie rozwiązaniem.

Jest również darmowy, open source i może być używany w projektach komercyjnych bez ograniczeń.

Instalacja: Pobierz noUiSlider, wyodrębnij plik CSS i JS gdzieś w systemie plików witryny, a następnie połącz z CSS z nagłówka i do JS z treści:

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

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

Przykładowe użycie: tworzy suwak, który przesuwa się od 0 do 100 i zaczyna od wartości 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
źródło
Wow niesamowite!! To jest dokładnie to, czego potrzebowaliśmy i jest wspaniale opracowane! WHITOUT jQuery
— DavidTaubmann
Jednak powinno być dość łatwo dodać to samodzielnie i wysłać żądanie ściągnięcia do projektu?
— dario_ramos
3
Nie zagłębiłem się w to, ale mogłem użyć suwaka z klawiaturą, więc myślę, że jest teraz zaimplementowany @ptrin :)
— Edu Ruiz
21

Oczywiście możesz po prostu użyć dwóch suwaków nakładających się na siebie i dodać trochę javascript (właściwie nie więcej niż 5 linii), że selektory nie przekraczają wartości min / max (jak w rozwiązaniu @Garys).

W załączeniu znajdziesz krótki fragment zaadaptowany z aktualnego projektu, w tym styl CSS3, pokazujący, co możesz zrobić (tylko webkit). Dodałem również kilka etykiet, aby wyświetlić wybrane wartości.

Używa JQuery, ale wersja vanillajs nie jest magiczna. 

    (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>
Rozwiń fragment

— user1532132
źródło
7
Hej, wygląda świetnie! ale to nie działa w Firefoksie, możesz tylko przeciągnąć maksymalne wejście. Czy udało ci się to naprawić?
— Toni Michel Caubet
5
O stary. Przyszedłem tutaj, aby dodać prawie dokładnie to samo! simple.gy/blog/range-slider-two-handles Moja wersja umieszcza wejścia obok siebie, ale także używa podwójnych wejść.
— SimplGy
6

Właściwie użyłem mojego skryptu bezpośrednio w html. Ale w javascript, kiedy dodajesz detektor zdarzeń oninput dla tego zdarzenia, dane są przekazywane automatycznie. Wystarczy przypisać wartość zgodnie z wymaganiami.

[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>
Rozwiń fragment

— Himabindu
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.