[英]JQuery UI slider - value slider 2 determined value slider 1
我一直在尝试使用JQuery UI滑块执行以下操作。
我有2个滑块,一个是数量,另一个是持续时间。 当金额低于200时,您可以选择15天和30天。 如果数量大于200,则只有30天,并且滑块应禁用。
我已经做了很多尝试,您可以在jsfiddle上看到我的实验。 http://jsfiddle.net/prommetheus/jatcrsxv/
$('#howmuch_sld').slider({
range: "min",
value: 300,
min: 50,
step: 50,
max: 600,
slide: function(event, ui) {
$('#amt').html('€' + ui.value);
}
});
$('#amt').html('€' + $('#howmuch_sld').slider('value'));
$('#howlong_sld').slider({
range: "min",
value: 15,
min: 15,
step: 15,
max: 30,
slide: function(event, ui) {
if($('#howmuch_sld').slider('value') > '200'){
$('#howlong_sld').slider({
value: 30,
min: 15,
step: 15,
max: 45, // TO CENTER SLIDER HANDLER
disabled: true,
});
};
$('#day').html(ui.value + '<span class="small"> days</span>');
}
});
$('#day').html($('#howlong_sld').slider('value') + '<span class="small"> days</span>');
我希望有人能以正确的方式帮助我!
据我了解,您的验证发生在错误的slide
事件中。 应该在金额slide
期间进行,因为那会产生影响。 而且,除了在幻灯片上重做slider
,还可以在创建后更改options
。 这样的事情应该使您更接近目标:
$('#howlong_sld').slider({
range: "min",
value: 15,
min: 15,
step: 15,
max: 30,
slide: function(event, ui) {
$('#day').html($('#howlong_sld').slider('value') + '<span class="small"> days</span>');
},
//slide happens only when handle is actually moving, so it's always good
//to update on stop as well
stop: function(event, ui) {
$('#day').html($('#howlong_sld').slider('value') + '<span class="small"> days</span>');
},
});
$('#howmuch_sld').slider({
range: "min",
value: 300,
min: 50,
step: 50,
max: 600,
slide: function(event, ui) {
$('#amt').html('€' + ui.value);
//You check your condition while amount is sliding.
if($('#howmuch_sld').slider('value') > 200){
//this is how you set variable after creation
$('#howlong_sld').slider('option', 'value', 30);
//you can also call methods
$('#howlong_sld').slider('disable');
} else {
$('#howlong_sld').slider('enable');
}
$('#day').html($('#howlong_sld').slider('value') + '<span class="small"> days</span>');
}
});
$('#amt').html('€' + $('#howmuch_sld').slider('value'));
$('#day').html($('#howlong_sld').slider('value') + '<span class="small"> days</span>');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.