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