ช่วงประเภทอินพุต HTML5 แสดงค่าช่วง

115

ฉันกำลังสร้างเว็บไซต์ที่ฉันต้องการใช้แถบเลื่อนช่วง (ฉันรู้ว่ามันรองรับเฉพาะเบราว์เซอร์ webkit)

ฉันได้รวมเข้าด้วยกันอย่างสมบูรณ์และใช้งานได้ดี แต่ฉันต้องการใช้textboxเพื่อแสดงค่าสไลด์ปัจจุบัน

ฉันหมายถึงถ้าในตอนแรกแถบเลื่อนอยู่ที่ค่า 5 ดังนั้นในกล่องข้อความควรแสดงเป็น 5 เมื่อฉันเลื่อนค่าในกล่องข้อความควรเปลี่ยน

ฉันสามารถทำได้โดยใช้เพียงCSSหรือhtml. JQueryฉันต้องการที่จะหลีกเลี่ยง เป็นไปได้ไหม?

html  css  range 
— นิราชเชาฮาน
แหล่งที่มา
1
คุณไม่สามารถทำได้หากไม่มีจาวาสคริปต์
— mrtsherman
3
คุณสามารถเกือบจะทำเช่นนี้กับ CSS ใช้:before/ :after, contentและattr()เช่นนี้ อย่างไรก็ตาม: before /: after pseudo-elements จะกินช่วงบางส่วนของแถบเลื่อน (แม้ว่าอาจจะแก้ไขได้) และที่สำคัญที่สุดคือค่าจะไม่อัปเดตหากมีการจัดการตัวเลื่อน อย่างไรก็ตามฉันคิดว่ามันน่าสนใจที่จะออกจากที่นี่ อาจเป็นไปได้ในอนาคต
— waldyrious
3
การแก้ไขโซลูชันของ @waldir ส่งผลให้jsfiddle.net/RjWJ8แม้ว่าจะยังคงใช้ javascript เพื่ออัปเดตแอตทริบิวต์ค่าจากคุณสมบัติ
— user1277170

คำตอบ:

112

สิ่งนี้ใช้ javascript ไม่ใช่ jquery โดยตรง อาจช่วยให้คุณเริ่มต้นได้

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="">
ขยายข้อมูลโค้ด

— ejlepoud
แหล่งที่มา
5
แต่จะมีการทำโดยไม่ใช้จาวาสคริปต์หรือ jquery หรือไม่?
— Niraj Chauhan
15
นี่มาจากmobile-web-app.blogspot.com/2012/03/…ยังคงเป็นจาวาสคริปต์ code<label for = "rangeinput"> ช่วง </label> <input id = "rangeinput" type = "range" min = "0" max = "10" value = "5" onchange = "rangevalue.value = value"> </input> <output id = "rangevalue"> 5 </output>
— ejlepoud
46
ไม่มีใครคิดว่าการจัดให้มีสไลเดอร์ตาบอด จริงอยู่ที่การให้วิดเจ็ตแฟนซีไม่ใช่บทบาทของมาตรฐานพื้นฐาน แต่การแสดงค่าที่เลือกเป็นหัวใจหลักของวิดเจ็ตนี้ดังนั้นฉันคิดว่า (เป็นทางเลือก) การแสดงตัวเลขในรูปแบบพื้นฐานเช่นคำแนะนำเครื่องมือที่ด้านบนของที่จับตัวเลื่อนจะ ออกแบบให้ดีขึ้น
— Basel Shishani
1
@BaselShishani ไม่เห็นด้วยมากกว่านี้ไม่แน่ใจจริงๆว่ากระบวนการคิดเบื้องหลังนั้นคืออะไร
— Noz
2
@BaselShishani: ตามMDN : "range: การควบคุมการป้อนตัวเลขที่ค่าที่แน่นอนไม่สำคัญ" ในแง่ของสมมติฐานนั้นการแสดงค่าที่แน่นอนไม่สมเหตุสมผล แต่ในทางปฏิบัติอาจใช้สำหรับการเลือกค่าที่แน่นอนด้วย
— bodo
166

สำหรับผู้ที่ยังคงค้นหาวิธีแก้ปัญหาโดยไม่มีรหัสจาวาสคริปต์แยกต่างหาก มีวิธีง่ายๆเพียงเล็กน้อยโดยไม่ต้องเขียนฟังก์ชัน javascript หรือ 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>

JsFiddle สาธิต

หากคุณต้องการแสดงค่าในกล่องข้อความเพียงแค่เปลี่ยนเอาต์พุตเป็นอินพุต

ปรับปรุง:

ยังคงเป็น Javascript ที่เขียนภายใน html ของคุณคุณสามารถแทนที่การผูกด้วยโค้ด JS ด้านล่าง:

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

ใช้ Id หรือชื่อขององค์ประกอบทั้งสองได้รับการสนับสนุนในเบราว์เซอร์ morden

— ราหุลอาร์.
แหล่งที่มา
1
+1 รู้ว่าฉันรู้เกี่ยวกับ <output> ปัญหาเดียวคือ EI ไม่รองรับ (W3School) w3schools.com/tags/tryit.asp?filename=tryhtml5_output
— radbyx
4
มันยังคงเป็นจาวาสคริปต์และการผูก oninput กับองค์ประกอบแบบฟอร์มจะแย่กว่าในองค์ประกอบอินพุตเอง
— cuixiping
2
@cuixiping เราสามารถผูก oninput กับองค์ประกอบแทนรูปแบบได้ฉันแค่ทำเพื่อแสดงตัวอย่าง
— Rahul R.
ยกโทษให้กับคำถามที่ล่าช้าและ noob นี้ แต่ตัวจัดการอ้างถึง rangeInput และจำนวนตามชื่อ HTML ได้อย่างไร
— rep_movsd
@rep_movsd จะเหมือนกับ this.formName.rangeInput หรือ this.formName.amount แบบฟอร์มเข้าถึงองค์ประกอบโดยใช้ชื่อของพวกเขา อย่างไรก็ตามฉันไม่แน่ใจ 100%
— Rahul R.
39

