jquery - JQuery UI 两个具有不同值的依赖滑块

Question

我有一个小问题JQuery UI Slider。我想制作两个滑块，如下所述

• 第一个滑块 - 是从 1 到 365 的天数
• 第二个滑块 - 从 5 到 30 的百分比。

例如，当第一个滑块的数量大于 90 天时，第二个滑块应该自动设置为 5%，或者如果超过 120 天，则设置为 10%，依此类推。

但是，如果我将第二个滑块移动到 10%，它会自动设置前 120 天。

Answer 1

JAVASCRIPT：

$(function(){

    $("#slider1").slider({
        range: "max",
        value: 90,
        min: 90,
        max: 365,
        step: 1,
        slide: function( event, ui ) 
        {
            $( "#amount" ).val( ui.value + " days" );
            if(ui.value < 120) {$("#amount2").val("0"  + " %"); $("#slider2").slider("option", "value", "0");}
            else if(ui.value >= 120 && ui.value < 150) {$("#amount2").val("5" + " %"); $("#slider2").slider("option", "value", "5");}
            else if(ui.value >= 150 && ui.value < 180) {$("#amount2").val("10" + " %"); $("#slider2").slider("option", "value", "10");}
            else if(ui.value >= 180 && ui.value < 210) {$("#amount2").val("15" + " %"); $("#slider2").slider("option", "value", "15");}
            else if(ui.value >= 210 && ui.value < 240) {$("#amount2").val("20" + " %"); $("#slider2").slider("option", "value", "20");}
            else if(ui.value >= 240 && ui.value < 270) {$("#amount2").val("25" + " %"); $("#slider2").slider("option", "value", "25");}
            else if(ui.value >= 270) {$("#amount2").val("30" + " %"); $("#slider2").slider("option", "value", "30");}
        }           
    });


    $("#slider2").slider({
        range: "max",
        value:0,
        min: 0,
        max: 30,
        step: 5,
        slide: function( event, ui2 ) 
        {
            $( "#amount2" ).val( ui2.value + " %" ); 
            if(ui2.value < 5) {$("#amount").val("90"  + " days"); $("#slider1").slider("option", "value", "90");}
            else if(ui2.value >= 5 && ui2.value < 10) {$("#amount").val("120" + " days"); $("#slider1").slider("option", "value", "120");}
            else if(ui2.value >= 10 && ui2.value < 15) {$("#amount").val("150" + " days"); $("#slider1").slider("option", "value", "150");}
            else if(ui2.value >= 15 && ui2.value < 20) {$("#amount").val("180" + " days"); $("#slider1").slider("option", "value", "180");}
            else if(ui2.value >= 20 && ui2.value < 25) {$("#amount").val("210" + " days"); $("#slider1").slider("option", "value", "210");}
            else if(ui2.value >= 25 && ui2.value < 30) {$("#amount").val("240" + " days"); $("#slider1").slider("option", "value", "240");}
            else if(ui2.value = 30) {   $("#amount").val("270" + " dni"); $("#slider1").slider("option", "value", "270");}
        }
    });

    $( "#amount" ).val( $( "#slider1" ).slider( "value" ) + " days" );
    $( "#amount2" ).val( $( "#slider2" ).slider( "value" ) + " %" );


});