Range Slider - Run function during slide not working?

Question

I am using noUISlider on a page to allow a person to choose a value. The noUISlider words, however, when a person is sliding I would like it to run a function that basically checks the number and if the number is below a certain value it will display text in a div.

The problem is that the value is recorded in the hidden input but the function to display the text never works.

Here is my code for the function:

var heightSlide = $('.height-noUI');
var onSlide = function(){
    var slideHeight = "$('input[name=CAT_Custom_8]').val();"
    if(slideHeight <= 20){
        $('.height-noUI-text').text('Short');
    }else if(slideHeight <= 40){
        $('.height-noUI-text').text('Short to Medium');
    }else if(slideHeight <= 60){
        $('.height-noUI-text').text('Medium');
    }else if(slideHeight <= 80){
        $('.height-noUI-text').text('Medium to Tall');
    }else if(slideHeight <= 100){
        $('.height-noUI-text').text('Tall');
    }
};
heightSlide.on('slide', onSlide);

Here is a jsFiddle of the code with a working slider.

How do I update my code to work so the text is displayed in the div when the slider slides?

Answer 1

I solved your problem. Checkout the code for understand.

Here is a jsfiddle

$(function() {

    $(".height-noUI").noUiSlider({
       range: [0, 100],
       start: 0,
        range: {
        'min': [0],
        'max': [100]
        },
       step: 20,
       connect: "lower",
       serialization: {
          lower: [
              $.Link({
                  target: $("input[name=CAT_Custom_8]")
              })
          ],
          format: {
            decimals: 0
          }
       }
    });

    var heightSlide = $('.height-noUI');
    var onSlide = function(){
        var slideHeight = $('.noUi-origin').position().left / $('.noUi-origin').parent().width() * 100; //Here is the trick.
        if(slideHeight <= 20){
            $('.height-noUI-text').text('Short');
        }else if(slideHeight <= 40){
            $('.height-noUI-text').text('Short to Medium');
        }else if(slideHeight <= 60){
            $('.height-noUI-text').text('Medium');
        }else if(slideHeight <= 80){
            $('.height-noUI-text').text('Medium to Tall');
        }else if(slideHeight <= 100){
            $('.height-noUI-text').text('Tall');
        }
    };
    heightSlide.on('slide', onSlide);

});