Question

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

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 🙂