HTML5 giriş türü aralığı, aralık değerini gösterir

115

Aralık kaydırıcısını kullanmak istediğim bir web sitesi yapıyorum (yalnızca webkit tarayıcılarını desteklediğini biliyorum).

Tamamen entegre ettim ve iyi çalışıyor. Ancak textboxmevcut slayt değerini göstermek için a kullanmak istiyorum .

Demek istediğim, kaydırıcı başlangıçta 5 değerindeyse, bu nedenle metin kutusunda 5 olarak gösterilmeli, metin kutusundaki değeri kaydırdığımda değişmeli.

Bunu yalnızca CSSveya kullanarak yapabilir miyim html? Kaçınmak istiyorum JQuery. Mümkün mü?

html  css  range 
— Niraj Chauhan
kaynak
1
Bunu javascript olmadan yapamazsınız.
— mrtsherman
3
Sen edebilirsiniz neredeyse kullanarak css ile bunu :before/ :after, contentve attr()benzeri, bu . Bununla birlikte,: before /: after sözde öğeler aslında kaydırıcının aralığının bir kısmını tüketir (belki bu düzeltilebilir olsa da) ve en önemlisi, kaydırıcı değiştirilirse değerler güncellenmez. Yine de, bunu burada bırakmanın ilginç olacağını düşündüm. Gelecekte mümkün olabilir.
— waldyrious
3
@Waldir çözümünün düzeltilmesi jsfiddle.net/RjWJ8 ile sonuçlanır, ancak yine de özellikten değer özniteliğini güncellemek için javascript kullanır.
— user1277170

Yanıtlar:

112

Bu, doğrudan jquery'yi değil, javascript kullanır. Başlamanıza yardımcı olabilir.

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="">
Snippet'i genişlet

— ejlepoud
kaynak
5
ancak javascript veya jquery olmadan yapmanın bir yolu var mı?
— Niraj Chauhan
15
Bu, mobile-web-app.blogspot.com/2012/03/… adresinden , hala javascript. code<label for = "rangeinput"> Aralık </label> <input id = "rangeinput" type = "range" min = "0" max = "10" value = "5" onchange = "rangevalue.value = değer"> </input> <output id = "rangevalue"> 5 </output>
— ejlepoud
46
Başka biri kör kaydırıcı sağlamanın eksik olduğunu düşünüyor mu? Süslü widget sağlamanın temel standardın rolü olmadığı, ancak seçilen değeri göstermenin bu widget'ın özü olduğu doğrudur, bu nedenle (isteğe bağlı olarak) sayıyı kaydırıcı tutamacının üstünde bir araç ipucu gibi temel bir biçimde göstermenin daha iyi bir tasarım yapın.
— Basel Shishani
1
@BaselShishani Daha fazla anlaşamadım, arkasındaki düşünce sürecinin ne olduğundan emin değilim.
— Noz
2
@BaselShishani: MDN'ye göre : "aralık: Tam değeri önemli olmayan bir sayı girmek için bir kontrol." Bu varsayımın ışığında, kesin bir değer göstermek mantıklı değil. Ancak pratikte muhtemelen kesin değerleri seçmek için de kullanılacaktır.
— bodo
166

Ayrı bir javascript kodu olmadan hala çözüm arayanlar için. Bir javascript veya jquery işlevi yazmadan çok az kolay çözüm vardır:

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

JsFiddle Demo

Değeri metin kutusunda göstermek istiyorsanız, çıktıyı giriş olarak değiştirmeniz yeterlidir.

Güncelleme:

Hala javascript html'nizde yazılmıştır, bağları aşağıdaki JS kodu ile değiştirebilirsiniz:

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

Öğenin kimliğini veya adını kullanın, her ikisi de morden tarayıcılarda desteklenir.

— Rahul R.
kaynak
1
+1, <output> hakkında bildiğimi biliyor. Tek sorun, EI'nin bunu desteklememesidir. (W3School) w3schools.com/tags/tryit.asp?filename=tryhtml5_output
— radbyx
4
Hala javascript ve oninput'u form öğesinde bağlamak, giriş öğesinin kendisinden daha kötüdür.
— cuixiping
2
@cuixiping, oninput'u form yerine element üzerine bağlayabiliriz, sadece örnek göstermek için yaptım.
— Rahul R.
Bu gecikmiş soruyu affedin, ancak işleyici, HTML adlarına göre rangeInput'a ve miktar'a nasıl başvuruyor?
— rep_movsd
@rep_movsd, this.formName.rangeInput veya this.formName.amount ile aynıdır. Form öğelere adlarını kullanarak erişir. Ancak% 100 emin değilim,
— Rahul R.
39

