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

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

Intervalo do tipo de entrada HTML5 mostra o valor do intervalo

Respostas: