个人中心
gpt4 book ai didi

javascript - NoUISlider 不工作

转载 作者：行者123 更新时间：2023-12-03 10:02:09 26 4
gpt4 key购买 nike

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

我认为这足以让 slider 工作吗？

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

<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放在 slider div之后..

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

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

菜鸟错误

关于javascript - NoUISlider 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30540049/

26 4 0
文章推荐： javascript - 是否可以将相同的上下文应用于许多函数？
文章推荐： javascript - 如何在复制表单后显示空值
文章推荐： javascript - 当链接在新选项卡中打开时如何保留在当前窗口选项卡上
文章推荐： javascript - 单击时在同一函数中包含可选类
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com