jquery-ui スライダーを横スクロール バーとして使用していますが、ハンドルがエンド ガターを超えてスライドするという問題があります (スライダーを一番右にスライドすると、ここで確認できます)。CSS で考えられるすべてのことを試して、ハンドルがガターを超えないようにしましたが、役に立ちませんでした。どんな提案でも大歓迎です。
明確にするために、問題を示す次の図を追加します (ハンドルが小さいため非常にわかりにくいですが、CSS で大きなハンドルを作成すると、ハンドルは ガターの幅のちょうど半分になります)。
これが問題のjsbinです。基本的に、ハンドルはガター内にとどめたいと思っています。
<!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>
