jquery - JQuery UI 値が異なる 2 つの依存スライダー

Question

に少し問題がありJQuery UI Sliderます。以下のように2つのスライダーを作りたい

• 最初のスライダー - 1 から 365 までの日数です
• 2 番目のスライダー - 5 から 30 までのパーセント。

たとえば、最初のスライダーの数が 90 日を超える場合、2 番目のスライダーは自動的に 5% に設定され、120 日を超える場合は 10% に設定されます。

ただし、たとえば 2 番目のスライダーを 10% に移動すると、最初の 120 日が自動的に設定されます。

Answer 1

ジャバスクリプト:

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


});