title: Show/hide div based on value of jquery UI slider
body: <p>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:</p>
  
  <pre><code>  $(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"));
  
    });
  </code></pre>