JQuery Slider - 改变步骤/异质性之间的空格

Question

我正在尝试使用jQuery UI幻灯片制作这样的滑块：

每个范围必须有一个特定的范围，现在效果很好。

问题是这些步骤之间的空格与此设计不符。

结果是这样的：

我的代码：

function addCommas(nStr)
{
	nStr += '';
	x = nStr.split('.');
	x1 = x[0];
	x2 = x.length > 1 ? '.' + x[1] : '';
	var rgx = /(\d+)(\d{3})/;
	while (rgx.test(x1)) {
		x1 = x1.replace(rgx, '$1' + ',' + '$2');
	}
	return x1 + x2;
}



$( "#price-range" ).slider();
    var trueValues =[10e3, 100e3, 250e3, 500e3, 1e6, 5e6];
    var values = ["10k",   "100k",   "250k",    "500k",    "1m",    "5m"];

 function getP(v){
    return (v*100)/trueValues[5];
}

$( "#price-range" ).slider({
        min: 10000,
        max: 5000000,
        value: 10000,
    step: 10000,
        slide: function( event, ui ) {
            console.log(ui.value)
             if(ui.value>=trueValues[0] && ui.value<trueValues[1]){
                 $("#price-range").slider({step:trueValues[0]});//range: 10k-100k, step: 10k
                 console.log("range: 10k-100k, step: 10k")
            }
            else if(ui.value>=trueValues[1] && ui.value<trueValues[2]){
                $("#price-range").slider({step:trueValues[0]});//range: 100k-250k, step: 10k
                console.log("range: 100k-250k, step: 10k")
            }
            else if(ui.value>=trueValues[2] && ui.value<trueValues[3]){
                $("#price-range").slider({step:trueValues[0]*5}); //range: 250k-500k, step: 50k
                console.log("range: 250k-500k, step: 50k")
            }
           else if(ui.value>=trueValues[3] && ui.value<trueValues[4]){
                $("#price-range").slider({step:trueValues[1]}); //range: 500k-1m, step: 100k
               console.log("range: 500k-1m, step: 100k")
            }
           else if(ui.value>=trueValues[4] && ui.value<trueValues[5]){
                $("#price-range").slider({step:trueValues[3]}); //range: 1m-5m, step: 500k
               console.log("range: 1m-5m, step: 500k")
            }

            $("#a").val( addCommas(ui.value) );

        }
    });

$.each(values, function(key,value){

  if(key === 0 || key === values.length-1)
      console.log(trueValues[key])
    w = getP(trueValues[key]);
    
  $("#legend").append("<label style='width: "+w+"%'>"+value+"</laben>");

});

* {
    font-family:Arial;
    font-size:20px;
}
body {
    padding:20px;
}
#slider { margin:20px }


label{
  display: inline-block;
  text-align:left;
}
label:first-child{
  text-align:left;
}
label:last-child{
  text-align:right;
}

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<div id="price-range"></div>
<div id="legend"></div>
<input type="text" name="from" id="a" value="10000" placeholder="" />

或工作小提琴：http://jsfiddle.net/mwugk8j8/1/

它类似于这个问题： JQuery Slider, how to make "step" size change

但我必须保持步骤之间的功能。

我设法在步骤之间没有功能的这个： http://jsfiddle.net/3wL12uhL/1/

也发现了这一点 - http://codepen.io/martinAnsty/pen/BCotE 但仍然没有运气。

我怎样才能做到这一点？谢谢！