Jquery UI滑块如何让框跟随处理器？
Jquery UI滑块如何让框跟随处理器？
提问于 2011-12-21 06:02:58
我正在尝试创建一个div，它应该遵循如下所示的处理程序：http://m1.dk/Priser/#tab:#calc,#abb
我的JSfiddle：http://jsfiddle.net/z3xV3/2/
我还想对应该出现在框中的UI值进行计算。
下面是我想要实现的一个示例：
HTML：
<div id="slider"></div>
<input id="sliderValue" />Jquery：
$(document).ready(function() {
// Pris slider
$("#slider").slider({value:'',min: 0,max: 150,step: 1, range: 'min',
slide: function( event, ui ) {
$( "#amount" ).html( ui.value + ' timer');
}
});
$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
});回答 4
Stack Overflow用户
发布于 2013-07-09 12:21:19
下面是一个具有两个手柄的滑块的工作示例
$('#slider').slider({
range: true,
min: 500,
max: 10000,
step: 100,
values: [1000, 2000],
slide: function( event, ui ) {
$('#min-price').html('$' + ui.values[0]);
$('#min_budget').val(ui.values[0]);
$('#max-price').html('$' + ui.values[1]);
$('#max_budget').val(ui.values[1]);
}
//move labels when handles are moved
moveValueLabels();
}
});
//move the value labels directly under the handles
function moveValueLabels() {
var pos_first_handle = $('.ui-slider-handle:first').position();
var pos_last_handle = $('.ui-slider-handle:last').position();
$('#min-price').css('left', (pos_first_handle.left - ($('#min-price').width()/2)));
$('#max-price').css('left', (pos_last_handle.left - ($('#max-price').width()/2)));
}
//set initial positioning of labels when page is loaded
moveValueLabels();CSS：
#slider {
overflow: visible;
#min-price {
position:absolute;
top:20px;
font-weight: bold;
padding:0;
}
#max-price {
position:absolute;
top:20px;
font-weight: bold;
padding:0;
}
}Stack Overflow用户
发布于 2013-09-02 23:42:47
HTML：
<div id="slider"></div>CSS：
#slider {
width: 200px;
}
#sliderValue {
position: absolute;
left: 0;
bottom: -30px;
width: 40px;
}jQuery：
$("#slider").slider({
value: '',
min: 0,
max: 100,
range: 'min',
create: function (event, ui) {
$('.ui-slider-handle').append('<input id="sliderValue" />');
},
slide: function (event, ui) {
$("#sliderValue").val(ui.value);
}
});Stack Overflow用户
发布于 2012-01-05 19:07:41
拿着你的jsfiddle。
HTML：
<div id="slider"></div>
<input id="sliderValue" />CSS：
#sliderValue{width:50px;}
Jquery：
$(document).ready(function() {
// Pris slider
$("#slider").slider({value:'',min: 0,max: 150,step: 1, range: 'min',
slide: function( event, ui ) {
$( "#sliderValue" ).val( ui.value + ' timer');
var offset = $(this).find('a').css("left");
$("#sliderValue").css("margin-left", offset);
}
});
$( "#sliderValue" ).val($( "#slider" ).slider( "value" ));
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8582564
复制相关文章
相似问题