JQuery Горизонтальная перетаскиваемая линейка не гладкая

Question

Я создаю горизонтальную перетаскиваемую линейку, используя jQuery UI. Я закодировал все, как ожидалось, но перетаскивание не плавное.

Когда я пытаюсь перетащить линейку между числами, перетаскивание не работает. Перетаскивание работает только при перетаскивании верхней части линейки.

На изображении ниже показаны разделы, которые нельзя перетаскивать

Я был бы признателен, если бы кто-нибудь объяснил или помог мне перетащить всю линейку

Это мой код

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script type="text/javascript">

  function stripHTML( text ){
    // please do not edit this function
    var data = $("<div/>").html(text).text();
    return data;
  }

  $(function() {


    load_steps();

  function getVal() {
    var p = $(".weight-ladder").position().left;
    var r = "";
    //var h = $(".step").height();
    // the ruler starts at position 160
    // the difference between is 12
    // x= 20, 160, 148

    var difference = 160 - p;
    var per_section = Math.ceil(difference/12);
    r = per_section  + 20
    if( p < -7 ){
      r = per_section  + 20 + 1;
    }

    if( p < -172 ){
      r = per_section  + 20 + 1 + 1;
    }

    if( p < -326 ){
      r = per_section  + 20 + 1 + 1 + 1;
    }

    if( p < -497 ){
      r = per_section  + 20 + 1 + 1 + 1 + 1;
    }

    if( p < -673 ){
      r = per_section  + 20 + 1 + 1 + 1 + 1+1;
    }


    if( p < -855 ){
      r = per_section  + 20 + 1 + 1 + 1 + 1+1+1;
    }

    if( p < -1009 ){
      r = per_section  + 20 + 1 + 1 + 1 + 1+1+1+1;
    }

    if( p < -1155 ){
      r = per_section  + 20 + 1 + 1 + 1 + 1+1+1+1+1;
    }

    if( p < -1325 ){
      r = per_section  + 20 + 1 + 1 + 1 + 1+1+1+1+1+1;
    }

    if( p < -1504 ){
      r = per_section  + 20 + 1 + 1 + 1 + 1+1+1+1+1+1+1;
    }

    if( p < -1682 ){
      r = per_section  + 20 + 1 + 1 + 1 + 1+1+1+1+1+1+1+1;
    }

    if( p < -1829 ){
      r = per_section  + 20 + 1 + 1 + 1 + 1+1+1+1+1+1+1+1+1;
    }


    if( p < -2030 ){
      r = per_section  + 20 + 1 + 1 + 1 + 1+1+1+1+1+1+1+1+1+1;
    }

    if( p < -2175 ){
      r = per_section  + 20 + 1 + 1 + 1 + 1+1+1+1+1+1+1+1+1+1+1;
    }

    if( p < -2343 ){
      r = per_section  + 20 + 1 + 1 + 1 + 1+1+1+1+1+1+1+1+1+1+1+1;
    }

    if( p < -2513 ){
      r = per_section  + 20 + 1 + 1 + 1 + 1+1+1+1+1+1+1+1+1+1+1+1+1;
    }

    if( p < -2679 ){
      r = per_section  + 20 + 1 + 1 + 1 + 1+1+1+1+1+1+1+1+1+1+1+1+1+1;
    }


    if( p < -2838 ){
      r = per_section  + 20 + 1 + 1 + 1 + 1+1+1+1+1+1+1+1+1+1+1+1+1+1+1;
    }

    if( p < -3028 ){
      r = per_section  + 20 + 1 + 1 + 1 + 1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1;
    }


    if( p < -3186 ){
      r = per_section  + 20 + 1 + 1 + 1 + 1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1;
    }

    if( p < -3365 ){
      r = per_section  + 20 + 1 + 1 + 1 + 1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1;
    }

    if( p < -3533 ){
      r = per_section  + 20 + 1 + 1 + 1 + 1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1;
    }

    if( p < -3679 ){
      r = per_section  + 20 + 1 + 1 + 1 + 1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1;
    }

    if( p < -3869 ){
      r = per_section  + 20 + 1 + 1 + 1 + 1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1;
    }

    if( p < -4037 ){
      r = per_section  + 20 + 1 + 1 + 1 + 1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1;
    }

    if( p < -4181 ){
      r = per_section  + 20 + 1 + 1 + 1 + 1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1;
    }

   

    


   

    

     // console.log(  p );


    return r;
  }

  //$(".ladder").css()

  $(".weight-ladder").draggable({
    axis: "x",
    scroll: true,
    //containment: [0, -771, 150, 149],
    //containment: [0, -1148, 150, 60],
    drag: function(e, ui) {
      $(".ladder-value-input").html(getVal());
     
      $(".weight-value").html( "<span>"+getVal()+"</span> lbs" );
      

    }
  });


  function load_steps(){
    var main_steps = ""; 
    for(var i = 20; i <= 420; i ++){
      // i = 20, i = 21 bra bra bra bar
      var num ; 

      if( i == 20 ){
         main_steps += "<div class='main-step'><span>"+i+"</span></div>";
         for( var j = 1; j <= 4; j++){
            main_steps += "<span class='sub-step'></span>";
         }
      } else {
        if( i%5 == 0 ){
           main_steps += "<div class='main-step'><span>"+i+"</span></div>";
           for( var j = 1; j <= 4; j++){
              main_steps += "<span class='sub-step'></span>";
           }
        }
      }

      
      
       
    }

    $(".weight-ladder").html(""+main_steps+"");
  }

 
});

</script>


<style type="text/css">
  body{
    padding: 100px;
  }

  .weight-everything-holder{
    position: relative;
  }

  .horizontal-ladder{
    height: 100px; 
    overflow: visible;
    width: 300px;
    position: relative;
    overflow: hidden;
  }


  

  .weight-ladder{
    display: flex;
    position: relative;
    height: 100px;
    user-select: none;
  }

  .horizontal-ladder .main-step{
    width: 48px;
    border-left: 2px solid #979797;
    height: 100px;
    display: block;
    height: 50px;
    float: left;
    margin-left: 10px;
    position: relative;
  }

  .ui-widget-content{
    border: none;
  }

  .sub-step{
    display: inline-block;
    border-right: 1px solid #979797;
    padding-right: 10px;
    height: 30px;
  }

  .main-step span{
    position: absolute;
    left: -10px;
    top: 50px;
  }

  .weight-marker{
    position: absolute;
    border-left: 2px solid rgba(255,0,0,0.65);
    position: absolute;
    height: 100px;
    width: 300px;
    left: 170px;
    top: -50;
  }

  .weight-value{
    position: absolute;; 
    left: 120px;
    background: #475665;
    width: 70px; 
    padding: 20px;
    text-align: center;
    justify-content: center;
    color: white;
    font-size: 17px;
    top: -80px;
  }

  .weight-value span{
    font-size: 25px;
  }

  .weight-value:after{
    content: ""; 
    position: absolute;
    border-right: 12px solid transparent; 
    border-left: 12px solid transparent; 
    border-top: 12px solid #475665; 
    bottom: -12px;
    left: 39px;
  }
</style>

<div class="weight-everything-holder">
  <div class="ui-widget horizontal-ladder">
    <div class="ui-widget-content weight-ladder" style="left: -1631px;  flex: 1 0 150px;"> 

      <!-- starting horizontal ruler --> 



      <!-- ending the horizontal ruler --> 
    </div>
    <div class="weight-marker"></div>

  </div>
  <div class='weight-value'><span>180</span> lbs</div>
</div>