เวอร์ชันที่มีอินพุตที่แก้ไขได้:

<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
แหล่งที่มา
6
แทนที่ตัวแปรฟอร์มด้วยthis.nextElementSiblingหรือthis.previousElementSiblingและแทนที่ oninput ด้วย onchange เพื่อรับเวอร์ชันที่ใช้งานได้นอกฟอร์ม jsfiddle.net/Xjxe6/94
— Domino
32

วิธีที่ดียิ่งขึ้นไปกว่านั้นคือการจับเหตุการณ์อินพุตบนอินพุตเองแทนที่จะเป็นแบบฟอร์มทั้งหมด (ประสิทธิภาพที่ชาญฉลาด):

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

นี่คือซอ (พร้อมidเพิ่มตามความคิดเห็นของ Ryan)

— อิลานาฮาคิม
แหล่งที่มา
3
ใน Firefox 27 สิ่งนี้ไม่ได้ผลสำหรับฉันจนกว่าฉันจะเพิ่มid="amount"เอาต์พุตด้วย
— Ryan
สิ่งนี้ควรใช้งานได้โดยไม่มี id:oninput="this.form.amount.value=this.value"
— d1Mm
1
วิธีนี้ใช้งานได้ แต่ฉันจะได้รับค่าปัจจุบันและแสดงเมื่อหน้ารีเฟรชได้อย่างไร : - /
— user2513846
14

หากคุณต้องการให้ค่าปัจจุบันของคุณแสดงใต้แถบเลื่อนและเลื่อนไปพร้อมกันให้ลองทำดังนี้:

<!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>
ขยายข้อมูลโค้ด

โปรดทราบว่าองค์ประกอบอินพุต HTML ประเภทนี้มีคุณลักษณะที่ซ่อนอยู่เช่นคุณสามารถเลื่อนแถบเลื่อนโดยใช้ปุ่มลูกศรซ้าย / ขวา / ลง / ขึ้นเมื่อองค์ประกอบนั้นโฟกัสอยู่ เช่นเดียวกับปุ่ม Home / End / PageDown / PageUp

— drugan
แหล่งที่มา
6

หากคุณใช้หลายสไลด์และคุณสามารถใช้ jQuery ได้คุณสามารถทำสิ่งต่อไปนี้เพื่อจัดการกับตัวเลื่อนหลาย ๆ ตัวได้อย่างง่ายดาย:

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">
ขยายข้อมูลโค้ด

นอกจากนี้โดยใช้oninputกับเหตุการณ์ที่<input type='range'>คุณจะได้รับในขณะที่ลากช่วง

— António Almeida
แหล่งที่มา
5

รุ่นที่สั้นที่สุดโดยไม่form, minหรือ JavaScript ภายนอก

<input type="range" value="0" max="10" oninput="num.value = this.value">
<output id="num">0</output>
ขยายข้อมูลโค้ด

— gengns
แหล่งที่มา
1
นี่คือคำตอบที่ดีที่สุด ...
— Ayo Adesina
2

สำหรับคนที่ไม่สนใจการใช้ jquery นี่เป็นวิธีสั้น ๆ โดยไม่ต้องใช้ 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
แหล่งที่มา
1

ฉันมีโซลูชันที่เกี่ยวข้องกับ JavaScript (Vanilla) แต่เป็นเพียงไลบรารีเท่านั้น คุณต้องรวมไว้ครั้งเดียวจากนั้นสิ่งที่คุณต้องทำคือตั้งค่าsourceแอตทริบิวต์ที่เหมาะสมของอินพุตตัวเลข

sourceแอตทริบิวต์ที่ควรจะเป็นquerySelectorAllตัวเลือกของการป้อนข้อมูลช่วงที่คุณต้องการที่จะรับฟัง

มันยังใช้งานได้กับ selectcs และใช้ได้กับผู้ฟังหลายคน และทำงานในทิศทางอื่น: เปลี่ยนอินพุตตัวเลขและอินพุตช่วงจะปรับ และจะทำงานกับองค์ประกอบที่เพิ่มเข้ามาในหน้าในภายหลัง (ตรวจสอบhttps://codepen.io/HerrSerker/pen/JzaVQgสำหรับสิ่งนั้น)

ทดสอบใน Chrome, Firefox, Edge และ 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>
ขยายข้อมูลโค้ด

— yunzen
แหล่งที่มา
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>
ขยายข้อมูลโค้ด

— หลุยส์
แหล่งที่มา
1
ข้อผิดพลาด: {"message": "Uncaught ReferenceError: getvalor ไม่ได้กำหนด", "filename": " stacksnippets.net/js ", "lineno": 12, "colno": 169}
— Darush
0

ลองสิ่งนี้:

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

และในส่วนjQuery :

 $('#when_change_range').change(function(){
 document.getElementById('text_for_show_range').value=$(this).val();
  });
— mamal
แหล่งที่มา
-3

หากคุณยังคงมองหาคำตอบคุณสามารถใช้ input type = "number" แทน type = "range" min max work ถ้าตั้งตามลำดับนั้น:
1-name
2-maxlength
3-size
4-min
5-max
just คัดลอก

<input  name="X" maxlength="3" size="2" min="1" max="100" type="number" />
— เคียวอดัม
แหล่งที่มา
1
นี่เป็นสิ่งที่ไม่ถูกต้องมันไม่ได้ทำตามที่ผู้เริ่มหัวข้อร้องขอ
— bolvo
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.