Как настроить ширину ручки слайдера пользовательского интерфейса - PullRequest
Новая
       5

Как настроить ширину ручки слайдера пользовательского интерфейса

0 голосов
/ 07 октября 2018

Как отрегулировать ширину ручки ползунка до неограниченного максимального значения.

Предположим, если ползунок переместит максимальную ширину выше диапазона (пример: 320), тогда ползунок отрегулирует ширину новой ручки на старую ширину ручки (пример: 40) нужно заполнить его ползунком по ширине ручки.Примечание: Пожалуйста, проверьте, как сделать его гибкой ручкой слайдера.

Expected Result

HTML: 

$( "#slider-range-max").slider({
    value:0,
    min: -100,
    max: 100,
    step:10,
    orientation:"horizontal", 
    animate: true,
    create : function() {
    var amountValue = $(this).slider('value');
    $("#amount").val((amountValue > '0') ? ('+'+ amountValue) : amountValue);
        var tooltip = '<div class="tooltip">' + amountValue +
            '</div>';
          $(this).find('.ui-slider-handle').html(tooltip); 
     //$(this).find('#slider-range-max').text(amountValue);
    },
    slide: function (event, ui) {
      var value = Math.abs(ui.value);
      var percentage = (value/100)*100 ||initialValue;

          var appendMaxValue=parseInt(percentage)-100||initialValue;
      //var minPercentage = (value/-100)*100 ||initialValue;
     var max = $( "#slider-range-max" ).slider( "option", "max" );
       var min = $( "#slider-range-max" ).slider( "option", "min" );
       var step = $( "#slider-range-max" ).slider( "option", "step" );

        if(ui.value>0 && ui.value<=100){//Slide >0 Value
          $('#blue_bar .min span').css('width',percentage+'%');
          $('#blue_bar .max span').css('width',0+'%');

           tooltip ='<div class="tooltip"><div class="tooltip-inner">' + ui.value +
            '</div></div>'; 
        }  

        if(ui.value>100){
          console.log(appendMaxValue+"appendMaxValue"+ui.value +"ui.value"+percentage +"percentage");
            $('#blue_bar .min span').css('width',100+'%');
            $('#blue_bar .max span').css('width',0+'%');
            $('#blue_bar  div').css('width',50+'%');

            tooltip ='<div class="tooltip"><div class="tooltip-inner">' + ui.value +
              '</div></div>';
        }
        if(ui.value<0 && ui.value<100){ //Slide Lessthan Zero Value
          $('#blue_bar .max span').css('width',percentage+'%');
          $('#blue_bar .min span').css('width',0+'%');
          $('#blue_bar div').css("width", 50+'%'  );
          $('#blue_bar div').css( "float","right");
          tooltip ='<div class="tooltip">' + ui.value +
            '</div>';
        } 
        if(ui.value<-100){
          $('#blue_bar .max span').css('width',100+'%');
          $('#blue_bar .min span').css('width',0+'%');
          tooltip ='<div class="tooltip">' + ui.value +
            '</div>';
        } 
        if(ui.value==0){ //Slide Zero Value
           console.log(ui.value+"ZEROOOO")
      $('#blue_bar .max span').css('width',0+'%');
      $('#blue_bar .min span').css('width',0+'%');
      tooltip ='<div class="tooltip">' + percentage +
            '</div>'; 
        } 

         $("#amount").val(ui.value);   
         $(ui.value).val($('#amount').val());
         $(this).find('.ui-slider-handle').html(tooltip); 


       if(ui.value>=max){
       sliderDynamicMaxAVal(max,step);
     } 
     if(ui.value<=min){
      sliderDynamicMinAVal(min,step);
     }
  }  
}).append('<div id="blue_bar" style="width:100%;"><div class="min"><span></span></div><div class="max"><span></span></div></div>')
#blue_bar {
     float: right;
     height: 100%;
     border-radius: 0 4px 4px 0;
     }  	
 
   #blue_bar div {
    float:right;
    width: 50%;
    height: 100%; 
  }  
 
 #blue_bar .min span{
     background:#CF8331;
     width: 0%;
     height: 100%;
     float:left;
     border-top-right-radius: 17px;
     border-bottom-right-radius: 17px;
 }
 #blue_bar .max span{
     background:#4FBFCF;
     width: 0%;
     height: 100%;
     float:right;
     border-top-left-radius: 17px;
     border-bottom-left-radius: 17px;
  
 }
    .tooltip{
     width:20px;
     position: relative;
     z-index: 1020; 
     display: block; 
     padding: 0px;
     font-size: 11px;
     visibility: visible;
     margin-top: 2px;
     bottom:120%;
     margin-left: 0em;
     border-style: none
    
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="slider-range-max"  class="custom-slider"></div>
...