文章/答案/技术大牛

发布

问NoUISlider不工作
EN

Stack Overflow用户

提问于 2015-05-30 06:31:28

回答 1查看 14.4K关注 0票数 0

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

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-05-30 08:29:47

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

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

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

菜鸟的错误

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30540049

复制

相似问题

问NoUISlider不工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问NoUISlider不工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问NoUISlider不工作
EN