Диапазон типа ввода HTML5 показывает значение диапазона


115

Я создаю веб-сайт, на котором хочу использовать слайдер диапазона (я знаю, что он поддерживает только браузеры webkit).

Я полностью интегрировал его и работает нормально. Но я хотел бы использовать textboxдля отображения текущего значения слайда.

Я имею в виду, что если изначально ползунок установлен на значение 5, поэтому в текстовом поле он должен отображаться как 5, когда я сдвигаю значение в текстовом поле, должно измениться.

Могу я сделать это, используя только CSSили html. Я хочу избежать JQuery. Является ли это возможным?


1
Вы не можете этого сделать без javascript.
mrtsherman

3
Вы можете почти сделать это с помощью css, используя :before/ :after, contentи attr()вот так . Однако псевдоэлементы: before /: after фактически съедают часть диапазона ползунка (хотя, возможно, это поправимо), и, что наиболее важно, значения не обновляются, если ползунком манипулируют. Тем не менее, я подумал, что было бы интересно оставить это здесь. Это может стать возможным в будущем.
waldyrious 02

3
Исправление решения @waldir приводит к jsfiddle.net/RjWJ8, хотя он по-прежнему использует javascript для обновления атрибута value из свойства.
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="">


5
но есть ли способ сделать это без javascript или jquery?
Нирадж Чаухан

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
Кто-нибудь еще думает, что не хватает слепого слайдера. Верно то, что предоставление модных виджетов не является ролью базового стандарта, но отображение выбранного значения является основным для этого виджета, поэтому я думаю, что (необязательно) отображение числа в базовой форме, такой как всплывающая подсказка поверх ручки ползунка, будет сделать для лучшего дизайна.
Basel Shishani

1
@BaselShishani Не могу с этим согласиться, не совсем уверен, какой мыслительный процесс стоял за этим.
Noz

2
@BaselShishani: Согласно MDN : «диапазон: элемент управления для ввода числа, точное значение которого не имеет значения». В свете этого предположения нет смысла указывать точное значение. Но на практике он, вероятно, также будет использоваться для выбора точных значений.
bodo 04

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

Если вы хотите отобразить значение в текстовом поле, просто измените вывод на ввод.


Обновить:

Это все еще Javascript, написанный в вашем html, вы можете заменить привязки следующим кодом JS:

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

Либо используйте идентификатор элемента, либо имя, оба поддерживаются в современных браузерах.


1
+1 знаю, что знаю о <output>. Проблема только в том, что EI его не поддерживает. (W3School) w3schools.com/tags/tryit.asp?filename=tryhtml5_output
radbyx

4
Это все еще javascript, и привязать oninput к элементу формы хуже, чем к самому элементу input.
cuixiping

2
@cuixiping, мы можем привязать oninput к элементу вместо формы, я просто сделал это, чтобы показать пример.
Рахул Р.

Простите этот запоздалый вопрос, но как обработчик ссылается на rangeInput и amount по их HTML-именам?
rep_movsd 04

@rep_movsd, это то же самое, что this.formName.rangeInput или this.formName.amount. Форма доступа к элементам по их имени. Однако я не уверен на 100%,
Рахул Р.

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/


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добавлением в соответствии с комментарием Райана).


3
В Firefox 27 это не работало для меня, пока я тоже не добавил id="amount"для вывода.
Ryan

это должно работать без id:oninput="this.form.amount.value=this.value"
d1Mm

1
это работает, но как мне получить текущее значение и показать его при обновлении страницы? : - /
user2513846 03

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.


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'>вы будете получать события при перетаскивании диапазона.



2

Для людей, которые не заботятся об использовании jquery, вот короткий способ без использования идентификатора

<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 не определен", "filename": " stacksnippets.net/js ", "lieno": 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

если вы все еще ищете ответ, вы можете использовать input type = "number" вместо type = "range" min max work, если он установлен в таком порядке:
1-name
2-maxlength
3-size
4-min
5-max
просто скопируйте это

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

1
Это просто неправильно, это не то, что просил автор темы.
bolvo 05
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.