CODEWITHSUNDEEP
jqueryjquery-uislider
Kris Erickson
Kris Erickson

Reputation: 33834

How do I stop the jquery UI slider from sliding beyond the gutter?

I am using the jquery-ui slider as a sideways scroll bar, and am having issues with the fact the handle slides beyond the end gutter (it can be seen here if you slide the slider the farthest to the right). I have tried everything I can think of with CSS to try to get the handle to go no further than the gutter, but to no avail. Any suggestions would be greatly appreciated.

To clarify I am adding the following diagram which shows the problem (it is very subtle since the handle is small, however if you create a large handle in CSS, the handle goes exactly half its width beyond the gutter).

Here is a jsbin of the problem. Basically I want the handle to stay within the gutter.

alt text

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

  <style type="text/css">

  .demo {
     width: 800px;
     margin: 50px auto 0 auto;
  }



  .ui-slider-horizontal  {
    background: #DFEFFC none repeat scroll 0 0;
  }

  .ui-slider .ui-slider-handle {
    background-image:url(http://img207.imageshack.us/img207/7760/sliderhandle.png);
    cursor:default;
    height:15px;
    position: absolute;
    width:27px;
    z-index:2;   
    margin-left: -1px;
    margin-top: 3px;
  }

  .ui-slider 
  {
    position:relative;
    text-align:left;
  }


  </style>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#slider").slider({
    slide: function( event, ui ) {      

            //normalise handle position between 0 and 1 relative to slider width
            var range = $("#slider").width();//width of slider
            var normalised = $("#slider1handle").position().left / range;

            //normalise between desired range: 0:HandleWidth
            var range2 = $("#slider1handle").width();
            normalised = (normalised*range2) + 1;      

            var marginAmount = -1*normalised;
            $("#slider1handle").css("margin-left", marginAmount);      
        }

    });
    $('a.ui-slider-handle').attr('id', "slider1handle");



  });
  </script>
</head>
<body>
<div class="demo">
  <div id="slider"></div>
</div>
</body>
</html>

Upvotes: 13

Views: 12247

Answers (9)

WhiteRau
WhiteRau

Reputation: 857

i realize this is an old post, but i found a much simpler solution when i was confronted with this problem:

since the handle is purely a visual element, set the handle's margin-left to minus half the width of the handle. it will now properly center on the ends of the sliderail.

eg:

#slider-handle { width: 4rem; margin-left: -2rem; }

Upvotes: 0

cbaigorri
cbaigorri

Reputation: 2725

The simple way I handled it was to make the slider track transparent and add a background layer that I could style separately.

HTML

<div class="slider-container">
  <div class="slider-background"></div>
  <div id="slider"></div>
</div>

CSS

.slider-container {
  position: relative;
}
.slider-background {
  position: absolute;
  top: 0;
  left: 10px;
  background: blue;
}
#slider {
  background: transparent;
}

Upvotes: 0

brubla
brubla

Reputation: 61

For me works this:

var $Slide = jQuery('#StatusSlide');
$Slide.slider({
  slide: function(event, ui) {
    /* Fix handler to be inside of slider borders */
    var $Handle = $Slide.find('.ui-slider-handle');
    $Handle.css('margin-left', -1 * $Handle.width() * ($Slide.slider('value') / $Slide.slider('option', 'max')));
  }
});
/* Fix handler to be inside of slider borders */
var $Handle = $Slide.find('.ui-slider-handle');
$Handle.css('margin-left', -1 * $Handle.width() * ($Slide.slider('value') / $Slide.slider('option', 'max')));

Upvotes: 0

Holger Tepper
Holger Tepper

Reputation: 1

I found a solution. But first: I've had the same problem with single sliders and range sliders. Applying any CSS wouldnt work, nor did any Javascript-Fix-Approach.

SOLUTION for me was: The sliding area is 100% of the width of the scrollbar. So when your slider is 100px wide, and you set it to "50", the "margin-left" of the handle is 50%. When its 200px, set to 20, its 10% ... and so on.

I looked for that piece of code that calculated the leftmargin of the handle, reduced the with and added a standard leftmargin.

