- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我一直在使用集成了 noUiSlider 的应用程序。我已经集成了它,并且可以很好地使用 15 分钟 的步骤来实现基于时间的 slider ,范围为 24 小时,如下所示。
$(".time_range_slider").noUiSlider({
start : [8, 18],
behaviour : 'drag',
connect : true,
step : .25,
range : {'min': 0, 'max': 24}
});
$(".time_range_slider").noUiSlider_pips({
mode : 'steps',
filter : filter_hour,
stepped : true
});
function filter_hour(value, type) {
return ((value * 100) % 100 == 0) ? 1 : 0;
}
但现在我想迈出10 分钟的步数。我尝试了很多方面,例如步骤:.16,但未能达到预期结果。
请提出相同的解决方案
最佳答案
我的答案不是使用jquery情况,我不知道为什么没有从jquery内部代码片段中检测到noUiSlider,希望你能处理这个问题。
如何实现:
使用分钟范围进行选择:
范围:{'最小值':0,'最大值':1440}
格式化管道标签和选择器工具提示,使用 wNumb.js 显示格式 hh:mm
片段:
var range = document.getElementById('time_range_slider');
range.style.height = '800px';
range.style.margin = '0 auto 30px';
var aproximateHour = function (mins)
{
//http://greweb.me/2013/01/be-careful-with-js-numbers/
var minutes = Math.round(mins % 60);
if (minutes == 60 || minutes == 0)
{
return mins / 60;
}
return Math.trunc (mins / 60) + minutes / 100;
}
noUiSlider.create(range, {
start : [240, 1080],
connect: true,
direction: 'rtl',
orientation: 'vertical',
behaviour: 'tap-drag',
step: 10,
tooltips: true,
range : {'min': 0, 'max': 1440},
format: wNumb({
decimals: 2,
mark: ":",
encoder: function(a){
return aproximateHour(a);
}
}),
pips: {
mode : 'steps',
format: wNumb({
mark: ":",
decimals: 2,
encoder: function(a ){
return aproximateHour(a);
}
}),
filter : filter_hour,
stepped : true,
density:1
}
});
function filter_hour(value, type) {
return (value % 60 == 0) ? 1 : 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.0.4/wNumb.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/9.1.0/nouislider.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/9.1.0/nouislider.js"></script>
<div id="time_range_slider"></div>
关于jquery - 如何以10分钟为步长设置noUiSlider?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41141490/
文档说要使用 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 的一个实际
我是一名优秀的程序员,十分优秀!