Phạm vi loại đầu vào HTML5 hiển thị giá trị phạm vi

114

Tôi đang tạo một trang web mà tôi muốn sử dụng thanh trượt phạm vi (tôi biết nó chỉ hỗ trợ các trình duyệt webkit).

Tôi đã tích hợp nó đầy đủ và hoạt động tốt. Nhưng tôi muốn sử dụng a textboxđể hiển thị giá trị trang chiếu hiện tại.

Ý tôi là nếu ban đầu thanh trượt ở giá trị 5, vì vậy trong hộp văn bản, nó sẽ hiển thị là 5, khi tôi trượt giá trị trong hộp văn bản sẽ thay đổi.

Tôi có thể làm điều này chỉ bằng cách sử dụng CSShoặc html. Tôi muốn tránh JQuery. Nó có khả thi không?

html css range

— Niraj Chauhan
nguồn

1

Bạn không thể làm điều này nếu không có javascript.

— mrtsherman

3

Bạn có thể gần như làm điều này với css sử dụng :before/ :after, contentvà attr(), giống như này . Tuy nhiên, các phần tử giả: before /: after thực sự ăn mất một số phạm vi của thanh trượt (mặc dù có thể điều đó có thể sửa được) và quan trọng nhất, các giá trị không được cập nhật nếu thanh trượt được thao tác. Tuy nhiên, tôi nghĩ sẽ rất thú vị nếu để nó ở đây. Nó có thể trở nên khả thi trong tương lai.

— waldyrious

3

Việc sửa giải pháp của @waldir dẫn đến jsfiddle.net/RjWJ8 mặc dù nó vẫn sử dụng javascript để cập nhật thuộc tính giá trị từ thuộc tính.

— user1277170

110

Điều này sử dụng javascript, không phải jquery trực tiếp. Nó có thể giúp bạn bắt đầu.

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

Mở rộng đoạn mã

— ejlepoud
nguồn

5

nhưng có cách nào để làm điều đó mà không cần javascript hoặc jquery không?

— Niraj Chauhan

15

Đây là từ mobile-web-app.blogspot.com/2012/03/… , vẫn là javascript. code<label for = "rangeinput"> Phạm vi </label> <input id = "rangeinput" type = "range" min = "0" max = "10" value = "5" onchange = "rangevalue.value = value"> </input> <output id = "rangevalue"> 5 </output>

— ejlepoud

46

Có ai khác nghĩ rằng cung cấp một thanh trượt mù là thiếu. Đúng là việc cung cấp các tiện ích ưa thích không phải là tiêu chuẩn cơ bản, nhưng hiển thị giá trị đã chọn là cốt lõi của tiện ích này, vì vậy tôi nghĩ rằng (tùy chọn) hiển thị số ở dạng cơ bản, chẳng hạn như chú giải công cụ trên đầu tay cầm thanh trượt sẽ tạo ra một thiết kế tốt hơn.

— Basel Shishani

1

@BaselShishani Không thể đồng ý hơn, không thực sự chắc chắn quá trình suy nghĩ đằng sau đó là gì.

— Noz

2

@BaselShishani: Theo MDN : "range: Một điều khiển để nhập một số có giá trị chính xác không quan trọng.". Theo giả định đó, không có giá trị chính xác nào có ý nghĩa. Nhưng trong thực tế, nó có thể cũng sẽ được sử dụng để chọn các giá trị chính xác.

— bodo

166

Đối với những người vẫn đang tìm kiếm giải pháp mà không có mã javascript riêng. Có một giải pháp nhỏ dễ dàng mà không cần viết javascript hoặc hàm 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 Demo

Nếu bạn muốn hiển thị giá trị trong hộp văn bản, chỉ cần thay đổi đầu ra thành đầu vào.

Cập nhật:

Nó vẫn là Javascript được viết trong html của bạn, bạn có thể thay thế các ràng buộc bằng mã JS bên dưới:

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

Sử dụng Id hoặc tên của phần tử, cả hai đều được hỗ trợ trong các trình duyệt morden.

— Rahul R.
nguồn

1

+1 biết tôi biết về <output>. Tuy nhiên, vấn đề duy nhất là EI không hỗ trợ nó. (W3School) w3schools.com/tags/tryit.asp?filename=tryhtml5_output

— radbyx

4

Nó vẫn là javascript và việc ràng buộc oninput trên phần tử biểu mẫu còn tệ hơn trên chính phần tử đầu vào.

— cuixiping

2

@cuixiping, chúng tôi có thể ràng buộc oninput trên phần tử thay vì biểu mẫu, tôi chỉ làm điều đó để hiển thị ví dụ.

