JQuery UI slider - value slider 2 determined value slider 1

Question

我一直在尝试使用 JQuery UI 滑块来实现以下功能。

我有 2 个滑块，一个是数量，另一个是持续时间。当金额低于 200 时，您可以 select 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>');

希望有人能帮我正路！

Answer 1

据我了解，您的验证是在错误的 slide 事件中进行的。它应该在数量 slide 期间，因为那会产生影响。而不是在幻灯片上重做 slider，您可以在创建后更改 options。这样的事情应该让你更接近你的 objective:

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

http://jsfiddle.net/tmcyzcvc/1/

JQuery UI slider - value slider 2 determined value slider 1

JQuery UI slider - value slider 2 determined value slider 1

javascript

jquery

html

jquery-ui

jquery-ui-slider