jQuery UI滑块的最大跨度宽度动态增加？

Question

我试图实现jQuery ui滑块的最小值和最大值 超过最大超出范围或最小跨度 动态增加，因此如何使其固定跨度。

输出： 预期结果：

 However I want to make it fixed max/min span width below code :

HTML：

<div id="slider-range-max" class="custom-slider"></div>

JS：

    $(function() {
	    $( "#slider-range-max").slider({
	    	value:0,
	        min: -100,
	        max: 100,
	        step:10,
	        slide: function (event, ui) {
	         var max = $( "#slider-range-max" ).slider( "option", "max" );
	     	   if(ui.value==max){
	     		   sliderDynamicMaxVal(max,step);
	     	   }   
	      }  
	         
	        
	  }).append('<div id="blue_bar" style="width:100%"><div class="min"><span></span></div><div class="max"><span></span></div></div>');
    
      function sliderDynamicMaxVal(MaxValue,stepValue){
	  // Update the global variable - do not use var keyword
	    var globalMaxValue =parseInt(MaxValue)+parseInt(stepValue);
	    console.log(MaxValue +"" +stepValue +"max"+globalMaxValue);
	    $( "#slider-range-max" ).slider( "option", "max", globalMaxValue);
	   // $( "slider-range-max" ).slider( "option", "min", 10 );
  }

<div id="slider-range-max" class="custom-slider"></div>

`