범위 슬라이더 - 슬라이드 중 작동하지 않는 기능이 작동하지 않습니까?

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

});