您可以在此处查看代码:http://jsfiddle.net/z3xV3/50/
我的HTML:
<div id="slider"></div>
<input id="sliderValue" />
<div id="boksTimer"></div>
我的JQUERY:
$(document).ready(function() {
$("#slider").slider({value:'',min: 0,max: 150,step: 0.5, range: 'min',
slide: function( event, ui ) {
$( "#amount" ).html( ui.value + ' timer');
$('#sliderValue').val(ui.value);
}
});
var thumb = $($('#slider').children('.ui-slider-handle'));
setLabelPosition();
$('#slider').bind('slide', function () {
$('#boksTimer').html(((($('#slider').slider('value')) / 31) * 60).toFixed(0) + 'min pr. dag');
setLabelPosition();
});
function setLabelPosition() {
var label = $('#boksTimer');
label.css('top', '20px');
label.css('left', thumb.offset().left - (label.width() - thumb.width())/ 2);
}
});
为什么boksTimer 1min pr的值。滑块为0的那一天?
答案 0 :(得分:2)
使用ui.value获取幻灯片事件功能的滑块值:
$('#slider').bind('slide', function (event, ui) {
$('#boksTimer').html((((ui.value) / 31) * 60).toFixed(0) + 'min pr. dag');
setLabelPosition();
});