bootstrap - JQuery UI Slider con pasos no lineales/exponenciales/logarítmicos

slider js

Question

Soy nuevo en Javascript y JQuery, estoy tratando de usar JQuery UI Slider para reemplazar las cajas desplegables de rango de precios (una para el precio mínimo, otra para el precio máximo) para uno de mis sitios.

Aquí está mi código actual:

$(function() {
var slider = $( "#slider-range" ).slider({
range: true,
min: 0,
max: 2500000,
step: 1000,
values: [ 0, 2500000 ],
slide: function( event, ui ) {
$( "#amount" ).val( "RM " + commafy(ui.values[ 0 ]) + " to RM " + commafy(ui.values[ 1 ]) );
}
});
$( "#amount" ).val( "RM " + commafy($( "#slider-range" ).slider( "values", 0 )) +
" to RM " + commafy($( "#slider-range" ).slider( "values", 1 )) );
function commafy(val) {
return String(val).split("").reverse().join("")
.replace(/(.{3}/B)/g, "$1,")
.split("").reverse().join("");
}
});

El rango de precio es de 0 a 2500,000. Después de las pruebas, descubrí que UX sería mejor si el control deslizante aumenta de forma no lineal, ya que la mayoría de los usuarios de mi sitio buscarían entre el rango de 25,000 a 200,000.

Una porción muy pequeña del control deslizante debe mostrar el rango de 0 a 25000, el 70% de 25,000 a 200,000, mientras que el resto debe mostrar 200,000 o más. No quiero que se ajuste a valores fijos, pero los pasos tienen que ser 1000.

Encontré dos soluciones en este sitio:
1) Control deslizante logarítmico <- La solución no se basó en el uso del control deslizante JQuery UI, así que realmente no sé cómo aplicarlo en mi código.
2) JQuery Slider, cómo hacer que el tamaño del "paso" cambie <- No puedo entender si el chico comenzó a usar valores verdaderos y valores como parte de la solución. Intenté aplicar a mi código, el control deslizante funciona bien (aunque se movió demasiado rápido hacia el final para mi gusto) pero el texto no se muestra.

¿Algunas ideas?

Answer 1

Puede tomar este enfoque: use el rango de control deslizante 0-100, que calcular valores. Con html:

<div id="slider-range"></div>
<input id="amount" type="text" size="40" />

y JS:

var slider = $("#slider-range").slider({
range: true,
min: 0,
max: 100,
step: 1,
values: [10, 80],
slide: function (event, ui) {
$("#amount").val("RM " + commafy(ui.values[0]) + " to RM " + commafy(ui.values[1]));
}
});
$("#amount").val("RM " + commafy($("#slider-range").slider("values", 0)) +
" to RM " + commafy($("#slider-range").slider("values", 1)));
function commafy(val) {
/* Total range 0 - 2,500,000 */
/* 70% from 25,000 to 200,000, what have left (2,325,000) share left (25,000) and right (2,300,000) */
/* So, final dividing */
var toPresent = 0;
if (val < 10) {
toPresent = (val / 10) * 25000;
} else if (val <= 80) {
toPresent = 25000 + (val - 10) / 70 * 175000;
} else {
toPresent = 200000 + (val - 80) / 20 * 2300000;
};
return String(toPresent).split("").reverse().join("")
.replace(/(.{3}/B)/g, "$1,")
.split("").reverse().join("");
}

Ejemplo Fiddle .