javascript - Creating a slider between two numbers -

so i've been working on re-producing slider found here https://www.skylight.io/ ( scroll down find price slider ). far ive managed create similiar, numbers hard coded, making difficult change , not re-usable. i've been researching around , think need use math.log() , math.exp() achieve in link above i'm not sure.

heres jsfiddle of have far https://jsfiddle.net/7wrvpb34/.

i feel maths part of problem halting me think, appreciated.

javascript code below:

var slider = document.getelementbyid("slider") var sliderfill = document.getelementbyid("slider-fill") var knob = document.getelementbyid("knob")  var mousedown; var mousepos = {x:0}; var knobposition;  var minprice = 20; var price = 0; var minrequests = 50; var requests = 50 + ",000";  var incrementspeed = 2; var incrementmodifier = 20; var incrementvalue = 1;  var minmillioncount = 1; var millioncount = 1;  var previousrequestamount = 0;  document.getelementbyid("price").innerhtml = price; document.getelementbyid("requests").innerhtml = requests;  highlighttable(1);  document.addeventlistener('mousemove', function(e) {     if(mousedown) {         updateslider(e);     } })  function updateslider(event) {     mousepos.x = event.clientx - slider.getboundingclientrect().left;     mousepos.x -= knob.offsetwidth / 2;      console.log(mousepos.x);      if(mousepos.x < 0) {         knob.style.left = "0px";         sliderfill.style.width = "0px";         price = 0;         requests = 50 + ",000";         document.getelementbyid("price").innerhtml = price;         document.getelementbyid("requests").innerhtml = requests;         return     }     if(mousepos.x > slider.offsetwidth - 20) {         return     }     sliderfill.style.width = mousepos.x +  10 + "px";     knob.style.left = mousepos.x + "px";     //increase requests using x position of mouse     incrementspeed = mousepos.x / incrementmodifier;     requests = minrequests + (mousepos.x * incrementspeed);     //round nearest 1     requests = math.round(requests / incrementvalue) * incrementvalue;     if (requests >= 1000){         var m = requests/ 1000;         m = math.round(m / 1) * 1;         //problem, lower modifier depending on requests         incrementmodifier = 20 * 0.95;         document.getelementbyid("requests").innerhtml = m + " million";         //adjust prices         if(( requests >= 1000) && (requests < 10000)) {             var numofmillions = requests / 100;             //round closest 10.             //10 * number of millions             var rounded = math.round(numofmillions / 10) * 10;             price = minprice + rounded;             highlighttable(3);         }         //adjust prices         if(requests >= 10000) {             var numofmillions = requests / 1000;             var rounded = math.round(numofmillions / 1) * 1;             var baseprice = minprice * 6;             price = baseprice + rounded;             highlighttable(4);         }     } else {         incrementmodifier = 20;         document.getelementbyid("requests").innerhtml = requests + ",000"         if(requests < 100) {             highlighttable(1);             price = 0;         } else {             highlighttable(2);             price = 20;         }     }     previousrequestamount = requests;     document.getelementbyid("price").innerhtml = price; }  knob.addeventlistener('mousedown', function() {     mousedown = true; });  document.addeventlistener('mouseup', function() {     mousedown = false; });   function highlighttable(rownum) {     var table = document.getelementbyid("payment-table")     for(var = 0; < table.rows.length; ++i) {         var row = table.rows[i]         if(i == rownum) {             row.style.background = "grey"         } else {             row.style.background = "white";         }      } } 

thank time.

if want reusable need create mathematical function assigns result number of requests. give easy example.

if want different result 1,10,100,100,10000 etc

var d = math.log10(requests);  if(d<1){  dosomething(); }else if(d<2){  dosomethingelse(); } //etc 

this way if want change specific values create results, need change function.

this works if tiers of requests follow math function, if don't need hard code it.

however if don't follow math function, know how them change based on value can this.

var changingvalue = 4;  if(requests < 400*changingvalue){  dosomthing(); }else if(requests <= 400*changingvalue*changingvalue){  dosomethingelse(); }else{// requests greater of above  dotheotherthing(); } 

edit:

for second 1 need make sure each condition if larger other top bottom.