HTML5入力タイプ範囲表示範囲値

114

範囲スライダーを使用したいWebサイトを作成しています（Webkitブラウザーのみをサポートしていることがわかっています）。

私はそれを完全に統合し、うまく動作します。しかし、私はtextbox現在のスライド値を表示するために使用したいと思います。

つまり、最初のスライダーの値が5である場合、テキストボックスでは5と表示されるはずです。テキストボックスの値をスライドすると、変化するはずです。

私は使用してこれを行うことができますCSSかhtml。避けたいJQuery。出来ますか？

html  css  range 
— ニライ・チャウハン
ソース
1
JavaScriptなしではこれを行うことはできません。
— mrtsherman 2012
3
あなたはできるほとんど使用して、CSSでこれを行う:before/ :after、contentとattr()のように、これ。ただし、：before /：after疑似要素は実際にはスライダーの範囲の一部を消費します（ただし、これは修正可能かもしれません）。最も重要なのは、スライダーが操作されても値が更新されないことです。それでも、ここに残しておくのは面白いと思いました。将来可能になるかもしれません。
— 騒々しい2013
3
@waldirの解決策を修正するとjsfiddle.net/RjWJ8が生成されますが、javascriptを使用してプロパティから値属性を更新します。
— user1277170 2014年

回答:

110

これは、jqueryを直接使用するのではなく、javascriptを使用します。それはあなたが始めるのに役立つかもしれません。

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
しかし、とにかくjavascriptまたはjqueryなしでそれを行う方法はありますか？
— Niraj Chauhan
15
これはmobile-web-app.blogspot.com/2012/03/…からのものですが、まだjavascriptです。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
他の誰かが、ブラインドスライダーを提供することに欠けていると思いますか 派手なウィジェットを提供することは基本的な標準の役割ではありませんが、選択された値を表示することはこのウィジェットの中核であるため、（オプションで）スライダーハンドルの上にツールチップなどの基本的な形式で数値を表示すると、より良いデザインを作る。
— バーゼルシシャニ2013
1
@BaselShishaniそれ以上のことに同意できませんでした、その背後にある思考プロセスが何であったか本当にわかりませんでした。
— Noz 2013
2
@BaselShishani：MDNによれば、「範囲：正確な値が重要ではない数値を入力するためのコントロール」。その仮定に照らして、正確な値を示さないことは理にかなっています。しかし実際には、おそらく正確な値を選択するためにも使用されます。
— ボードー
166

個別のJavaScriptコードを使用せずに解決策をまだ探している人のために。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デモ

テキストボックスに値を表示する場合は、出力を入力に変更するだけです。

更新：

それはまだあなたのhtml内に書かれたJavascriptです、あなたはバインディングを以下のJSコードで置き換えることができます：

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

要素のIDまたは名前を使用します。どちらもmordenブラウザーでサポートされています。

— ラフル・R
ソース
1
+1 <出力>について知っていることを知っている。唯一の問題は、EIがサポートしていないことです。（W3School）w3schools.com/tags/tryit.asp?filename=tryhtml5_output
— radbyx
4
それはまだJavaScriptであり、フォーム要素のoninputを入力要素自体にバインドするよりも悪いです。
— 2014年
2
@cuixiping、フォームの代わりに要素のoninputをバインドできます。例を示すためにやっただけです。
— Rahul R.
この遅くてnoobの質問を許してください、しかしハンドラーはどのように彼らのHTML名によってrangeInputと量を参照しますか？
— 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
— ドミノ
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ライアンのコメントに従って追加されています）。

— イラナ・ハキム
ソース
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入力要素には1つの非表示機能があることに注意してください。たとえば、要素にフォーカスがあるときに、左/右/下/上矢印キーでスライダーを移動できます。Home / End / PageDown / PageUpキーと同じです。

— ドラッグ
ソース
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'>、範囲をドラッグしているときにイベントを受け取ります。

— アントニオアルメイダ
ソース
4

なしの最短バージョン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>
— ヘキサジャー
ソース
1

（バニラ）JavaScriptを含むソリューションがありますが、ライブラリとしてのみです。あなたはそれを一度含める必要があり、その後あなたがする必要が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>
スニペットを展開

— 雲仙
ソース
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 is not defined"、 "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();
  });
— 哺乳類
ソース
-3

それでも答えを探している場合は、type = "range"の代わりにinput type = "number"を使用できます。minmax 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
これは間違っています。トピックスターターが要求したことは行いません。
— ボルボ2018
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.