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.
<!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>
Answer
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%.
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('http://i.stack.imgur.com/ObK9i.png');
background-repeat: no-repeat;
border: 0;
}
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.