HTML5 тип входного сигнала диапазон показать значение диапазона

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

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

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

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

8 79
css3 html5 nsrange

8 ответов:

Это использует 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="">
76

для тех, кто все еще ищет решение без отдельного кода 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;
 }

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

126

версия с редактируемым входом:

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

31

еще лучшим способом было бы поймать входное событие на самом входе а не на всю форму (производительность мудрым) :

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

15

Если вы хотите, чтобы ваше текущее значение отображалось под ползунком и двигалось вместе с ним, попробуйте следующее:

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

11

если вы используете несколько слайдов, и вы можете использовать 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 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>
0

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

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