个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
所以我花了最后几个小时试图让 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
文档说要使用 slider.noUiSlider.get(); 获取当前值。但是如果 slider 有两个 handle (因此有两个值)，我如何获得这两个单独的值？ 最佳答案 对于有两个 handl
文档说要使用 slider.noUiSlider.get(); 获取当前值。但是如果 slider 有两个 handle (因此有两个值)，我如何获得这两个单独的值？ 最佳答案 对于有两个 handl
我正在尝试使用 noUISlider 加载多个 slider ，但它不起作用。使用第一个 slider 时，第二个和第三个 slider 的值会发生变化。我该如何重构一个 slider 的代码，以便我
有没有办法显示非数字的最后点数值。例如，显示 0、100、200、300、更多的点数比例 感谢这个伟大的剧本! 最佳答案 以下解决方案有点麻烦，但它可以满足您的需求。 您可以使用 format选项并将
如何从链接的输出中删除小数位 我正在使用此代码 $("#slider_01").noUiSlider({ start: [2000, 24000], connect: true,
我正在使用 noUiSlider 并遵循如何创建自定义格式的教程: noUiSlider.create(sliderFormat, { start: [ 20 ], step: 10, range:
我正在尝试让 noUiSlider 工作，但没有完成第一步。下面是我正在尝试的最简单的文件，它只是给我一个空白屏幕: noUiSlider - Getting Star
所以我花了最后几个小时试图让 NoUISlider 在基本页面上工作，但我似乎无法让它工作。我到处寻找示例代码，但似乎找不到有效的代码。这是我所拥有的: -->
你能帮我解决 noUIslider 问题吗？ 我有简单的 slider : noUiSlider.create(slider, { start: 250, ra
我正在使用 nouislider ( https://refreshless.com/nouislider/ )，我想设置变量的范围值。但如果我使用变量值， slider 将不会创建。 jQuery.
这与我关于 nousliders 的第一个问题非常相关:How to update div in Meteor without helper? (这个标题选得不好，因为它不是为了避免帮助者) Jank
一切都在 100 到 1000 的范围内运行，但在 1000 之后该步骤停止运行，告诉我可以做什么？ 最佳答案 step 选项仅适用于范围的第一部分。对于后续部分，您可以为每个单独的范围值传递一个数
嘿，我已经检查了有关重置 noUiSlider 的主题，但我找不到处理我的问题的方法。有什么建议吗？ reset Update noUiSlider.create($('#product
您可以拿一个look at this Demo吗？让我知道为什么这个垂直 slider 甚至没有出现？原始演示位于This Page但这对我不起作用! $("#sample-showcase").no
是否可以在不修改值的情况下格式化工具提示？显然，这样做会改变迄今为止的值。 tooltips: [true], format: { from: Number, to: function
我试图在网站上添加几个 slider ，但我被卡住了。我直接从他们的网站下载了 nouislider 脚本，在此之前，我将 jQuery 1.8.0 添加到我的网站。这是我制作的: index.htm
我正在尝试设置 noUiSlider。 我的html是 我的javascript var slider = document.getElementById('slider'); noUiSl
我正在使用 noUiSlider 并尝试将 slider 值用作表单输入值(以工作表单发送)。我已经尝试了各种可以在堆栈溢出中找到的示例，但似乎没有任何效果。这是我的 slider 脚本: var
我有一个 slider ，点数从 21 到 30，数字之间有 10 个标记(像尺子)，步长为 0.5。有没有办法限制值，所以用户不能低于 21.5 但标记从 21 开始？我不会听 onchange，因
下面是我对 noUiSlider 的使用，我喜欢它，因为它缺少 jQuery。但是，每当我使用从负数开始的范围时， slider 的设置功能似乎就会被破坏。我假设这是 noUiSlider 的一个实际
我是一名优秀的程序员,十分优秀！