javascript - 使滑块值出现在 NoUISlider 中

Question

我是 NoUISlider 的新手，我已经设法让滑块正常工作。但是，滑块值不可见或似乎有效。

我也是 jQuery 新手，所以我不确定为什么滑块值代码不起作用。

我正在编辑的网站就在这里：Experian Map

这是我的代码：

<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]
	});
});
    </script>

<script>
  $(function(){
	$('#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{
  	color: #FFF;
 }

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

Answer 1

逻辑没问题，但是你有几个语法错误。打开浏览器控制台（按 F12）会有所帮助。

固定代码：

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

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