Slider sencillo en jQuery

En este tutorial realizaremos un Slider sencillo en jQuery. Empezaremos con la estructura básica, eventos y animación con Javascript y lo terminaremos con un bonito aspecto en CSS. ¡Así que manos a la obra!

¿Cuándo deberíamos usar un Slider en nuestros formularios?

Fácil, cuando algún valor que nuestro usuario debe ingresar no es del todo claro para él. Por ejemplo, el usuario es consciente que debe ingresar un valor de 1 a 500px para el tamaño de su avatar pero no esta seguro que valor utilizar y como es muy incómodo probar valores en un campo de texto hasta que quede satisfecho con el elegido, debemos proporcionarle una mejor manera de hacerlo. Osea un ¡Slider!

Puedes seguir el paso a paso de este tutorial en vídeo:

Estructura básica HTML y CSS

En un nuevo documento HTML crearemos una nueva capa o DIV con clase SLIDER, la cual será nuestro contenedor principal. Dentro de ella crearemos un par de capas más con clase PROGRESS e INDICATOR respectivamente.

Código :

<div class='slider'>
    <div class='progress'></div>
    <div class='indicator'></div>
</div>

La primera servirá para mostrar el progreso de nuestro slider y la segunda para controlar dicho progreso.

Ok, Ahora agreguémosle un poco de estructura con CSS. Al contenedor le definimos un ancho y alto, pueden ser los valores que creamos convenientes. Agregamos un borde de un pixel (1px) y color gris. Para visualizar sus límites.

Código :

.slider{
   border: 1px solid grey;
   height: 60px;
   width: 100%;
}

Ahora en la capa progress asignamos su ancho y alto en cien por ciento (100%) para que tome dichos valores de la capa contenedora slider y agregamos un color de fondo.

Código :

.slider > .progress{
   background: #14aaf6;
   height: 100%;
   width: 100%;
}

Para la capa indicator definimos un color de fondo de nuestra elección, un alto de cien por ciento (100%) y un ancho un poco menor también en porcentaje (%).

Código :

.slider > .indicator{
   background: darkred;
   height: 100%;
   width: 10%;
}

Ahora en el navegador podemos ver como "progress" está dentro de "slider" pero "indicator" se encuentra fuera de éste.

Para solucionar esto, debemos utilizar la propiedad position, el valor para slider será relative y en progress e indicator el valor será absolute.

Código :

.slider{
   border: 1px solid grey;
   height: 60px;
   position: relative;
   width: 100%;
}

.slider > .progress{
   background: #14aaf6;
   height: 100%;
   position: absolute;
   width: 100%;
}

.slider > .indicator{
   background: darkred;
   height: 100%;
   position: absolute;
   width: 10%;
}

Con esto hemos sobrepuesto a progress e indicator sin salirnos de la capa slider.

Si deseáramos que nuestro slider estuviera a la mitad de su recorrido, simplemente cambiamos el ancho de progress a un cincuenta por ciento (50%). Pero también debemos hacer que la capa indicator coincida con este cincuenta por ciento (50%). Dándole este valor a la propiedad left podremos obtener el resultado deseado.

Código :

.slider > .progress{
   background: #14aaf6;
   height: 100%;
   position: absolute;
   width: 50%;
}

.slider > .indicator{
   background: darkred;
   height: 100%;
   left: 50%;
   position: absolute;
   width: 10%;
}

Ok, Ahora podemos apreciar como tanto progress e indicator aparentemente se encuentran a la mitad del recorrido del slider.

¿Pero la capa indicator realmente esta en dicha posición?

Para ubicar indicator en la mitad exacta del recorrido debemos darle un margen izquierdo negativo de la mitad de su ancho. En este caso menos cinco porciento (-5%).

Código :

.slider > .indicator{
   background: darkred;
   height: 100%;
   margin-left: -5%;
   left: 50%;
   position: absolute;
   width: 10%;
}

