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