diff options
Diffstat (limited to 'files/es/web/html/element/input/range/index.html')
| -rw-r--r-- | files/es/web/html/element/input/range/index.html | 417 |
1 files changed, 417 insertions, 0 deletions
diff --git a/files/es/web/html/element/input/range/index.html b/files/es/web/html/element/input/range/index.html new file mode 100644 index 0000000000..7c7219c4b5 --- /dev/null +++ b/files/es/web/html/element/input/range/index.html @@ -0,0 +1,417 @@ +--- +title: <input type="range"> +slug: Web/HTML/Element/input/range +tags: + - Elementos + - Formulários HTML + - HTML etiqueta input + - Input + - Range + - Rango + - Referencia + - Web + - deslizador + - formulários + - slider +translation_of: Web/HTML/Element/input/range +original_slug: Web/HTML/Elemento/input/range +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">El elemento {{HTMLElement("input")}} del tipo <code><strong>"range"</strong></code> permite que el usuario especifique un valor numérico comprendido entre un valor mínimo y máximo. El valor exacto, sin embargo, no se considera importante. Se repesenta típicamente como un "tirador" o un control deslizante en lugar de un campo de texto como otros tipos de {{HTMLElement("input")}}.</span> Como este tipo de widget es bastante inmpreciso, no debe utilizarse normalmente a menos que el valor exacto del control no sea importante.</p> + +<div id="summary_sample1"> +<pre class="brush: html"><input type="range"></pre> +</div> + +<p>{{EmbedLiveSample("summary_sample1", 600, 40)}}</p> + +<p>Si el navegador del usuario no soporta el tipo <code>"range"</code>, será tratado como un input de tipo <code><a href="/en-US/docs/Web/HTML/Element/input/text">"text"</a></code>.</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>Un {{domxref("DOMString")}} que contiene la cadena que representa el valor numérico seleccionado; use {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} to get the value as a {{jsxref("Number")}}.</td> + </tr> + <tr> + <td><strong>Eventos</strong></td> + <td>{{event("change")}} e {{event("input")}}</td> + </tr> + <tr> + <td><strong>Atributos comunes soportados</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("max", "input")}}, {{htmlattrxref("min", "input")}} y {{htmlattrxref("step", "input")}}</td> + </tr> + <tr> + <td><strong>Atributos IDL </strong></td> + <td><code>list</code>, <code>value</code> y <code>valueAsNumber</code></td> + </tr> + <tr> + <td><strong>Metodos</strong></td> + <td>{{domxref("HTMLInputElement.stepDown", "stepDown()")}} y {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value">Value</h2> + +<p>El atributo {{htmlattrxref("value", "input")}} contiene un {{domxref("DOMString")}} que es la representación de tipo cadena del número seleccionado. El valor nunca es una cadena vacía (<code>""</code>). El valor por defecto es el punto intermedio entre los valores mínimo y máximo especificados, a menos que el valor máximo sea menor que el valor mínimo, en cuyo caso el valor por defecto será el valor del atributo <code>min</code>. El algoritmo de determina el valor por defecto es:</p> + +<pre class="brush: js">defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min + : rangeElem.min + (rangeElem.max - rangeElem.min)/2;</pre> + +<p><span id="result_box" lang="es"><span>Si se intenta establecer un valor inferior al mínimo definido, el valor será igual al mínimo.</span> <span>De manera similar, un intento de establecer un valor superior al máximo da como resultado el valor máximo.</span></span></p> + +<h2 id="Usando_inputs_range">Usando inputs range</h2> + +<p>El input de tipo <code>"number"</code> permite al usuario introducir un número y, opcionalmente, forzarle a que dicho valor se encuentre entre un mínimo y un máximo, pero le obliga a introducir un valor específico. El input de tipo <code>"range"</code> pide al usuario que indique el valor en un rango numérico sin que tenga que preocuparse qué valor numérico específico está seleccionado.</p> + +<p>Los ejemplos títpicos de situaciones en las que se pueden usar inputs de tipo rango suelen ser:</p> + +<ul> + <li>Controles de audio (volumen o balance) o controles de filtro.</li> + <li>Configuración de color, como canales, transparencia, brillo, etc.</li> + <li>Controles de configuración de juegos, como dificultad, distancia de visibilidad, tamaño del nunodGame configuration controls such as difficulty, visibility distance, world size, etc.</li> + <li>Longitud de contraseñas para un gestor de contraseñas generadas.</li> +</ul> + +<p>Como regla general, si el usuario está más interesado en la distancia entre un mínimo y un máximo más que en el propio valor en sí mismo, el input de tipo rango es el candidato perfecto. Por ejemplo, en el caso del control del volumen de un equipo estéreo, el usuario normalmente piensa "pon el volumen a la midad" en lugar de "pon el volumen al 0,5".</p> + +<h3 id="Especificar_los_valores_mínimo_y_máximo">Especificar los valores mínimo y máximo</h3> + +<p>Por defecto, el valor mínimo es 0 y el máximo es 100. Si es necesario modificar dichos valores, podemos usar los atributos {{htmlattrxref("min", "input")}} y/o {{htmlattrxref("max", "input")}}. Podemos usar cualquier valor de coma flotante.</p> + +<p>Por ejemplo, para usar un rango entre -10 y 10, usaremos:</p> + +<pre class="brush: html"><input type="range" min="-10" max="10"></pre> + +<p>{{EmbedLiveSample("Specifying_the_minimum_and_maximum", 600, 40)}}</p> + +<h3 id="Definir_el_tamaño_de_los_saltos">Definir el tamaño de los saltos</h3> + +<p>Por defecto, cada salto tiene valor 1, es decir el valor será siempre un número entero. Podemos cambiarlo mediante el atributo {{htmlattrxref("step")}}. Si necesitas, por ejemplo, un valor entre 5 y 10 con una precisión de dos decimales, debes indicar que el valor de <code>step</code> es 0.01:</p> + +<div id="Granularity_sample1"> +<pre class="brush: html"><input type="range" min="5" max="10" step="0.01"></pre> + +<p>{{EmbedLiveSample("Granularity_sample1", 600, 40)}}</p> +</div> + +<p><span id="result_box" lang="es"><span>Si quieres aceptar cualquier valor independientemente de la cantidad de decimales, puede especificar un valor de </span></span><code>"any"</code> al atrtibuto {{htmlattrxref("step", "input")}}:</p> + +<div id="Granularity_sample2"> +<pre class="brush: html"><input type="range" min="0" max="3.14" step="any"></pre> + +<p>{{EmbedLiveSample("Granularity_sample2", 600, 40)}}</p> + +<p>En el ejemplo, permitimos al usuario seleccionar cualquier valor entre 0 y π sin restricciones en la parte decimal del número seleccionado.</p> +</div> + +<h3 id="Añadir_marcas_y_etiquetas">Añadir marcas y etiquetas</h3> + +<p>La especificación HTML permite a los navegadores cierta flexibilidad sobre cómo presentar el control range. En ningún sitio es más notoria dicha flexibilidad como a la hora de representar las marcas y las etiquetas de un rango. La especificación describe cómo añadir puntos personalizados al control range usando el atributo {{htmlattrxref("list", "input")}} y el elemento {{HTMLElement("datalist")}}, pero no hay requisitos o recomendaciones de estandarizar las marcas a lo largo del control.</p> + +<h4 id="Mockups_del_control_range">Mockups del control range</h4> + +<p>Como los navegadores tienen esta flexibilidad, y hasta la fecha ninguno admite todas las funciones que HTML define para los controles range, a continuación mostramos algunas maquetas que permiten conocer lo que puede visualizarse en macOS en un navegador que las admita.</p> + +<h5 id="El_control_rango_sin_adornos">El control rango sin adornos</h5> + +<p>Cuando no especificas un atributo {{htmlattrxref("list", "input")}} al input range, un navegador que lo soporte mostrará lo siguie.</p> + +<table class="fullwidth standard-table"> + <tbody> + <tr> + <th>HTML</th> + <th>Captura de pantalla</th> + </tr> + <tr> + <td> + <pre class="brush: html"> +<input type="range"></pre> + </td> + <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14989/macslider-plain.png" style="height: 28px; width: 184px;"></td> + </tr> + </tbody> +</table> + +<h5 id="Un_control_rango_con_marcas">Un control rango con marcas</h5> + +<p>El siguiente rango utiliza el atributo <code>list</code> (al cual le especificamos el ID del elemento {{HTMLElement("datalist")}}) para definir la serie de marcas del rango. Hay once marcas, cada una de ellas mide un 10%, representadas por el {{htmlattrxref("value", "option")}} de cada elemento {{HTMLElement("option")}}.</p> + +<table class="fullwidth standard-table"> + <tbody> + <tr> + <th>HTML</th> + <th>Captura de pantalla</th> + </tr> + <tr> + <td> + <pre class="brush: html"> +<input type="range" list="tickmarks"> + +<datalist id="tickmarks"> + <option value="0"> + <option value="10"> + <option value="20"> + <option value="30"> + <option value="40"> + <option value="50"> + <option value="60"> + <option value="70"> + <option value="80"> + <option value="90"> + <option value="100"> +</datalist> +</pre> + </td> + <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14991/macslider-ticks.png" style="height: 28px; width: 184px;"></td> + </tr> + </tbody> +</table> + +<h5 id="Un_control_rango_con_marcas_y_etiquetas">Un control rango con marcas y etiquetas</h5> + +<p>Puedes añadir etiquetas a tu control range usando el atributo {{htmlattrxref("label", "option")}} al elemento {{HTMLElement("option")}} correspondiente a cada marca que desees etiquetar.</p> + +<table class="fullwidth standard-table"> + <tbody> + <tr> + <th>HTML</th> + <th>Captura de pantalla</th> + </tr> + <tr> + <td> + <pre class="brush: html"> +<input type="range" list="tickmarks"> + +<datalist id="tickmarks"> + <option value="0" label="0%"> + <option value="10"> + <option value="20"> + <option value="30"> + <option value="40"> + <option value="50" label="50%"> + <option value="60"> + <option value="70"> + <option value="80"> + <option value="90"> + <option value="100" label="100%"> +</datalist> +</pre> + </td> + <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14993/macslider-labels.png" style="height: 44px; width: 184px;"></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota</strong>: Actualmente, ningún navegador soporta todas estas características. Firefox no soporta ni marcas ni etiquetas, mientras que Chrome soporta las marcas pero no las etiquetas.</p> +</div> + +<h3 id="Cambiar_la_orientación">Cambiar la orientación</h3> + +<div class="hidden"> +<p>Por defecto, si un navegador renderiza un input range, lo mostrará como un "slider" (deslizador) que se desliza hacia la izquierda y hacia la derecha. By default, if a browser renders a range input as a slider, it will render it so that the knob slides left and right. Sin embargo puedes cambiar esto fácilmente para que se deslice hacia arriba y hacia abajo simplemente usando CSS</p> + +<div class="note"> +<p><strong>Nota</strong>: Esto aún no está implementado por los principales navegadores. This is not actually implemented yet by any of the major browsers. See Firefox {{bug(981916)}}, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">Chrome bug 341071</a>.</p> +</div> + +<p>Si tenemos el siguiente control range:</p> + +<div id="Orientation_sample1"> +<pre class="brush: html"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> +</div> + +<p>{{EmbedLiveSample("Orientation_sample1", 200, 200, "https://mdn.mozillademos.org/files/14983/Orientation_sample1.png")}}</p> + +<p>Dicho control se muestra en horizontal (al menos en los principales navegadores, o otros puede variar). Presentarlo en vertical es tan simple como añadir CSS para cambiar las dimensiones del control, de la siguiente manera:</p> + +<div id="Orientation_sample2"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">#volume { + height: 150px; + width: 50px; +}</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}</p> + +<p><strong>En la actualidad, ninguno de los navegadores principales soporta la creación de inputs range usando este CSS, incluso a perar de que la especificación recomienda que lo hagan.</strong></p> +</div> +</div> + +<p>La especificación HTML recomienda que los navegadores cambien la orientación del range si el ancho especificado es menor que el alto. Desafortunadamente, ninguno de los principales navegadores soportar controles range verticales directamente. Para conseguir un range vertical, la forma más fácil es usar CSS, aplicando {{cssxref("transform")}} para rotar el elemento y mostrarlo en vertical. Veamos cómo.</p> + +<div id="Orientation_sample3"> +<h4 id="HTML_2">HTML</h4> + +<p>El HTML necesita que el elemento {{HTMLElement("input")}} esté dentro de un elemento {{HTMLElement("div")}} :</p> + +<pre class="brush: html"><div class="slider-wrapper"> + <input type="range" min="0" max="11" value="7" step="1"> +</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<p>Ahora necesitamos un poco de CSS. Primero escribimos el CSS del div contenedor; especificamos el modo de display y el tamaño que queremos que tenga, reservando un área en la página para el "slider" que vamos a rotar.</p> + +<pre class="brush: css">.slider-wrapper { + display: inline-block; + width: 20px; + height: 150px; + padding: 0; +} +</pre> +Después ponemos la información para el elemento <code><input></code>: + +<pre class="brush: css">.slider-wrapper input { + width: 150px; + height: 20px; + margin: 0; + transform-origin: 75px 75px; + transform: rotate(-90deg); +}</pre> + +<p>El tamaño del range es 150 pixeles de ancho por 20 pixeles de alto. Ponemos los márgenes a 0 y con {{cssxref("transform-origin")}} cambiamos centro que usaremos para rotar el range. Como el input mide 150 pixeles de ancho y largo, girará en una cuadrado de 150 pixeles de lado. Colocamos el centro de giro a 75px horizontal y verticalmente y, finalmente, rotamos 90º en sentido contrario a las agujas del reloj. El resultado final es un input range que ha girado y cuyo valor máximo está en la parte superior y el valor mínimo en la parte inferior.</p> + +<h4 id="Result_2">Result</h4> + +<p>{{EmbedLiveSample("Orientation_sample3", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}</p> +</div> + +<h2 id="Validación">Validación</h2> + +<div class="g-unit" id="gt-res-c"> +<div id="gt-res-p"> +<div id="gt-res-data"> +<div id="gt-res-wrap"> +<div id="gt-res-content"> +<div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"> +<div id="tts_button"> </div> +<span id="result_box" lang="es"><span>No hay un patrón de validación</span></span><span lang="es"><span> disponible;</span> <span>sin embargo, se realizan las siguientes formas de validación automática:</span></span></div> +</div> +</div> +</div> +</div> +</div> + +<p> </p> + +<ul> + <li>Si el {{htmlattrxref("value", "input")}} <span id="result_box" lang="es"><span>está configurado con un valor que no se puede convertir en un número de coma flotante válido, la validación falla porque recibe una entrada incorrecta.</span></span></li> + <li>El valor no puede ser menor que el valor de {{htmlattrxref("min", "input")}}. Por defecto es 0.</li> + <li>El valor no puede ser mayor que el {{htmlattrxref("max", "input")}}. Por defecto es 100.</li> + <li>El valor será un múltiplo del valor de {{htmlattrxref("step", "input")}}. Por defecto es 1.</li> +</ul> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Además de los ejemplos anteriores, encontrarás más ejemplos en los siguientes artículos:</p> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode">Controlling multiple parameters with ConstantSourceNode</a></li> +</ul> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#range-state-(type=range)', '<input type="range">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '<input type="range">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0<sup>[2]</sup></td> + <td>12</td> + <td>{{CompatGeckoDesktop(23)}}<sup>[1][4]</sup></td> + <td>10</td> + <td>10.1</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1<sup>[3]</sup></td> + <td>57<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(52)}}<sup>[1]</sup></td> + <td>10</td> + <td>{{CompatVersionUnknown}}</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] A pesar de que la especificación dice que el input range debe mostrarse verticalmente si el alto es mayor que el ancho, este comportamiento no está implementado actualmente. Mira los siguientes bugs para conocer más información: {{bug(840820)}} y {{bug(981916)}}.</p> + +<p>[2] Chrome implementa el valor <code>slider-vertical</code> con la propiedad no estandard {{cssxref("-webkit-appearance")}}. <em>No deberías usarla ya que es propietaria, a menos que incluyas fallbacks para usuarios de otros navegadores</em>.</p> + +<p>[3] El navegador de Android reconoce el tipo <code>"range"</code> desde la versión 2.1, pero no está totalmente implementada hasta la versión 4.3.</p> + +<p>[4] Dibujar marcas y etiquetas no está aún implementado. Ver {{bug(841942)}} para conocer más información.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a></li> + <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface it's based upon</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/number"><input type="number"></a></code></li> +</ul> |