jQuery UI Slider Первая строка значения

Я пытаюсь внести небольшое изменение в рабочий слайдер пользовательского интерфейса jQuery, чтобы первое значение первого слайдера отображало пользователю «Все» вместо «0».

Я попытался изменить ползунок на основе примера в этом сообщении Jquery ui slider со строковыми значениями? однако в настоящее время я не могу найти работающее решение.

В настоящее время мой код выглядит так:

<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);

});

I want to change the min value for the #peopleSlider to show 'All' instead of '0'. I added var steps:

    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);
        }
    }
});

jquery jquery-ui jquery-ui-slider
person user1098178    schedule 15.08.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вот что у меня есть до сих пор. Кажется, вы перепутали div. Не видя вашего html, немного сложно ответить. В любом случае, попробуйте код ниже, замените текущий.

Надеюсь это поможет

$("#peopleSlider").slider({
   min: 0,
   max: 10, 
   value: 0,
   animate: true,
   slide: function(event, ui) 
   {
        var slidervalue = $("#peopleSlider").slider("value");//div of actual slider
        if(slidervalue < 1)
        {
            $("#people").text("All");//div of text that is being displayed
        }else{
            $("#people").text(slidervalue);//div of text that is being displayed
        }
   }
});
person Tatarin    schedule 15.08.2013
comment
Большое спасибо за вашу помощь. Я немного изменил ваше решение, и теперь оно отлично работает. Спасибо. - person user1098178; 16.08.2013