Lo que necesita saber sobre el elemento deslizante HTML5

HTML5 trajo muchas etiquetas nuevas y nuevas reglas sobre cómo se deben usar las antiguas. Uno de ellos es el elemento de entrada de rango, o el control deslizante. Este control ha estado disponible en los sistemas operativos durante décadas, pero recién ahora ha llegado al navegador.

La razón de este retraso es probablemente que es fácil emular la funcionalidad solo con JavaScript. La biblioteca jQuery UI incluye una versión bastante capaz que también es fácil de diseñar. Pero tenerlo integrado en el navegador y listo para usar es mucho más conveniente, al menos para los navegadores que lo admiten.

Soporte del navegador

Todos los navegadores modernos admiten este elemento con la notable excepción de Firefox, pero se puede recrear fácilmente con html5slider.js. Por supuesto, IE tampoco es compatible con la entrada de rango (no es de extrañar aquí), para lo cual no hay soluciones fáciles. Esto significa que para usarlo entre navegadores aún necesitará incluir una biblioteca de habilitación separada como jQuery UI (más sobre eso más adelante). Lo bueno es que incluso si el navegador no es compatible con el elemento de rango, volverá a un cuadro de texto.

Cómo funciona

Me referí al control deslizante como "entrada de rango" por una razón. Es un tipo de elemento de entrada, en lugar de una etiqueta separada - <input type="range" /> es todo lo que necesitas para mostrarlo en tu página. Admite el valor regular atributo compartido por todos los elementos de entrada, junto con min y máx , que limitan el rango, y paso que establece cuánto cambia el valor en cada movimiento (el valor predeterminado es 1).

Puede cambiar estos atributos con JavaScript/jQuery como lo haría con cualquier elemento de entrada normal. También puede usar el evento onchange para escuchar los cambios. Así es como se ve el código:

Extraído de index.html

<input id="defaultSlider" type="range" min="0" max="500" />
<p class="note">Current value: <span id="currentValue">0</span></p>

Y este es el código jQuery que escucha el evento de cambio:

activos/js/slider-default.js

$(function(){

    var currentValue = $('#currentValue');

    $('#defaultSlider').change(function(){
        currentValue.html(this.value);
    });

    // Trigger the event on load, so
    // the value field is populated:

    $('#defaultSlider').change();

});

Por supuesto, este código solo funcionará si su navegador admite el elemento deslizante. De lo contrario, aparecerá un cuadro de texto.

Vamos a nivelar el campo

Como más de dos tercios de la población de Internet no podrá ver nuestro bonito control deslizante, debemos tomar un camino diferente. Construyamos una versión rápida y sucia del control deslizante usando jQuery UI, una biblioteca de componentes de interfaz que se encuentra sobre jQuery.

Extraído de slider-jqueryui.html

<div id="slider"></div>
<p class="note">Current value: <span id="currentValue">0</span></p>

Puede ver el código para el control deslizante jQuery UI a continuación (debe incluir jQuery UI junto con jQuery en su página).

activos/js/slider-jqueryui.js

$(function(){

    var currentValue = $('#currentValue');

    $("#slider").slider({ 
        max: 500,
        min: 0,
        slide: function(event, ui) {
            currentValue.html(ui.value);
        }
    });

});

El código es bastante sencillo. Simplemente usa el método del control deslizante y la biblioteca hace el resto.

La parte divertida

Aquí viene una realización:como ya estamos presentando nuestra propia versión personalizada del control deslizante, también podemos presentar un control completamente diferente. Usemos el complemento KnobKnob de la semana pasada.

Tendremos el control de entrada de rango en la página, pero estará oculto. KnobKnob luego creará un control giratorio que tendrá los mismos límites que el control deslizante original. En cada cambio, actualizaremos el valor del control deslizante oculto:

perilla-deslizante.html

<div id="container">
    <div id="control"></div>
</div>

<!-- The range input is hidden and updated on each rotation of the knob -->
<input type="range" id="slider" min="0" max="500" value="25" />

<p class="note">Current value: <span id="currentValue">0</span></p>

Y para la parte de jQuery:

activos/js/slider-knob.js

$(function(){

    var slider = $('#slider'),
        min = slider.attr('min'),
        max = slider.attr('max'),
        currentValue = $('#currentValue');

    // Hiding the slider:
    slider.hide();

    $('#control').knobKnob({
        snap : 10,
        value: 250,
        turn : function(ratio){
            // Changing the value of the hidden slider
            slider.val(Math.round(ratio*(max-min) + min));

            // Updating the current value text
            currentValue.html(slider.val());
        }
    });

});

El código anterior toma los atributos mínimo y máximo de la entrada de rango y los usa para calcular el valor correspondiente del control deslizante.

Conclusión

El control deslizante es útil para brindar a los usuarios la capacidad de modificar un valor de manera conveniente sin tener que escribirlo explícitamente en un cuadro de texto. Aunque hay mucho que desear en términos de soporte del navegador, puede usar la mejora progresiva para mostrar un control alternativo usando jQuery.