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" ) + " %" );


});

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

1 个答案: