Rentang jenis masukan HTML5 menunjukkan nilai rentang

114

Saya membuat situs web di mana saya ingin menggunakan slider rentang (saya tahu itu hanya mendukung browser webkit).

Saya telah mengintegrasikannya sepenuhnya dan berfungsi dengan baik. Tapi saya ingin menggunakan a textboxuntuk menunjukkan nilai slide saat ini.

Maksud saya jika awalnya slider berada pada nilai 5, jadi di kotak teks itu harus ditampilkan sebagai 5, ketika saya menggeser nilai di kotak teks harus berubah.

Dapatkah saya melakukan ini hanya dengan CSSatau html. Saya ingin menghindari JQuery. Apa itu mungkin?

html css range Niraj Chauhan
sumber

1

Anda tidak dapat melakukan ini tanpa javascript.

mrtsherman

3

Anda hampir dapat melakukan ini dengan css menggunakan :before/ :after, contentdan attr(), seperti ini . Namun, pseudo-element: before /: after benar-benar memakan beberapa rentang slider (meskipun mungkin itu bisa diperbaiki), dan yang paling penting, nilainya tidak diperbarui jika slider dimanipulasi. Namun demikian, saya pikir akan menarik untuk meninggalkan ini di sini. Ini mungkin menjadi mungkin di masa depan.

waldyrious

3

Memperbaiki hasil solusi @waldir di jsfiddle.net/RjWJ8 meskipun masih menggunakan javascript untuk memperbarui atribut nilai dari properti.

pengguna1277170

110

Ini menggunakan javascript, bukan jquery secara langsung. Ini mungkin membantu Anda memulai.

function updateTextInput(val) {
          document.getElementById('textInput').value=val; 
        }

<input type="range" name="rangeInput" min="0" max="100" onchange="updateTextInput(this.value);">
<input type="text" id="textInput" value="">

Luaskan cuplikan

ejlepoud
sumber

5

tetapi apakah ada cara untuk melakukannya tanpa javascript atau jquery?

Niraj Chauhan

15

Ini dari mobile-web-app.blogspot.com/2012/03/… , masih javascript. code<label for = "rangeinput"> Range </label> <input id = "rangeinput" type = "range" min = "0" max = "10" value = "5" onchange = "rangevalue.value = value"> </input> <output id = "rangevalue"> 5 </output>

ejlepoud

46

Apakah ada orang lain yang berpikir bahwa menyediakan slider buta itu kurang. Benar bahwa menyediakan widget mewah bukanlah peran dari standar dasar, tetapi menunjukkan nilai yang dipilih adalah inti dari widget ini, jadi saya pikir (opsional) menampilkan nomor dalam bentuk dasar seperti tooltip di atas pegangan slider akan buatlah desain yang lebih baik.

Basel Shishani

1

@BaselShishani Sangat setuju, tidak begitu yakin apa proses berpikir di balik itu.

Noz

2

@BaselShishani: Menurut MDN : "range: Kontrol untuk memasukkan angka yang nilai pastinya tidak penting.". Berdasarkan asumsi tersebut, tidak menunjukkan nilai pasti masuk akal. Tetapi dalam praktiknya, ini mungkin juga akan digunakan untuk memilih nilai yang tepat.

bodo

166

Bagi mereka yang masih mencari solusi tanpa kode javascript terpisah. Ada sedikit solusi mudah tanpa menulis fungsi javascript atau jquery:

<form name="registrationForm">
   <input type="range" name="ageInputName" id="ageInputId" value="24" min="1" max="100" oninput="ageOutputId.value = ageInputId.value">
   <output name="ageOutputName" id="ageOutputId">24</output>
</form>

Demo JsFiddle

Jika Anda ingin menampilkan nilai dalam kotak teks, cukup ubah output menjadi input.

Memperbarui:

Ini masih Javascript yang ditulis dalam html Anda, Anda dapat mengganti binding dengan kode JS di bawah ini:

 document.registrationForm.ageInputId.oninput = function(){
    document.registrationForm.ageOutputId.value = document.registrationForm.ageInputId.value;
 }

Gunakan Id atau nama elemen, keduanya didukung di browser morden.

Rahul R.
sumber

1

+1 tahu saya tahu tentang <output>. Satu-satunya masalah adalah EI tidak mendukungnya. (W3School) w3schools.com/tags/tryit.asp?filename=tryhtml5_output

radbyx

4

Ini masih javascript, dan lebih buruk untuk mengikat oninput pada elemen formulir daripada pada elemen input itu sendiri.

cuixiping

2

