When you are holding the handles to
slide them the width of the range
blows out to 100% width, but snaps
back to the width it's supposed to be
once you release the
handle.
jQuery 1.4.2
UI 1.8.2
please help
jQuery
if ($("#topImageSlider").length){
var max = 120;
var initialValue = 40;
function refreshValue(){
//$('#sliderValue .current').text($("#topImageSlider").slider("value"));
$('#sliderValue .current').text($('.ui-slider-range').width());
}
$("#topImageSlider").slider({
orientation: 'horizontal',
range: "min",
max: max,
min: 1,
value: initialValue,
slide: refreshValue,
change: refreshValue
}).after('<div id="sliderValue"><span class="current">'+ initialValue +'</span> / <span class="max">'+ max +'</span></div>');
}
css
#topImageSlider,
#sliderValue {
margin: 0 auto;
width: 572px;
text-align: center;
}
#topImageSlider {
margin-top: 20px;
background: url(../img/bg/slider.png) no-repeat;
height: 5px;
}
#topImageSlider .ui-slider-range {
background: url(../img/bg/slider-progress.gif) repeat-x;
left: 2px;
height: 5px;
}
#topImageSlider .ui-slider-handle {
background: url(../img/btn/slider-handle.png) no-repeat;
width: 24px;
height: 24px;
top: -8px;
outline: 0;
cursor: pointer;
z-index: 999;
}
#sliderValue {
margin-top: 10px;
color: #bbb;
font-weight: bold;
}
#sliderValue .current {
color: #ff6e0d;
}
