範圍滑塊 - 運行功能在幻燈片不工作？

Question

我在頁面上使用noUISlider以允許某人選擇一個值。然而，noUISlider的話，當一個人滑動時，我希望它運行一個基本上檢查數字的函數，如果數字低於某個值，它將顯示在div中的文本。

問題是，該值被記錄在隱藏的輸入中，但顯示文本的功能從未起作用。

這裏是我的功能代碼：

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

這裏是一個工作滑塊的代碼的jsFiddle。

如何更新我的代碼以使滑塊滑動時文本顯示在div中？

Answer 1

我解決了你的問題。檢查代碼以瞭解。

這裏是一個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); 

});