@ Cuixiping, kita dapat mengikat oninput pada elemen daripada bentuk, saya hanya melakukannya untuk menunjukkan contoh.

Rahul R.

Maafkan pertanyaan terlambat dan noob ini, tetapi bagaimana penangan merujuk ke rangeInput dan jumlah dengan nama HTML mereka?

rep_movsd

@rep_movsd, ini sama dengan this.formName.rangeInput atau this.formName.amount. Formulir mengakses elemen menggunakan namanya. Namun saya tidak 100% yakin,

Rahul R.

39

versi dengan masukan yang dapat diedit:

<form>
    <input type="range" name="amountRange" min="0" max="20" value="0" oninput="this.form.amountInput.value=this.value" />
    <input type="number" name="amountInput" min="0" max="20" value="0" oninput="this.form.amountRange.value=this.value" />
</form>

http://jsfiddle.net/Xjxe6/

d1Mm
sumber

6

Ganti variabel formulir dengan this.nextElementSiblingatau this.previousElementSiblingdan ganti oninput dengan onchange untuk mendapatkan versi yang berfungsi di luar formulir. jsfiddle.net/Xjxe6/94

Domino

32

cara yang lebih baik adalah dengan menangkap peristiwa masukan pada masukan itu sendiri daripada di seluruh formulir (kinerja bijaksana):

<input type="range" id="rangeInput" name="rangeInput" min="0" max="20" value="0"
       oninput="amount.value=rangeInput.value">                                                       

<output id="amount" name="amount" for="rangeInput">0</output>

Ini biola (dengan idditambahkan sesuai komentar Ryan).

Ilana Hakim
sumber

3

Di Firefox 27, ini tidak berhasil untuk saya sampai saya menambahkan id="amount"outputnya juga.

Ryan

ini harus bekerja tanpa id:oninput="this.form.amount.value=this.value"

d1Mm

1

ini berfungsi, tetapi bagaimana cara mendapatkan nilai saat ini dan menampilkannya saat halaman disegarkan? : - /

user2513846

14

Jika Anda ingin nilai Anda saat ini ditampilkan di bawah penggeser dan bergerak bersamanya, coba ini:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>MySliderValue</title>

</head>
<body>
  <h1>MySliderValue</h1>

  <div style="position:relative; margin:auto; width:90%">
    <span style="position:absolute; color:red; border:1px solid blue; min-width:100px;">
    <span id="myValue"></span>
    </span>
    <input type="range" id="myRange" max="1000" min="0" style="width:80%"> 
  </div>

  <script type="text/javascript" charset="utf-8">
var myRange = document.querySelector('#myRange');
var myValue = document.querySelector('#myValue');
var myUnits = 'myUnits';
var off = myRange.offsetWidth / (parseInt(myRange.max) - parseInt(myRange.min));
var px =  ((myRange.valueAsNumber - parseInt(myRange.min)) * off) - (myValue.offsetParent.offsetWidth / 2);

  myValue.parentElement.style.left = px + 'px';
  myValue.parentElement.style.top = myRange.offsetHeight + 'px';
  myValue.innerHTML = myRange.value + ' ' + myUnits;

  myRange.oninput =function(){
    let px = ((myRange.valueAsNumber - parseInt(myRange.min)) * off) - (myValue.offsetWidth / 2);
    myValue.innerHTML = myRange.value + ' ' + myUnits;
    myValue.parentElement.style.left = px + 'px';
  };
  </script>

</body>
</html>

Luaskan cuplikan

Perhatikan bahwa jenis elemen input HTML ini memiliki satu fitur tersembunyi, seperti Anda dapat memindahkan slider dengan tombol panah kiri / kanan / bawah / atas saat elemen tersebut difokuskan. Hal yang sama dengan tombol Home / End / PageDown / PageUp.

apoteker
sumber

6

Jika Anda menggunakan banyak slide , dan Anda dapat menggunakan jQuery, Anda dapat melakukan hal berikut untuk menangani beberapa slider dengan mudah:

function updateRangeInput(elem) {
  $(elem).next().val($(elem).val());
}

