Call a function on jQuery UI min value with a change event

Question

I want to be able to capture the min value and then have an if statement inside of the change event so when that min value is set to a certain value I want it to apply some CSS. If you need anymore information let me know.

$j("#ageRangeSlider").slider({
          range: "min",
          value: 11,
          min: 11,
          max: 66,
          step: 11,
          slide: function(event, ui) {
            $j("#yourAgeRange").val(ui.value);
            foo = $j("#yourAgeRange").val();
          },
          change: function(event, ui) {
            if(min == 11){
                $j('.ui-slider-handle').css('left', '5%');
            }
          }
        });

Answer 1

You can get the min and value into your function like this and use them in change function:

$j("#ageRangeSlider").slider({
      range: "min",
      value: 11,
      min: 11,
      max: 66,
      step: 11,
      slide: function(event, ui) {
        $j("#yourAgeRange").val(ui.value);
        foo = $j("#yourAgeRange").val();
      },
      change: function(event, ui) {

        var min = $("#ageRangeSlider").slider("option", "min");
        var val = $("#ageRangeSlider").slider("option", "value");

        if(min == val){
            $j('.ui-slider-handle').css('left', '5%');
        }
      }
    });