Question

所以我花了最后几个小时试图让NoUISlider在基本页面上工作，但我似乎无法让它工作。我全神贯注地查找示例代码，但似乎无法找到一个有效的代码。这就是我所拥有的：

<link href="./css/jquery.nouislider.min.css" rel="stylesheet">
<!--<script src="./js/jquery-2.1.4.min.js"></script>-->
<script src="./js/jquery.nouislider.all.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<div class="roundCornerBoxTop">
<div id="slider-link"></div>
    <span class="example-val" id="span"></span>
            <input id="input">
<script>
$("#slider-link").noUiSlider({
    start: [ 20 ],
    step: 10,
    range: {
        'min': [ 20 ],
        'max': [ 80 ]
    }
});

$("#slider-link").Link('lower').to($('#span'));
$("#slider-link").Link('lower').to($('#input'));
</script>
</div>

我认为这足以让滑块工作？

这是我正在测试的另一个页面：

<head>
    <link href="./css/jquery.nouislider.min.css" rel="stylesheet">
    <script src="./video-js/video.js"></script>
    <!--<script src="./js/jquery-2.1.4.min.js"></script>-->
    <script src="./js/jquery.nouislider.all.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

    <script>
      $("#rangeSlider").noUiSlider({
    start: [ 950, 5060 ],
    range: {
        'min': 50,
        'max': 5960
    },
    connect: true,
    // Set some default formatting options.
    // These options will be applied to any Link
    // that doesn't overwrite these values.
    format: wNumb({
        decimals: 1
    })
});

// Place the value in the #value element,
// using the text method.
$("#rangeSlider").Link('lower').to($("#value"), "text");

// Any selector is acceptable, so we'll
// select both inputs.
$("#rangeSlider").Link('lower').to($(".inputs"), null, wNumb({
    // Prefix the value with an Euro symbol
    prefix: '\u20AC',
    // Write the value without decimals
    decimals: 0,
    postfix: ',-'
}));

function setText( value, handleElement, slider ){
    $("#someElement").text( value );
}

// Link accepts functions too.
// The arguments are the slider value,
// the .noUi-handle element and the slider instance.
$("#rangeSlider").Link('upper').to(setText);

// When you pass a string to a link,
// it will create a hidden input.
// You'll see the value appear when you
// alert the form contents.
$("#rangeSlider").Link('upper').to("inputName");

$('button').click(function(){
    // Use jQuery to make get the values from the form.
    // We'll decode the generated URL to keep it readable.
    alert(decodeURIComponent( $("#moneyForm").serialize() ));

    // Don't submit the form.
    return false;
});
    </script>

</head>
<body>
<form id="moneyForm">
  <div id="rangeSlider"></div>
  <div id="value"></div>
  <input name="one" class="inputs">
<input name="two" class="inputs">
<div id="someElement"></div>
</form>
</body>

JSFiddle：http://jsfiddle.net/wogw6y3f/ http://jsfiddle.net/94zuj1hg/

Answer 1

确保首先引用jquery（在nouislider之前），然后将javascript放在滑块div之后..

<div id="slider-connect"></div>

这里是jsfiddle：http://jsfiddle.net/q3yurggt/3/

新秀错误

NoUISlider不工作

1 个答案: