HTML5: Slider dengan dua masukan mungkin?

99

Apakah mungkin membuat slider HTML5 dengan dua nilai input, misalnya untuk memilih kisaran harga? Jika ya, bagaimana caranya?

forms html slider

— sering
sumber

64

Tidak, masukan rentang HTML5 hanya menerima satu masukan. Saya akan merekomendasikan Anda untuk menggunakan sesuatu seperti slider rentang jQuery UI untuk tugas itu.

— Martin Buberl
sumber

Terima kasih untuk tautan dan infonya. Saya harus memeriksa apakah saya bisa menjalankan ini di perangkat seluler.

— sering

33

Beberapa waktu lalu ... tetapi saya berhasil "memalsukan" penggeser ganda dengan menempatkan dua penggeser tepat di atas satu sama lain. Satu dimulai dari nilai min, yang lainnya dimulai dari nilai maks. Saya kira itu curang tapi ... itu berhasil untuk saya.

— sering terjadi

WhatWG setidaknya mendiskusikan penerapannya: html.spec.whatwg.org/multipage/…

— kunambi

7

Saya suka ionRangeSlider sedikit lebih baik daripada slider jQuery UI: ionden.com/a/plugins/ion.rangeSlider/en.html

— Charlotte

4

Pendekatan lain adalah dengan "memalsukan" penggeser ganda dengan kontrol masukan berdampingan: simple.gy/blog/range-slider-two-handles

— SimplGy

79

Saya telah mencari slider ganda yang ringan dan bebas ketergantungan untuk beberapa waktu (sepertinya gila untuk mengimpor jQuery hanya untuk ini) dan sepertinya tidak banyak di luar sana. Saya akhirnya sedikit memodifikasi kode @ Wildhoney dan sangat menyukainya.

Tampilkan cuplikan kode

function getVals(){
  // Get slider values
  var parent = this.parentNode;
  var slides = parent.getElementsByTagName("input");
    var slide1 = parseFloat( slides[0].value );
    var slide2 = parseFloat( slides[1].value );
  // Neither slider will clip the other, so make sure we determine which is larger
  if( slide1 > slide2 ){ var tmp = slide2; slide2 = slide1; slide1 = tmp; }
  
  var displayElement = parent.getElementsByClassName("rangeValues")[0];
      displayElement.innerHTML = slide1 + " - " + slide2;
}

window.onload = function(){
  // Initialize Sliders
  var sliderSections = document.getElementsByClassName("range-slider");
      for( var x = 0; x < sliderSections.length; x++ ){
        var sliders = sliderSections[x].getElementsByTagName("input");
        for( var y = 0; y < sliders.length; y++ ){
          if( sliders[y].type ==="range" ){
            sliders[y].oninput = getVals;
            // Manually trigger event first time to display values
            sliders[y].oninput();
          }
        }
      }
}

  section.range-slider {
    position: relative;
    width: 200px;
    height: 35px;
    text-align: center;
}

section.range-slider input {
    pointer-events: none;
    position: absolute;
    overflow: hidden;
    left: 0;
    top: 15px;
    width: 200px;
    outline: none;
    height: 18px;
    margin: 0;
    padding: 0;
}

section.range-slider input::-webkit-slider-thumb {
    pointer-events: all;
    position: relative;
    z-index: 1;
    outline: 0;
}

section.range-slider input::-moz-range-thumb {
    pointer-events: all;
    position: relative;
    z-index: 10;
    -moz-appearance: none;
    width: 9px;
}

section.range-slider input::-moz-range-track {
    position: relative;
    z-index: -1;
    background-color: rgba(0, 0, 0, 1);
    border: 0;
}
section.range-slider input:last-of-type::-moz-range-track {
    -moz-appearance: none;
    background: none transparent;
    border: 0;
}
  section.range-slider input[type=range]::-moz-focus-outer {
  border: 0;
}

<!-- This block can be reused as many times as needed -->
<section class="range-slider">
  <span class="rangeValues"></span>
  <input value="5" min="0" max="15" step="0.5" type="range">
  <input value="10" min="0" max="15" step="0.5" type="range">
</section>

Luaskan cuplikan

— Gary
sumber

Sayangnya itu tidak bekerja dengan browser Android 4.0.4 Mobile Safari 4.0. :-(

— erik

@erik Saya tidak benar-benar memiliki cara yang baik untuk menguji versi tersebut, tetapi bekerja untuk saya di Android 5.0 dengan versi terbaru Safari (yang dikatakan google play adalah 1.2, jadi saya bingung tentang 4.0 Anda). Jika Anda mengetahuinya, saya ingin tahu.

— Gary

1

Itu sangat pintar! Saya bertanya-tanya bagaimana itu tidak ditandai sebagai jawaban yang benar karena memecahkan masalah dengan baik tanpa ketergantungan apa pun. Menambahkan jQuery hanya untuk melakukan itu jelas berlebihan.

— zanona

@zanona Terima kasih, tetapi jawaban yang benar telah ditandai 4 tahun sebelumnya, jadi menurut saya OP tidak terlalu peduli untuk solusi lain.

— Gary

11

Saya sangat menyukai pendekatan Anda dan mencoba menyesuaikannya dengan kasus penggunaan saya tetapi harus menyerah ketika saya menyadari bahwa beberapa spesifikasi desain yang saya miliki (misalnya, mewarnai bagian "aktif" dari rentang tersebut secara berbeda dari trek lainnya ) tidak mungkin diterapkan dengan ini. Jadi saya mencari solusi lain dan menemukan proyek yang sangat rapi ini: refreshless.com/nouislider Ini bebas ketergantungan, memiliki API yang bagus dan bersih, kompatibel dengan AMD, dan menawarkan banyak opsi. Sejauh ini saya cukup senang dengan itu.

— Felix Wienberg

37

Datang terlambat, tapi noUiSlider menghindari ketergantungan jQuery-ui, yang tidak dimiliki oleh jawaban yang diterima. Satu-satunya "peringatan" adalah dukungan IE untuk IE9 dan yang lebih baru, jika IE yang lama adalah pemecah kesepakatan untuk Anda.

Ini juga gratis, open source dan dapat digunakan dalam proyek komersial tanpa batasan.

Instalasi: Unduh noUiSlider, ekstrak file CSS dan JS di suatu tempat di sistem file situs Anda, lalu tautkan ke CSS dari head dan ke JS dari body:

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

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

Contoh penggunaan: Membuat penggeser dari 0 hingga 100, dan mulai disetel ke 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
sumber

Wow luar biasa!! Inilah yang kami butuhkan dan dikembangkan dengan luar biasa! WHITOUT jQuery

— DavidTaubmann

Akan tetapi, seharusnya cukup mudah untuk menambahkannya sendiri dan mengirim permintaan tarik ke proyek?

— dario_ramos

3

Saya tidak menggalinya, tapi saya bisa menggunakan slider dengan keyboard, jadi saya pikir itu diterapkan sekarang @ptrin :)

— Edu Ruiz

21

Tentu Anda dapat dengan mudah menggunakan dua slider yang saling overlay dan menambahkan sedikit javascript (sebenarnya tidak lebih dari 5 baris) yang penyeleksi tidak melebihi nilai min / max (seperti dalam solusi @Garys).

Terlampir Anda akan menemukan cuplikan pendek yang diadaptasi dari proyek saat ini termasuk beberapa gaya CSS3 untuk menunjukkan apa yang dapat Anda lakukan (hanya webkit). Saya juga menambahkan beberapa label untuk menampilkan nilai yang dipilih.

Ini menggunakan JQuery tetapi versi vanillajs bukanlah sihir.

    (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>

Luaskan cuplikan

— pengguna1532132
sumber

7

Hei, tampak hebat! tetapi tidak berfungsi di Firefox, Anda hanya dapat menyeret input maksimal. Apakah Anda berhasil memperbaikinya?

— Toni Michel Caubet

5

Oh man. Saya datang ke sini untuk menambahkan hal yang hampir persis sama! simple.gy/blog/range-slider-two-handles Versi saya menempatkan input secara berdampingan, tetapi juga menggunakan input ganda.

— SimplGy

5

Sebenarnya saya menggunakan skrip saya di html secara langsung. Tetapi di javascript ketika Anda menambahkan event listener oninput untuk acara ini, itu memberikan data secara otomatis. Anda hanya perlu menetapkan nilai sesuai kebutuhan Anda.

[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>

Luaskan cuplikan

— Himabindu
sumber