input { padding: 8px; border: 1px solid #ddd; color: #555; display: block; }
input[type=text] { width: 100px; }
input[type=range] { width: 400px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="range" min="0" max="100" oninput="updateRangeInput(this)" value="0">
<input type="text" value="0">

<input type="range" min="0" max="100" oninput="updateRangeInput(this)" value="50">
<input type="text" value="50">

Luaskan cuplikan

Juga, dengan menggunakan oninputdi <input type='range'>Anda akan menerima acara sambil menyeret rentang.

António Almeida
sumber

5

Versi terpendek tanpa form, minatau JavaScript eksternal.

<input type="range" value="0" max="10" oninput="num.value = this.value">
<output id="num">0</output>

Luaskan cuplikan

gengns
sumber

1

ini adalah jawaban terbaik ...

Ayo Adesina

2

Bagi orang yang tidak peduli dengan penggunaan jquery, berikut adalah cara singkat tanpa menggunakan id

<label> userAvatar :
  <input type="range" name="userAvatar" min="1" max="100" value="1"
         onchange="$('~ output', this).val(value)" 
         oninput="$('~ output', this).val(value)">
  <output>1</output>
</label>

hexaJer
sumber

1

Saya memiliki solusi yang melibatkan (Vanilla) JavaScript, tetapi hanya sebagai perpustakaan. Anda harus memasukkannya sekali dan kemudian yang perlu Anda lakukan adalah mengaturnyasource atribut yang dari input nomor.

The sourceatribut harusquerySelectorAll pemilih dari berbagai masukan yang ingin Anda mendengarkan.

Ia bahkan bekerja dengan selektif. Dan itu bekerja dengan banyak pendengar. Dan itu bekerja ke arah lain: ubah input angka dan input jangkauan akan menyesuaikan. Dan itu akan bekerja pada elemen yang ditambahkan kemudian ke halaman (periksa https://codepen.io/HerrSerker/pen/JzaVQg untuk itu)

Diuji di Chrome, Firefox, Edge, dan IE11

;(function(){
  
  function emit(target, name) {
    var event
    if (document.createEvent) {
      event = document.createEvent("HTMLEvents");
      event.initEvent(name, true, true);
    } else {
      event = document.createEventObject();
      event.eventType = name;
    }

    event.eventName = name;

    if (document.createEvent) {
      target.dispatchEvent(event);
    } else {
      target.fireEvent("on" + event.eventType, event);
    }    
  }

  var outputsSelector = "input[type=number][source],select[source]";
  
  function onChange(e) {
    var outputs = document.querySelectorAll(outputsSelector)
    for (var index = 0; index < outputs.length; index++) {
      var item = outputs[index]
      var source = document.querySelector(item.getAttribute('source'));
      if (source) {
        if (item === e.target) {
          source.value = item.value
          emit(source, 'input')
          emit(source, 'change')
        }

        if (source === e.target) {
          item.value = source.value
        }
      }
    }
  }
  
  document.addEventListener('change', onChange)
  document.addEventListener('input', onChange)
}());

<div id="div">
  <input name="example" type="range" max="2250000" min="-200000" value="0" step="50000">
  <input id="example-value" type="number" max="2250000" min="-200000" value="0" step="50000" source="[name=example]">
  <br>

  <input name="example2" type="range" max="2240000" min="-160000" value="0" step="50000">
  <input type="number" max="2240000" min="-160000" value="0" step="50000" source="[name=example2]">
  <input type="number" max="2240000" min="-160000" value="0" step="50000" source="[name=example2]">
  <br>
  
  <input name="example3" type="range" max="20" min="0" value="10" step="1">
  <select source="[name=example3]">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
  </select>
  <br>
  
</div>
<br>

Luaskan cuplikan

yunzen
sumber

0

<form name="registrationForm">
    <input type="range" name="ageInputName" id="ageInputId" value="24" min="1" max="10" onchange="getvalor(this.value);" oninput="ageOutputId.value = ageInputId.value">
    <input type="text" name="ageOutputName" id="ageOutputId"></input>
</form>

Luaskan cuplikan

luis
sumber

1

Kesalahan: {"message": "Kesalahan Referensi Tidak Tertangkap: getvalor tidak ditentukan", "nama file": " stacksnippets.net/js ", "lineno": 12, "colno": 169}

Darush

0

Coba ini :

 <input min="0" max="100" id="when_change_range" type="range">
 <input type="text" id="text_for_show_range">

dan di bagian jQuery :

 $('#when_change_range').change(function(){
 document.getElementById('text_for_show_range').value=$(this).val();
  });

mamal
sumber

-3

jika anda masih mencari jawaban anda dapat menggunakan input type = "number" di tempat type = "range" min max bekerja jika diatur dalam urutan seperti itu:
1-nama
2-maxlength
3-size
4-min
5-max
just salin itu

<input  name="X" maxlength="3" size="2" min="1" max="100" type="number" />

kyo adam
sumber

1

Ini hanya salah, ia tidak melakukan apa yang diminta oleh pembuka topik.

bolvo

Rentang jenis masukan HTML5 menunjukkan nilai rentang

Jawaban: