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

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

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

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

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

Ответы

Ответ 1

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

Ответ 2

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

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

Update:

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

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

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

Ответ 3

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

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

Ответ 4

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

<input type="range" id="rangeInput" name="rangeInput" min="0" max="20" value="0"
       oninput="amount.value=rangeInput.value">                                                       

<output name="amount" for="rangeInput">0</output>

Здесь fiddle (с добавлением id в соответствии с комментарием Райана).

Ответ 5

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

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

Ответ 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">

Ответ 7

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

Ответ 8

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

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