NoUISlider Not Working

NoUISlider Not Working

本文关键字：Working Not NoUISlider      更新时间：2023-09-26

所以我花了最后几个小时试图让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/

确保首先引用jquery(在nouislider之前)，并将javascript放在滑块div..

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

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

新手错误

相关文章：