슬라이더 값을 NoUISlider에 표시합니다.

Question

저는 NoUISlider를 처음 사용하기 때문에 슬라이더가 작동하도록 관리했습니다. 그러나 슬라이더 값이 표시되지 않거나 작동하는 것처럼 보입니다.

jQuery도 처음인데 슬라이더 값 코드가 작동하지 않는 이유가 확실하지 않습니다.

<script> 
 
$(function(){ 
 

 
    $('#slider-range').noUiSlider({ 
 

 
    range: { 
 
     'min': 0, 
 
     '10%': 10, 
 
     '20%': 20, 
 
     '30%': 30, 
 

 
     '50%': 50, 
 
     '60%': 60, 
 
     '70%': 70, 
 

 
     '90%': 90, 
 
     'max': 100 
 
    }, 
 
    snap: true, 
 
    start: [20] 
 
\t }); 
 
}); 
 
    </script> 
 

 
<script> 
 
    $(function(){ 
 
\t $('#slider-range').Link('lower').to($('#slider-range-value')); 
 
</script>

.example-val{ 
 
    color: #FFF; 
 
    display: block; 
 
    margin: 15px 0px; 
 
} 
 

 
.example-val:before { 
 
    content: "Value: "; 
 
    font: 700 12px Arial; 
 
} 
 

 
#slider-range-value{ 
 
    \t color: #FFF; 
 
}

 \t <div id="slider-range"></div><span id="slider-range-value" class="example-val"></span>

Answer 1

논리는 OK,하지만 당신은 몇 가지 구문 오류를 가지고 : Experian Map는

여기 내 코드입니다 : 내가 편집있어

웹 사이트는 바로 여기에있다. 브라우저 콘솔을 열면 (F12 키를 누름) 도움이됩니다.

고정 코드 :

$(function(){ 
    $('#slider-range').noUiSlider({ 
     range: { 
      ... 
     }, 
     snap: true, 
     start: [20] 
    }); 

    $('#slider-range').Link('lower').to($('#slider-range-value')); 
}); // << was missing