javascript - JQuery Slider - change spaces between steps / heterogeneity -

i'm trying make slider using jquery ui slide:

there has specific range each range, working great now.

the problem spaces between steps don't match design.

the result this:

my code:

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="" />

or working fiddle:http://jsfiddle.net/mwugk8j8/1/

it's similar question: jquery slider, how make "step" size change

but have keep functionality between steps.

i managed make 1 without functionality between steps: http://jsfiddle.net/3wl12uhl/1/

found - http://codepen.io/martinansty/pen/bcote still no luck.

how can achieve this? thanks!