jqueryif-statementjquery-uijquery-eventsjquery-ui-slider

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


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%');
            }
          }
        });

Solution

  • 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%');
            }
          }
        });