Open jquery-ui.js with the editor of your choice and goto line ~13170 and find function _refreshValue. You can also search for the first appearance of "valPercent" After line "valPercent = ....." i added the following:

valPercent = valPercent * 0.95 + 3.1;

This aliged my Handled perfectly inside the range and the gutter. Maybe you need to play around with the values to get your optimal setting depending on the ui-template you use, but at least this

Because I need any reputation to post images, here's a link to what i drew for you.

http://www.germanunique.com/slider.png

If you need help with this you can write me an email to [email protected] or leave a reply. This was my first Post on StackOveflow, I hope it helps those who have the same problem.

BYE !

Upvotes: 0

user2037022
user2037022

Reputation: 1

just add "padding-right" to the slider which is equal to the amount of the .ui-slider-handle class element.

#slider {
 height: 20px;
 width: 150px;
 background: #ccc;
 padding-right: 20px; (equal to the width of the handle below)
}
.ui-slider .ui-slider-handle {
  height: 20px;
  width: 20px;
  background: #333;
  display: block;
  position: relative;
}

Upvotes: -1

Arjan
Arjan

Reputation: 23529

the handle goes exactly its width beyond the gutter

More like exactly half its width, so it's not really moving past the end of the slider. When aligning your screenshots correctly, then you'll see the center of the handle is at the end of the slider, just like I expect it to be for a very precise setting. When the left is 0%, and the right is 100%, then the handle has to move past the end a bit to allow for choosing that 100%.

jQuery sliders with a line to indicate the end of the slider

This is the same when enlarging the handle. When in your case the handle moves more than half its width over the right edge, then I assume it extends less than half on the left? When playing with the CSS a bit I get the same effect with huge handles, like:

.ui-slider-horizontal .ui-state-default {
  /** Defaults: 
      margin-left: -0.6em;
      top: -0.3em;
  */
  width: 69px;
  height: 140px;
  margin-left: -39px;
  top: -68px;
}

Even better shown using an arrow, a bit of a hack:

.ui-slider-horizontal .ui-state-default {
  width: 40px;
  margin-left: -20px;
  top: 15px;
  background-color: white;
  background-image: url('https://i.sstatic.net/ObK9i.png');
  background-repeat: no-repeat;
  border: 0;
}

Slider with arrow to show gutter

However, as for your usage as a scrollbar, see the slider scrollbar demo, which seems to do what you want? Use a slider to manipulate the positioning of content on the page. In this case, it acts as a scrollbar with the potential to capture values if needed.

Upvotes: 14

Alex
Alex

Reputation: 7

Or you can do it with math, like this: 

slide: function(event, ui) {
    $(ui.handle).html("<span class='ui-corner-all hover'>"+ui.value+"</span>");
    fix_slider(ui.handle,ui.value);
},
function fix_slider(slider,value) {
    var $.slider_decalatio = 0.35 // for an width of 27px
    var pos_calc = $.slider_decalation * value; // y = ax;
    $(slider).find('span').css("left",pos_calc + "px");
});

This can be improved but it's a quick fix.

Upvotes: -1

user740367
user740367

Reputation:

If you add a cap to either end of the slider you can mimic the effect without changing anything about the slider itself.

<div class="cap left"></div>
(slider container here)
<div class="cap right"></div>

Just add some very basic CSS...

.cap {
    width: (half the handle width)
}
.ui-slider, .cap.left, .cap.right {
    float: left;
}
.ui-slider {
    width: (desired total gutter width - handle width);
}
.ui-slider-handle {
    margin-left: -(half the handle width);
}

...then style your caps accordingly.

For range shading on a single slider, just style the left cap with the range effect instead of the normal gutter.

Upvotes: 3

attila
attila

Reputation: 11

I had the same problem and my solution is very simple i think. As Dr.Gibbs said draggable slider handle containment is set to 'parent' as default. So you can overcome it by using css...

consider handle img is 100px, and containment div is 250px wide. Than containment div should have width value 250 - 100 = 150px and margin-right:100px to have the maxZoom img to be shown on correct place. Than you have the exact limit for your handle image...

Upvotes: 1

Related Questions