Ya con esto terminamos la estructura básica de nuestro slider.

Animación y eventos con jQuery

En el body, ya que es siempre el mejor lugar para cargar javascript, incluiremos la ultima versión de jQuery y el archivo donde ira la lógica del slider. En mi caso main.js.

Código :

        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript" src="js/main.js"></script>

Ahora en la capa con clase slider capturamos el evento mousedown. Luego cuando éste se dispare, almacenaremos en la variable pos las coordenadas X e Y, en este caso serán left y top con respecto al objeto window.

Código :

   $('.slider').on('mousedown', function(e){
      var pos    = $(e.currentTarget).offset();
   });

Creamos una nueva variable pos-x que será la posición en X donde se produjo el evento menos la posición en X de la capa slider.

Código :

   $('.slider').on('mousedown', function(e){
      var pos    = $(e.currentTarget).offset()
      ,   posX   = e.pageX - pos.left;
   });

Ahora simplemente aplicamos esta distancia (posX) como ancho de la capa progress.

Código :

   $('.slider').on('mousedown', function(e){
      var pos    = $(e.currentTarget).offset()
      ,   posX   = e.pageX - pos.left;

      $('.slider > .progress').css('width', posX+'px');
   });

Actualizamos el navegador, y al hacer clic sobre slider vemos como progress se desplaza hasta esa posición. Hacemos lo mismo para la capa indicator pero en la propiedad left:

Código :

   $('.slider').on('mousedown', function(e){
      var pos    = $(e.currentTarget).offset()
      ,   posX   = e.pageX - pos.left;

      $('.slider > .progress').css('width', posX+'px');
      $('.slider > .indicator').css('left', posX+'px');
   });

Actualizamos el navegador y al hacer clic sobre slider, las dos capas se desplazan simultáneamente hasta esta posición. Pero tenemos un problema, cuando llegamos a los extremos de slider haciendo clic, se desborda progress e indicator.

Para corregir este comportamiento, simplemente debemos darle unos límites de desplazamiento a slider. Con una condición en la que asignaremos el valor mínimo y máximo en los que es seguro el desplazamiento. En este caso serán cero (0) como valor mínimo y el ancho completo del slider como valor máximo.

Código :

   $('.slider').on('mousedown', function(e){
      var pos    = $(e.currentTarget).offset()
      ,   posX   = e.pageX - pos.left;

      if(posX >= 0 && posX <= $(e.currentTarget).outerWidth()){
         $('.slider > .progress').css('width', posX+'px');
         $('.slider > .indicator').css('left', posX+'px');
      }
   });

Actualizamos el navegador, y vemos como progress e indicator se desplazan sin salirse de sus límites.

Ahora ordenemos un poco el código, creando una función que llamaremos move-slider y recibe como parámetro un evento. Llamamos la función cuando se dispare el evento mousedown.

Código :

   function moveSlider(e){
      e.preventDefault();

      var pos    = $(e.currentTarget).offset()
      ,   posX   = e.pageX - pos.left;

      if(posX >= 0 && posX <= $(e.currentTarget).outerWidth()){
         $('.slider > .progress').css('width', posX+'px');
         $('.slider > .indicator').css('left', posX+'px');
      }
   }

   $('.slider').on('mousedown', function(e){
      moveSlider(e);
   });

Nos cercioramos que siga funcionando correctamente y continuamos. Luego, dentro de mousedown capturamos el evento mousemove y con este llamamos nuevamente la función move-slider.

Código :

   function moveSlider(e){
      e.preventDefault();

      var pos    = $(e.currentTarget).offset()
      ,   posX   = e.pageX - pos.left;

      if(posX >= 0 && posX <= $(e.currentTarget).outerWidth()){
         $('.slider > .progress').css('width', posX+'px');
         $('.slider > .indicator').css('left', posX+'px');
      }
   }

   $('.slider').on('mousedown', function(e){
      moveSlider(e);

      $(this).on('mousemove', function(e){
         moveSlider(e);
      });
   });

