Intervalo do tipo de entrada HTML5 mostra o valor do intervalo

115

Estou criando um site onde desejo usar o controle deslizante de intervalo (sei que ele só oferece suporte a navegadores webkit).

Eu o integrei totalmente e funciona bem. Mas eu gostaria de usar um textboxpara mostrar o valor do slide atual.

Quer dizer, se inicialmente o controle deslizante está no valor 5, na caixa de texto ele deve mostrar como 5, quando eu deslizo o valor na caixa de texto deve mudar.

Posso fazer isso usando apenas CSSou html. Eu quero evitar JQuery. É possível?

html  css  range 
— Niraj Chauhan
fonte
1
Você não pode fazer isso sem javascript.
— mrtsherman
3
Você pode quase fazer isso com css usando :before/ :after, contente attr(), como este . No entanto, os pseudo-elementos: before /: after realmente consomem parte do intervalo do controle deslizante (embora talvez isso seja corrigível) e, o mais importante, os valores não são atualizados se o controle deslizante for manipulado. Mesmo assim, achei que seria interessante deixar isso aqui. Pode ser possível no futuro.
— waldyrious
3
A correção da solução de @waldir resulta em jsfiddle.net/RjWJ8, embora ainda use javascript para atualizar o atributo de valor da propriedade.
— user1277170

Respostas:

112

Isso usa javascript, não jquery diretamente. Isso pode ajudar você a começar.

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

— Ejlepoud
fonte
5
mas há alguma maneira de fazer isso sem javascript ou jquery?
— Niraj Chauhan
15
Este é de mobile-web-app.blogspot.com/2012/03/… , ainda javascript. code<label for = "rangeinput"> Intervalo </label> <input id = "rangeinput" type = "range" min = "0" max = "10" value = "5" onchange = "rangevalue.value = value"> </input> <output id = "rangevalue"> 5 </output>
— ejlepoud
46
Alguém mais pensa que está faltando fornecer um controle deslizante cego. É verdade que fornecer widgets sofisticados não é a função do padrão básico, mas mostrar o valor selecionado é fundamental para este widget, então eu acho que (opcionalmente) mostrar o número em uma forma básica, como uma dica de ferramenta no topo do controle deslizante para fazer um design melhor.
— Basel Shishani,
1
@BaselShishani Não poderia concordar mais, não tenho certeza de qual foi o processo de pensamento por trás disso.
— Noz
2
@BaselShishani: De acordo com MDN : "intervalo: Um controle para inserir um número cujo valor exato não é importante.". À luz dessa suposição, mostrar nenhum valor exato faz sentido. Mas, na prática, provavelmente também será usado para selecionar valores exatos.
— bodo
166

Para aqueles que ainda procuram uma solução sem um código javascript separado. Há pouca solução fácil sem escrever uma função javascript ou 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

Se você quiser mostrar o valor na caixa de texto, simplesmente altere a saída para a entrada.

Atualizar:

Ainda é Javascript escrito em seu html, você pode substituir as ligações com o código JS abaixo:

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

Use o ID ou o nome do elemento, ambos são suportados nos navegadores Morden.

— Rahul R.
fonte
1
+1 sei que sei sobre <output>. O único problema é que o EI não o suporta. (W3School) w3schools.com/tags/tryit.asp?filename=tryhtml5_output
— radbyx
4
Ainda é javascript, e é pior vincular oninput ao elemento do formulário do que ao próprio elemento de entrada.
— cuixiping de
2
@cuixiping, podemos vincular oninput ao elemento em vez da forma, fiz isso apenas para mostrar um exemplo.
— Rahul R.
Perdoe essa pergunta tardia e noob, mas como o manipulador se refere a rangeInput e amount por seus nomes HTML?
— rep_movsd
@rep_movsd, é o mesmo que this.formName.rangeInput ou this.formName.amount. Acesse os elementos por meio de seu nome. No entanto, não estou 100% certo,
— Rahul R.
39

versão com entrada editável:

<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
fonte
6
Substitua as variáveis ​​do formulário por this.nextElementSiblingou this.previousElementSiblinge substitua oninput por onchange para obter uma versão que funcione fora de um formulário. jsfiddle.net/Xjxe6/94
— Domino
32

uma maneira ainda melhor seria capturar o evento de entrada na própria entrada em vez de no formulário inteiro (em termos de desempenho):

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

Aqui está um violino (com o idadicionado de acordo com o comentário de Ryan).

— Ilana Hakim
fonte
3
No Firefox 27, isso não funcionou para mim até que eu adicionei id="amount"para a saída também.
— Ryan
isso deve funcionar sem id:oninput="this.form.amount.value=this.value"
— d1Mm
1
isso funciona, mas como faço para chegar ao valor atual e mostrá-lo quando a página for atualizada? : - /
— user2513846
14

Se você deseja que seu valor atual seja exibido abaixo do controle deslizante e se mova junto com ele, tente o seguinte:

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

Observe que este tipo de elemento de entrada HTML tem um recurso oculto, como você pode mover o controle deslizante com as teclas de seta para a esquerda / direita / para baixo / para cima quando o elemento estiver focado nele. O mesmo com as teclas Home / End / PageDown / PageUp.

— drugan
fonte
6

Se estiver usando vários slides e puder usar jQuery, você pode fazer o seguinte para lidar com vários controles deslizantes facilmente:

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">
Expandir trecho

Além disso, ao usar oninputno, <input type='range'>você receberá eventos enquanto arrasta o intervalo.

— António Almeida
fonte
5

Versão mais curta, sem form, minou JavaScript externo.

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

— gengns
fonte
1
esta é a melhor resposta ...
— Ayo Adesina
2

Para as pessoas que não se importam com o uso do jquery, aqui está um pequeno caminho sem usar qualquer 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>
— hexaJer
fonte
1

Tenho uma solução que envolve JavaScript (Vanilla), mas apenas como biblioteca. Você costuma incluí-lo uma vez e, em seguida, tudo o que precisa fazer é definir o sourceatributo apropriado das entradas numéricas.

O sourceatributo deve ser o querySelectorAllseletor da entrada de intervalo que você deseja ouvir.

Ele até funciona com selectcs. E funciona com vários ouvintes. E funciona na outra direção: mude a entrada de número e a entrada de faixa será ajustada. E funcionará em elementos adicionados posteriormente na página (verifique https://codepen.io/HerrSerker/pen/JzaVQg para isso)

Testado no Chrome, Firefox, Edge e 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>
Expandir trecho

— Yunzen
fonte
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>
Expandir trecho

— Luis
fonte
1
Erro: {"message": "Uncaught ReferenceError: getvalor is not defined", "filename": " stacksnippets.net/js ", "lineno": 12, "colno": 169}
— Darush
0

Experimente isto:

 <input min="0" max="100" id="when_change_range" type="range">
 <input type="text" id="text_for_show_range">

e na seção jQuery :

 $('#when_change_range').change(function(){
 document.getElementById('text_for_show_range').value=$(this).val();
  });
— mamal
fonte
-3

se você ainda está procurando a resposta, pode usar input type = "number" no lugar de type = "range" min max work se for definido nessa ordem:
1-name
2-maxlength
3-size
4-min
5-max
apenas copie

<input  name="X" maxlength="3" size="2" min="1" max="100" type="number" />
— kyo adam
fonte
1
Isso é simplesmente errado, não faz o que o iniciador do tópico solicitou.
— bolvo
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.