1

最初のスライダーの最初の値が「0」ではなく「すべて」をユーザーに表示するように、動作中の jQuery UI Slider に小さな変更を加えようとしています。

この投稿の例に基づいてスライダーを変更しようとしましたJquery ui slider with string values? ただし、現在、実用的なソリューションを取得できません。

現在、私のコードは次のようになっています。

<script>
$(function() {
    $("#peopleSlider").slider({
       min: 0,
       max: 10, 
       value: 0,
       animate: true,
       slide: function(event, ui) {
       $( "#people" ).val( ui.value );
          var top_value_str = ui.value>=99 ? ui.value+'+' : ui.value;
          $("#peopleSlider .tab-note:first").text(top_value_str);
       }
    });

   $("#yearSlider").slider({
       min: 2013,
       max: 2015, 
       value: 2013,
       animate: true,
       slide: function(event, ui) {
       $( "#year" ).val( ui.value );
          var top_year_str = ui.value>=2099 ? ui.value+'+' : ui.value;
          $("#yearSlider .tab-note:first").text(top_year_str);
       }
    });

    $('.ui-slider-horizontal .ui-slider-handle').append('<span class="tab-note"></span>').mousedown(function(e) { e.preventDefault(); });
    $( "#people" ).val( $( "#peopleSlider" ).slider( "value" ) );
    $( "#year" ).val( $( "#yearSlider" ).slider( "value" ) );

    // Set default values - for sale
    var for_sale_init_bed_slide_val = $("#peopleSlider").slider("value");
    var for_sale_top_value_str = for_sale_init_bed_slide_val>=99 ? for_sale_init_bed_slide_val+'+' : for_sale_init_bed_slide_val;
    $("#peopleSlider .tab-note:first").text(for_sale_top_value_str);
    var for_sale_init_year_slide_val = $("#yearSlider").slider("value");
    var for_sale_top_year_str = for_sale_init_year_slide_val>=2099 ? for_sale_init_year_slide_val+'+' : for_sale_init_year_slide_val;
    $("#yearSlider .tab-note:first").text(for_sale_top_year_str);

});

#peopleSlider の最小値を変更して、「0」ではなく「すべて」を表示したいと考えています。var ステップを追加しました。

    var steps = [
    "All",
    "0",
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "10"
];

しかし、「ステップ」関数をスライダー スクリプトに追加する方法/場所が完全にわかりませんか?

--

ワーキングソリューション

$("#peopleSlider").slider({
    min: 0,
    max: 10, 
    value: 0,
    animate: true,
    slide: function(event, ui) {
        $( "#people" ).val( ui.value );
        var top_value_str = ui.value >= 99 ? ui.value +'+' : ui.value;
        if(top_value_str < 1) {
            //div of text that is being displayed
            $("#peopleSlider .tab-note").text("Any");
        } else {
            //div of text that is being displayed
            $("#peopleSlider .tab-note").text(top_value_str);
        }
    }
});
4

1 に答える 1