El rango del tipo de entrada HTML5 muestra el valor del rango

114

Estoy creando un sitio web en el que quiero usar el control deslizante de rango (sé que solo es compatible con navegadores webkit).

Lo he integrado completamente y funciona bien. Pero me gustaría usar un textboxpara mostrar el valor actual de la diapositiva.

Quiero decir, si inicialmente el control deslizante está en el valor 5, entonces en el cuadro de texto debería aparecer como 5, cuando deslizo el valor en el cuadro de texto debería cambiar.

¿Puedo hacer esto usando solo CSSo html. Quiero evitar JQuery. ¿Es posible?

html  css  range 
— Niraj Chauhan
fuente
1
No puede hacer esto sin javascript.
— mrtsherman
3
Se puede casi hacer esto con CSS utilizando :before/ :after, contenty attr(), como este . Sin embargo, los pseudoelementos: before /: after realmente consumen parte del rango del control deslizante (aunque tal vez se pueda arreglar) y, lo que es más importante, los valores no se actualizan si se manipula el control deslizante. Sin embargo, pensé que sería interesante dejar esto aquí. Podría ser posible en el futuro.
— waldyrious
3
Arreglar la solución de @waldir da como resultado jsfiddle.net/RjWJ8 aunque todavía usa javascript para actualizar el atributo de valor de la propiedad.
— user1277170

Respuestas:

110

Esto usa javascript, no jquery directamente. Podría ayudarlo a comenzar.

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 fragmento

— ejlepoud
fuente
5
pero ¿hay alguna forma de hacerlo sin javascript o jquery?
— Niraj Chauhan
15
Esto es de mobile-web-app.blogspot.com/2012/03/… , todavía javascript. code<label for = "rangeinput"> Rango </label> <input id = "rangeinput" type = "range" min = "0" max = "10" value = "5" onchange = "rangevalue.value = value"> </input> <output id = "rangevalue"> 5 </output>
— ejlepoud
46
¿Alguien más piensa que falta un control deslizante ciego? Es cierto que proporcionar widgets elegantes no es la función del estándar básico, pero mostrar el valor seleccionado es fundamental para este widget, por lo que creo que (opcionalmente) mostrar el número en una forma básica, como una información sobre herramientas en la parte superior del control deslizante, sería hacer un mejor diseño.
— Basel Shishani
1
@BaselShishani No podría estar más de acuerdo, no estoy realmente seguro de cuál fue el proceso de pensamiento detrás de eso.
— Noz
2
@BaselShishani: Según MDN : "rango: Un control para ingresar un número cuyo valor exacto no es importante". A la luz de esa suposición, no tiene sentido mostrar un valor exacto. Pero en la práctica probablemente también se utilizará para seleccionar valores exactos.
— bodo
166

Para aquellos que todavía están buscando una solución sin un código javascript separado. Hay pocas soluciones fáciles sin escribir una función javascript o 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>

Demostración de JsFiddle

Si desea mostrar el valor en el cuadro de texto, simplemente cambie la salida a la entrada.

Actualizar:

Todavía está escrito en Javascript dentro de su html, puede reemplazar los enlaces con el siguiente código JS:

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

Utilice el ID o el nombre del elemento, ambos son compatibles con los navegadores modernos.

— Rahul R.
fuente
1
+1 sé que sé sobre <output>. Sin embargo, el único problema es que EI no lo admite. (W3School) w3schools.com/tags/tryit.asp?filename=tryhtml5_output
— radbyx
4
Sigue siendo javascript, y es peor enlazar una entrada en un elemento de formulario que en un elemento de entrada en sí.
— cuixiping
2
@cuixiping, podemos enlazar oninput en el elemento en lugar de en el formulario, solo lo hice para mostrar el ejemplo.
— Rahul R.
Perdone esta pregunta tardía y noob, pero ¿cómo se refiere el controlador a rangeInput y cantidad por sus nombres HTML?
— rep_movsd
@rep_movsd, es lo mismo que this.formName.rangeInput o this.formName.amount. Formulario de acceso a los elementos utilizando su nombre. Sin embargo, no estoy 100% seguro,
— Rahul R.
39

versión con entrada editable:

<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
fuente
6
Reemplace las variables de formulario con this.nextElementSiblingo this.previousElementSiblingy reemplace oninput con onchange para obtener una versión que funcione fuera de un formulario. jsfiddle.net/Xjxe6/94
— Domino
32

una forma aún mejor sería capturar el evento de entrada en la entrada en sí en lugar de en el formulario completo (en cuanto al rendimiento):

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

Aquí hay un violín (con el idagregado según el comentario de Ryan).

— Ilana Hakim
fuente
3
En Firefox 27, esto no funcionó para mí hasta que también agregué id="amount"la salida.
— Ryan
esto debería funcionar sin identificación:oninput="this.form.amount.value=this.value"
— d1Mm
1
esto funciona, pero ¿cómo llego al valor actual y lo muestro cuando la página se actualiza? : - /
— user2513846
14

Si desea que su valor actual se muestre debajo del control deslizante y se mueva junto con él, intente esto:

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

Tenga en cuenta que este tipo de elemento de entrada HTML tiene una característica oculta, como que puede mover el control deslizante con las teclas de flecha izquierda / derecha / abajo / arriba cuando el elemento tiene el foco en él. Lo mismo con las teclas Inicio / Fin / PageDown / PageUp.

— drugan
fuente
6

Si está usando varias diapositivas y puede usar jQuery, puede hacer lo siguiente para manejar fácilmente varios controles deslizantes:

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 fragmento

Además, al usar oninputel <input type='range'>, recibirá eventos mientras arrastra el rango.

— António Almeida
fuente
5

Versión más corta y sin form, mino JavaScript externo.

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

— gengns
fuente
1
esta es la mejor respuesta ...
— Ayo Adesina
2

Para las personas que no se preocupan por el uso de jquery, aquí hay una forma corta sin usar ninguna identificación

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

Tengo una solución que involucra JavaScript (Vanilla), pero solo como una biblioteca. Debe incluirlo una vez y luego todo lo que necesita hacer es establecer el sourceatributo apropiado de las entradas numéricas.

El sourceatributo debe ser el querySelectorAllselector de la entrada de rango que desea escuchar.

Incluso funciona con selectcs. Y funciona con varios oyentes. Y funciona en la otra dirección: cambie la entrada de número y la entrada de rango se ajustará. Y funcionará en los elementos agregados más adelante en la página (consulte https://codepen.io/HerrSerker/pen/JzaVQg para saberlo )

Probado en 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 fragmento

— yunzen
fuente
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 fragmento

— Luis
fuente
1
Error: {"mensaje": "Error de referencia no detectado: getvalor no está definido", "nombre de archivo": " stacksnippets.net/js ", "lineno": 12, "colno": 169}
— Darush
0

Prueba esto :

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

y en la sección jQuery :

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

si aún está buscando la respuesta, puede usar input type = "number" en lugar de type = "range" min max work si se establece en ese orden:
1-name
2-maxlength
3-size
4-min
5-max
just cópialo

<input  name="X" maxlength="3" size="2" min="1" max="100" type="number" />
— kyo adam
fuente
1
Esto es simplemente incorrecto, no hace lo que solicitó el iniciador del tema.
— bolvo
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.