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

115

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

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

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

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

html css range Нирадж Чаухан
источник

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

Развернуть фрагмент

Ejlepoud
источник

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/

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

Илана Хаким
источник

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

Антониу Алмейда
источник

5

Кратчайший версия без form, minили внешний JavaScript.

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

Развернуть фрагмент

Gengns
источник

1

это лучший ответ ...

Айо Адезина

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>

hexaJer
источник

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();
  });

mamal
источник

-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

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

Ответы: