How to limit the jQuery UI Slider widget handler?

Question

How to limit the jQuery UI Slider widget handler?

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

I'm using the Slider of the jQuery UI , and I'm wanting the handle responsible for moving the slider, stay within the limits of the slider. Currently it looks like this:

Limit 0%:

100%limit:

Iwantittostaywithinthelimitoftheslider,likethis:

Limit0%:

100%limit:

Howtosolvethisproblem?Hereisthecodeinjsfiddle:

link

Important notes:

Moving the handle should be fluid as it normally does;
The Slider used uses the range property as seen in jsfiddle
Solution can not display visual anomalies
jsfiddle displays a sample where the handle exceeds the bounds of the Slider

javascript jquery-ui slider widget

asked by anonymous 11.09.2017 / 03:29

2 answers

0

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

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

Size of the handle = 100px
Handle size = 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><scriptsrc="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 .

11.09.2017 / 04:13

Awesome Font Problems Filtering result by category

score 1 · Accepted Answer

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

$( 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><scriptsrc="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>