Show/hide div based on value of jquery UI slider

Question

Hello, I am using the jQuery UI slider and trying to show a div when the slider hits a certain value and hide it otherwise. The div is showing/hiding but at unexpected moments. Can anyone spot where I'm going wrong with my syntax? Here's the script:

  $(function() {

 //vars
 var conveyor = $(".content-conveyor", $("#sliderContent")),
 item = $(".item", $("#sliderContent"));

 //set length of conveyor
 conveyor.css("width", item.length * parseInt(item.css("width")));

    //config
    var sliderOpts = {
   max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")),orientation: "vertical",range: "min",step: 304,
      slide: function(e, ui) { 
        conveyor.css("left", "-" + ui.value + "px");
  $("#amount").val('$' + ui.value);

  // here's where I'm trying to show and hide a div based on the value of the slider
  if ($("#slider").slider("value") == 304) {
     $("#test").show();
  } else  {
   $("#test").hide();    
  }
      }
    };

    //create slider
    $("#slider").slider(sliderOpts);
    $("#amount").val('$' + $("#slider").slider("value"));

  });

Answer 1

Hi, I did this for a project recently, but mine was showing a span tag as a warning note to users, the following is the code I used and its works fine:

            $("#slider").slider({
                animate: true,
                min: 0,
                max: 10000,
                range: true,
                slide: function(event, ui) {
                    $("#amount").val(ui.values[1]);
                    if (ui.values[1] > '2000') { //2000 is the amount where you want the event to trigger
                        $('.slider-warning').css('display', 'block');
                    } else {
                        $('.slider-warning').css('display', 'none');
                    }
                }
            });

so you should be able to just use this, but change the necesary attributes i.e the value and the selectors etc.

Edit - updated answer follows

got it, the ui.values was wrong, find below the corrected code

var sliderOpts = {
       max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")),
       orientation: "vertical",
       range: "min",
       step: 304,
       slide: function(event, ui) {
           conveyor.css("left", "-" + ui.value + "px");
           $("#amount").val('$' + ui.value);
           if (ui.value > '200') { //200 is the amount where you want the event to trigger
               $('#test').css('display', 'block');
           } else {
               $('#test').css('display', 'none');
           }
          }
        };

this is taken straight from ur code, also notice:

if (ui.value > '200')

you'll need to change this to how ever you want the event to be triggered.

Hope this helps :)

Answer 2

I need to do a slider that at certain intervals (every 100px) an event is triggered..

what would be best way to do this?