Ahora cuando se produzca el evento mouseup sobre la capa slider, desactivaremos el evento mousemove para que este solo se ejecute mientras tenemos el click sostenido.

Código :

   function moveSlider(e){
      e.preventDefault();

      var pos    = $(e.currentTarget).offset()
      ,   posX   = e.pageX - pos.left;

      if(posX >= 0 && posX <= $(e.currentTarget).outerWidth()){
         $('.slider > .progress').css('width', posX+'px');
         $('.slider > .indicator').css('left', posX+'px');
      }
   }

   $('.slider').on('mousedown', function(e){
      moveSlider(e);

      $(this).on('mousemove', function(e){
         moveSlider(e);
      });
   }).on('mouseup', function(){
      $(this).off('mousemove');
   });

Actualizamos el navegador y ahora nuestro slider se desplaza tanto al hacer clic sobre él, como al arrastrar el indicador de posición.

OK, Agreguemos en el body un campo de texto que nos muestre el valor del slider mientras lo movemos.

Código :

            <label>
                Value: 
                <input type="text" id="valueSlider" value="0" />
            </label>

En la función move-slider crearemos una variable con el nombre value, ella va a ser igual a la cantidad en pixeles (px) donde se produce el evento multiplicado por cien (100) y dividido entre el ancho del total en pixeles (px) de la capa slider.

Código :

   function moveSlider(e){
      e.preventDefault();

      var pos    = $(e.currentTarget).offset()
      ,   posX   = e.pageX - pos.left
      ,   value   = posX*100/$(e.currentTarget).outerWidth();

      if(posX >= 0 && posX <= $(e.currentTarget).outerWidth()){
         $('.slider > .progress').css('width', posX+'px');
         $('.slider > .indicator').css('left', posX+'px');
      }
   }

   $('.slider').on('mousedown', function(e){
      moveSlider(e);

      $(this).on('mousemove', function(e){
         moveSlider(e);
      });
   }).on('mouseup', function(){
      $(this).off('mousemove');
   });

Ahora agregamos esta variable a la propiedad value del campo de texto que acabamos de crear.

Código :

   function moveSlider(e){
      e.preventDefault();

      var pos    = $(e.currentTarget).offset()
      ,   posX   = e.pageX - pos.left
      ,   value   = posX*100/$(e.currentTarget).outerWidth();

      if(posX >= 0 && posX <= $(e.currentTarget).outerWidth()){
         $('.slider > .progress').css('width', posX+'px');
         $('.slider > .indicator').css('left', posX+'px');

         $('#valueSlider').val(value);
      }
   }

   $('.slider').on('mousedown', function(e){
      moveSlider(e);
      $(this).on('mousemove', function(e){
         moveSlider(e);
      });
   }).on('mouseup', function(){
      $(this).off('mousemove');
   });

Vamos al navegador, y al arrastrar el indicador veremos cómo cambia el valor en el campo de texto.

Si deseamos que el valor máximo fuera 10, multiplicamos por este en la variable value y si quieren valores exactos, pueden utilizar el método Math.Round de JavaScript.

Agregando estilos con CSS

En nuestro archivo HTML, desactivaremos el campo de texto y crearemos dentro de slider una nueva capa con clase empty progress, la cual representará la sección del slider que aún no ha sido recorrida por el indicador.

Código :

        <div class='slider'>
            <div class='emptyprogress'></div>
            <div class='progress'></div>
            <div class='indicator'></div>
        </div>

        <!--<div class='info'>
            <label>
                Value: 
                <input type="text" id="valueSlider" value="0" />
            </label>
        </div> -->

Para el fondo de la capa slider utilizaremos la imagen de una cuadrícula que ya tenemos preparada, esta la desplazaremos -25px tanto en el eje X como en el eje Y y luego eliminaremos el borde.

Código :