düzenlenebilir girdili sürüm:

<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
kaynak
6
Form değişkenlerini this.nextElementSiblingveya this.previousElementSiblingile değiştirin ve bir formun dışında çalışan bir sürüm almak için oninput ile onchange değiştirin. jsfiddle.net/Xjxe6/94
— Domino
32

Daha da iyi bir yol, girdi olayını tüm formdan ziyade girdinin kendisinde yakalamaktır (performans açısından):

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

İşte bir keman ( idRyan'ın yorumuna göre eklenen).

— Ilana Hakim
kaynak
3
Firefox 27'de, id="amount"çıktı için de ekleyene kadar bu benim için işe yaramadı .
— Ryan
bu kimlik olmadan çalışmalıdır:oninput="this.form.amount.value=this.value"
— d1Mm
1
bu işe yarıyor, ancak mevcut değere nasıl ulaşabilirim ve sayfa yenilendiğinde bunu nasıl gösterebilirim? : - /
— user2513846
14

Mevcut değerinizin kaydırıcının altında görüntülenmesini ve onunla birlikte hareket etmesini istiyorsanız, şunu deneyin:

<!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>
Snippet'i genişlet

Bu tür bir HTML giriş öğesinin, öğenin odaklandığı zaman kaydırıcıyı sol / sağ / aşağı / yukarı ok tuşlarıyla hareket ettirebileceğiniz gibi gizli bir özelliği olduğunu unutmayın. Home / End / PageDown / PageUp tuşlarıyla aynı.

— Drugan
kaynak
6

Birden çok slayt kullanıyorsanız ve jQuery'yi kullanabiliyorsanız, birden çok kaydırıcıyla kolayca başa çıkmak için aşağıdakileri yapabilirsiniz:

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">
Snippet'i genişlet

Ayrıca, kullanarak oninputüzerine <input type='range'>aralık sürüklerken etkinlikleri alırsınız.

— António Almeida
kaynak
5

Olmadan En Kısa versiyonu form, minveya harici JavaScript.

<input type="range" value="0" max="10" oninput="num.value = this.value">
<output id="num">0</output>
Snippet'i genişlet

— gengns
kaynak
1
bu en iyi cevap ...
— Ayo Adesina
2

Jquery kullanımını önemsemeyen insanlar için, burada herhangi bir kimlik kullanmadan kısa bir yol var

<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
kaynak
1

(Vanilya) JavaScript içeren bir çözümüm var, ancak yalnızca bir kitaplık olarak. Bunu bir kez eklemeniz gerekir ve sonra yapmanız gereken tek şey sourcesayı girişlerinin uygun özniteliğini ayarlamaktır .

sourceNitelik olmalıdır querySelectorAlldinlemek istediğiniz aralık girişinin seçici.

Seçicilerle bile çalışır. Ve birden çok dinleyiciyle çalışır. Ve diğer yönde çalışır: sayı girişini değiştirin ve aralık girişi ayarlanacaktır. Ve sayfaya daha sonra eklenen öğeler üzerinde çalışacaktır ( bunun için https://codepen.io/HerrSerker/pen/JzaVQg adresini kontrol edin )

Chrome, Firefox, Edge ve IE11'de test edildi

;(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>
Snippet'i genişlet

— yunzen
kaynak
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>
Snippet'i genişlet

— luis
kaynak
1
Hata: {"message": "Yakalanmamış Referans Hatası: getvalor tanımlanmadı", "dosya adı": " stacksnippets.net/js ", "lineno": 12, "colno": 169}
— Darush
0

Bunu dene :

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

ve jQuery bölümünde:

 $('#when_change_range').change(function(){
 document.getElementById('text_for_show_range').value=$(this).val();
  });
— mamal
kaynak
-3

Hala yanıtı arıyorsanız, şu sırayla ayarlanmışsa type = "range" min max iş yerine input type = "number" kullanabilirsiniz:
1-name
2-maxlength
3-size
4-min
5-max
sadece kopyala

<input  name="X" maxlength="3" size="2" min="1" max="100" type="number" />
— kyo adam
kaynak
1
Bu sadece yanlış, konu başlangıcının istediği şeyi yapmıyor.
— bolvo
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.