Jahertor

Desarrollador freelance de apps Android, iOS e híbridas. Diseño de páginas Web, Tiendas Online y herramientas web a medida en Valencia.

Desarrollo Android y Web

Me llamo Javier Hernández y soy desarrollador freelance de aplicaciones Android, iOS e híbridas, además de diseñador Web (WordPress, Tiendas online, desarrollos a medida), entre otras cosas

jQuery UI Slider con pasos no lineales (función exponencial)

jQuery UI SliderjQuery UI Slider siempre ha sido un gran plugin, ya que de una forma muy vistosa nos permite seleccionar cantidades en una especie de scroll. Además, permite el uso de rangos, tiene multitud de eventos y funciones, etc.

El problema del mismo viene cuando abarcamos números muy dispares, en los cuales necesitamos una mayor precisión para números pequeños y menor precisión para números más grandes. Puede ser por ejemplo el caso de una serie de precios de viviendas, coches, u otros artículos en los que varíe mucho su precio. Poniendo un caso práctico, podemos encontrarnos con una inmobiliaria que venda pisos desde 60.000€ por una casa hasta 9.000.000€ por un palacio (por decir algo). Siendo así y teniendo un widget de digamos 300px, tenemos 300 puntos en una variación de varios millones de euros.

Para solventarlo, la idea sería que la variación se sucediera de forma exponencial, con una variación del precio menor al principio y mayor al final. Lo que hemos hecho ha sido usar un rango de 0 a 100 y según el valor dado aplicar una exponencial cúbica.

var max = 9000000;
jQuery( '#slider-range' ).slider({
range: true,
min: 0,
max: 100,
values: [0, max],
slide: function( event, ui ) {
 var e=ui.values;
 var n,m;
 n=Math.pow(e[0],pw)*Math.ceil(max/Math.pow(100,pw)); // valor rango inicial
 m=Math.pow(e[1],pw)*Math.ceil(max/Math.pow(100,pw)); // valor rango final
 switch(String(n).split('').length){
  case 1:
   break;
  case 2:
   n=Math.round(n/10)*10;
   break;
  case 3:
   n=Math.round(n/10)*10;
   break;
  case 4:
   n=Math.round(n/100)*100;
   break;
  case 5:
   n=Math.round(n/1000)*1000;
   break;
  case 6:
   n=Math.round(n/10000)*10000;
   break;
  case 7:
   n=Math.round(n/100000)*100000;
   break;
 }
 switch(String(m).split('').length){
  case 1:
   break;
  case 2:
   m=Math.round(m/10)*10;
   break;
  case 3:
   m=Math.round(m/10)*10;
   break;
  case 4:
   m=Math.round(m/100)*100;
   break;
  case 5:
   m=Math.round(m/1000)*1000;
   break;
  case 6:
   m=Math.round(m/10000)*10000;
   break;
  case 7:
   m=Math.round(m/100000)*100000;
   break;
  }
  jQuery( '#amount' ).html( (n + ' €' + ' - ' + m + ' €').replace(/\B(?=(\d{3})+(?!\d))/g, '.') ); // Texto con el rango (añadiendo los puntos decimales)
  jQuery( '.precio-desde' ).val(n); // Input con el valor inicial
  jQuery( '.precio-hasta' ).val(m); // Input con el valor final
}

La solución dada es con rangos mínimo y máximo, pero con un slider de un sólo valor la idea vendría a ser la misma.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *