JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.css">
<div id="price-range"></div>
<div id="legend"></div>
<input type="text" name="from" id="a" value="10000" placeholder="" />

CSS

* {
    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;
}

JavaScript

(function( $, undefined ) {

        $.extend($.ui.slider.prototype.options, {
            dragAnimate: true
        });

        var _mouseCapture = $.ui.slider.prototype._mouseCapture;
        $.widget("ui.slider", $.extend({}, $.ui.slider.prototype, {
            _mouseCapture: function(event) {
                _mouseCapture.apply(this, arguments);
                this.options.dragAnimate ? this._animateOff = false : this._animateOff = true;
                return true;
            }
        }));

    }(jQuery));


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]){
               ...