— Rahul R.

Hãy tha thứ cho câu hỏi muộn và noob này, nhưng làm cách nào để trình xử lý tham chiếu đến rangeInput và số lượng theo tên HTML của chúng?

— rep_movsd

@rep_movsd, nó giống như this.formName.rangeInput hoặc this.formName.amount. Biểu mẫu truy cập các phần tử bằng cách sử dụng tên của chúng. Tuy nhiên, tôi không chắc 100%,

— Rahul R.

39

phiên bản với đầu vào có thể chỉnh sửa:

<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
nguồn

6

Thay thế các biến biểu mẫu bằng this.nextElementSiblinghoặc this.previousElementSiblingvà thay thế oninput bằng onchange để có được phiên bản hoạt động bên ngoài biểu mẫu. jsfiddle.net/Xjxe6/94

— Domino

32

một cách thậm chí còn tốt hơn là bắt sự kiện đầu vào trên chính đầu vào thay vì trên toàn bộ biểu mẫu (hiệu suất khôn ngoan):

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

Đây là một trò chơi (với phần idđược thêm vào theo nhận xét của Ryan).

— Ilana Hakim
nguồn

3

Trong Firefox 27, điều này không hoạt động với tôi cho đến khi tôi thêm vào id="amount"đầu ra.

— Ryan

điều này sẽ hoạt động mà không cần id:oninput="this.form.amount.value=this.value"

— d1Mm

1

điều này hoạt động nhưng làm cách nào để tôi nhận được giá trị hiện tại và hiển thị nó khi trang làm mới? : - /

— user2513846

14

Nếu bạn muốn giá trị hiện tại của mình được hiển thị bên dưới thanh trượt và di chuyển cùng với nó, hãy thử cách này:

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

Mở rộng đoạn mã

Lưu ý rằng loại phần tử đầu vào HTML này có một tính năng ẩn, chẳng hạn như bạn có thể di chuyển thanh trượt bằng các phím mũi tên trái / phải / xuống / lên khi phần tử có tiêu điểm. Tương tự với các phím Home / End / PageDown / PageUp.

— drugan
nguồn

6

Nếu bạn đang sử dụng nhiều trang trình bày và bạn có thể sử dụng jQuery, bạn có thể làm như sau để dễ dàng xử lý nhiều thanh trượt:

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

Mở rộng đoạn mã

Ngoài ra, bằng cách sử dụng oninputtrên, <input type='range'>bạn sẽ nhận được các sự kiện trong khi kéo phạm vi.

— António Almeida
nguồn

5

Phiên bản ngắn mà không form, minhay bên ngoài JavaScript.

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

Mở rộng đoạn mã

— gengns
nguồn

1

đây là câu trả lời hay nhất ...

— Ayo Adesina

2

Đối với những người không quan tâm đến việc sử dụng jquery, đây là một cách ngắn gọn mà không cần sử dụng bất kỳ id nào

<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
nguồn

1

Tôi có một giải pháp liên quan đến JavaScript (Vanilla), nhưng chỉ ở dạng thư viện. Bạn có thể bao gồm nó một lần và sau đó tất cả những gì bạn cần làm là đặt sourcethuộc tính thích hợp của các đầu vào số.

Các sourcethuộc tính nên querySelectorAllchọn các đầu vào phạm vi bạn muốn nghe.

Nó thậm chí còn hoạt động với selectcs. Và nó hoạt động với nhiều người nghe. Và nó hoạt động theo hướng khác: thay đổi đầu vào số và đầu vào phạm vi sẽ điều chỉnh. Và nó sẽ hoạt động trên các phần tử được thêm vào trang sau này (kiểm tra https://codepen.io/HerrSerker/pen/JzaVQg để biết điều đó)

Đã thử nghiệm trong Chrome, Firefox, Edge và 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>

Mở rộng đoạn mã

— yunzen
nguồn

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>

Mở rộng đoạn mã

— luis
nguồn

1

Lỗi: {"message": "Uncaught ReferenceError: getvalor is notined", "filename": " stacksnippets.net/js ", "lineno": 12, "colno": 169}

— Darush 29/07/17

0

Thử cái này :

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

và trong phần jQuery :

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

— mamal
nguồn

-3

nếu bạn vẫn đang tìm kiếm câu trả lời, bạn có thể sử dụng input type = "number" thay cho type = "range" min max work nếu nó được đặt theo thứ tự:
1-name
2-maxlength
3-size
4-min
5-max
just sao chép nó

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

— kyo adam
nguồn

1

Điều này chỉ là sai, nó không làm những gì người khởi xướng chủ đề yêu cầu.

— bolvo