.slider{
   background: url('../img/grid.png') -25px -25px;
   height: 60px;
   position: relative;
   width: 100%;
}

En la capa progress cambiaremos su altura a un 40% y la desplazamos un 25% desde la parte superior.

Código :

.slider > .progress{
   background: #14aaf6;
   height: 40%;
   top:25%;
   position: absolute;
   width: 0%;
}

Ahora duplicamos las propiedades de progress para crear empty progress y cambiamos su color de fondo. Puesto que la capa empty progress debe estar siempre visible, cambiamos su ancho a 100%.

Código :

.slider > .emptyprogress{
   background: #97d9fb;
   height: 40%;
   top:25%;
   position: absolute;
   width: 100%;
}

Ahora en el navegador podemos ver que al desplazar el slider, la capa progress se sobre pone a la capa empty progress. Continuamos con el indicador, Eliminamos el color de fondo y asignamos una imagen, esta no debe repetirse.

Código :

.slider > .indicator{
   background: url('../img/pointer.png') no-repeat;
   height: 100%;
   margin-left: -5%;
   left: 50%;
   position: absolute;
   width: 10%;
}

Cambiamos el ancho actual por el ancho de la imagen que hemos utilizado. En este caso por 60px. En la margen serán 8px para el TOP, automático para la parte derecha e inferior y -30px para el left.

Código :

.slider > .indicator{
   background: url('../img/pointer.png') no-repeat;
   height: 100%;
   margin: 8px auto auto -30px;
   left: 0%;
   position: absolute;
   width:60px;
}

Ahora en el navegador podemos ver mas centrado nuestro indicador. Volviendo a nuestro CSS, en progress y empty progress agregamos un borde solido de 3px y color blanco y una pequeña sombra de 1px y color gris claro para resaltar el borde.

Código :

.slider > .emptyprogress{
   background: #97d9fb;
   border: 3px solid white;
   height: 40%;
   top:25%;
   position: absolute;
   width: 100%;
   -webkit-box-shadow: 1px 1px 3px 0px #ccc;
   box-shadow: 1px 1px 3px 0px #ccc;
}

.slider > .progress{
   background: #14aaf6;
   border: 3px solid white;
   height: 40%;
   top:25%;
   position: absolute;
   width: 0%;
   -webkit-box-shadow: 1px 1px 3px 0px #ccc;
   box-shadow: 1px 1px 3px 0px #ccc;
}

Ya terminando, Agregamos unos bordes redondeados de 10px. Y cambiamos el cursor de indicator, progress y empty progress para darle un mejor aspecto.

Código :

.slider{
   background: url('../img/grid.png') -25px -25px;
   height: 60px;
   position: relative;
   width: 100%;
}

.slider > .emptyprogress{
   background: #97d9fb;
   border: 3px solid white;
   cursor: pointer;
   border-radius: 10px;
   height: 40%;
   top:25%;
   position: absolute;
   width: 100%;
   -webkit-box-shadow: 1px 1px 3px 0px #ccc;
   box-shadow: 1px 1px 3px 0px #ccc;
}

.slider > .progress{
   background: #14aaf6;
   border: 3px solid white;
   cursor: pointer;
   border-radius: 10px;
   height: 40%;
   top:25%;
   position: absolute;
   width: 0%;
   -webkit-box-shadow: 1px 1px 3px 0px #ccc;
   box-shadow: 1px 1px 3px 0px #ccc;
}

.slider > .indicator{
   background: url('../img/pointer.png') no-repeat;
   cursor: move;
   height: 100%;
   margin: 8px auto auto -30px;
   left: 0%;
   position: absolute;
   width:60px;
}

Con esto, hemos terminado nuestro slider, Recuerda que todo el código que vimos en este video esta disponible en el repositorio de GitHub de ninja code.

Si tienes alguna duda o pregunta, puedes hacerla en los comentarios y no te olvides suscribirte a nuestro canal de Youtube para mas ninja code.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.