How to limit the Slider widget Handler for jQuery UI?

Question

I’m using the Slider of jQuery UI, and I’m hoping that the Handle responsible for moving the slider, stay within the limits of the slider. Currently it is like this:

Limit 0%:

Limit 100%:

I want him to stay within the limit of the slider, that way:

Limit 0%:

Limit 100%:

How to solve this problem? Follow the code in jsfiddle:

https://jsfiddle.net/a5erpzqp/2/

Important remarks:

• Moving Handle should be fluid as it normally works;
• The Slider used uses the property range as seen in jsfiddle
• The solution must not present any visual anomalies
• jsfiddle presents a sample where Handle exceeds the limits of Slider

Answer 1

I solved the problem with a very simple solution, I created another div simulating the Slider background, and using padding on the sides was enough to create this visual limitation. To solve the problem of range, added a div internal to create the range initial.

$( function() {
    var handle = $( "#custom-handle" );
    $( "#slider" ).slider({
    range: 'min',
      create: function() {
        handle.text( 'total: '+ $( this ).slider( "value" ) );
      },
      slide: function( event, ui ) {
        handle.text( 'total: ' + ui.value );
      }
    });
  } );

#custom-handle {
    width: 90px;
    height: 1.6em;
    top: 50%;
    margin-top: -.8em;
    text-align: center;
    line-height: 1.6em;
    margin-left:-45px;
  }
  
  body{padding:50px;}
  #slider{border:none;}
  .slider_bg{
    padding:0 44px;
    border:1px solid #CCC;
    position:relative;
  }
  .bg_ranger{
      background:#e9e9e9;
      width:45px;height:13px;
      position:absolute;
      top:0;
      left:0;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

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

<div class="slider_bg">
<div class="bg_ranger"></div>
<div id="slider">
  <div id="custom-handle" class="ui-slider-handle"></div>
</div>
</div>

Answer 2

Set the left margin of the handle as -1px, then make a check of the current value of the slide if it is greater than x value it changes the left margin to -101px if smaller, it changes again to -1px.

Maybe someone asks: how did you get the value -101px?

Size of Handle = 100px
Size of the Handle embroidery = 1px;

$( function() {
    var handle = $( "#custom-handle" );
    $( "#slider" ).slider({
      create: function() {
        handle.text( 'total ' + $( this ).slider( "value" ) + '%' );
      },
      slide: function( event, ui ) {
        handle.text( 'total ' + ui.value + '%' );
        // Verifique o valor atual
        // Aqui eu define que ser for menor que
        // 50 ele altera a margin da esquerda para -1px
      	if (ui.value < 50) {
        	$("#custom-handle").css({
          	'margin-left': '-1px'
          });
        } else {
          // Caso for maior, define como -101px
          $("#custom-handle").css({
          	'margin-left': '-101px'
          });
        }
      }
    });
  } );

#custom-handle {
  width: 100px;
  height: 1.6em;
  top: 6px;
  margin-top: 0;
  text-align: center;
  line-height: 1.6em;
  font-size:11px;
  margin-left: -1px; /* Defina a margin da esquerda como 0px */
}
body{padding:20px 30px;}
#slider{
  height:20px;
}

<link rel="stylesheet" href="https://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>
<div id="slider">
  <div id="custom-handle" class="ui-slider-handle"></div>
</div>

I put it on Github for future reference.