1

I am attempting to make a small change to a working jQuery UI Slider so that the first value of the first slider displays 'All' to the user instead of '0'.

I have tried changing the slider based on the example in this post Jquery ui slider with string values? however I currently cannot get a working solution.

My code looks like this at present:

<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"
];

But am not entirely sure how/where to add the 'steps' functions into the slider script?

--

WORKING SOLUTION

$("#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);
        }
    }
});
Community
  • 1
  • 1
user1098178
  • 697
  • 3
  • 9
  • 25

1 Answers1

0

Here's what i have so far. It seems that you mixed up the divs. Without seeing your html it is a bit difficult to answer. Anyways, try the code below, replace your current one.

Hope this helps

$("#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
        }
   }
});
Tatarin
  • 1,238
  • 11
  • 28