JQuery UI Control deslizante con pasos no lineales/exponenciales/logarítmicos

Question

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

Aquí está mi código actual:

gama

$(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 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 tiene que ser 1000.

he encontrado dos soluciones en este sitio:
1) Logarithmic slider < - La solución no se basa en el uso de la interfaz de usuario jQuery control deslizante, así que realmente no sé cómo aplicarlo en mi código.
2) JQuery Slider, how to make "step" size change < - No puedo entender si el hombre 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.

¿Alguna idea?

Answer 1

Puede seguir este enfoque: use el rango de control deslizante 0-100, luego de calcular los 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.