Javascript JQuery UI滑块-值滑块2确定值滑块1

我一直在尝试使用jQueryUISlider实现以下功能

我有两个滑块，一个是数量，另一个是持续时间。当金额低于200时，您可以选择15天和30天。如果金额高于200，则仅需30天，滑块应禁用

我已经尝试了很多，你可以看到我在JSFIDLE的实验。

---

我希望有人能在正确的道路上帮助我

据我所知，您的验证出现在错误的幻灯片事件中。应该是在数量下滑期间，因为这将产生影响。您可以在创建滑块后更改选项，而不是在幻灯片上重做滑块。这样的事情会让你更接近你的目标：

$('#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>'); 

---

经过一些调整，这就是结果。

$('#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>');