问题标签 [nouislider]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
873 浏览

javascript - 在 jquery 中使用 val() 返回数组的特定索引

我可能缺乏用 Javascript 检索数据的基本知识。所以我正在使用一个名为 noUiSlider 的 jquery 插件读取范围滑块的值。这里有基本代码:

html:

jQuery:

$("#slider").val()返回 ,在本array[value, value]例中为 20.00, 80.00。但是,分别获得其价值的最简单方法是什么?

例如,我试过$("#slider").val(0)$("#slider").val[0]$("#slider").lower()$("#slider").get(0)它们都不起作用。

这个插件的文档是http://refreshless.com/nouislider/slider-read-write/

谢谢!

0 投票
1 回答
177 浏览

nouislider - 从 nouisliders 计算总量

我希望两个 noUiSlider 的数量在我滑动时自动更新并显示在 Sum 中。

第一个滑块的值与第二个滑块的值相乘,然后再乘以 110。结果将显示在跨度总和中。

我的脚本如下:

0 投票
2 回答
2976 浏览

nouislider - 如何将滑块设置为在第一个手柄之前、手柄之间和第二个手柄之后具有不同的颜色?

我想设置一个滑块以允许人们设置事物之间的比率,我已将其设置为读取相关值但我不确定如何在每个部分中将颜色设置为不同以使其在视觉上更明显滑块的用途。

那么我该怎么做呢?

0 投票
1 回答
279 浏览

javascript - 用 span 绑定 NoUiSlider

我使用 NoUiSliders,我想将它与 span 对象绑定。在文档中,他们有这种方式:

但是,我想要做的是不显示该值,而是在字典上使用它,并将滑块的值作为键并从那里获取文本。例如:

我不知道您是否可以使用 noUiSliders 中的 wNumb 来执行此操作,我自己尝试过这种方式:

当滑块更改时,它就像现在一样工作,但是当页面加载预定义的值时,跨度不会从滑块中获取值。

有没有办法添加另一个事件,比如initializeor load?或者有没有其他方法可以做到这一点?

0 投票
1 回答
1128 浏览

javascript - 从外部 javascript 滑块初始化滑块

我使用 noUIslider 并尝试从外部 javascript 文件初始化它。

如果我将 JS 代码放在 HTML 文件的末尾,它就可以工作。如果我把它放在一个外部的 JS 文件中,它就不起作用。因为,我在页面中有很多滑块,所以我想保持清晰,并将大部分 JS 代码放在外部文件中。

编辑:这是我的脚本在 html 代码末尾的顺序:

custom.js 是带有滑块的。

0 投票
0 回答
177 浏览

nouislider - noUisSlider 的播放/暂停按钮

是否有任何简单的 noUiSlider 的工作示例,包括播放/暂停按钮,或者我如何实现这一点的策略?

我有一个简单的 noUiSlider 连接到一堆图像。滑块的编号连接到图像堆栈的索引以使图像可见。

如果我前后滑动滑块,图像会发生变化,但现在我想添加一个播放/暂停按钮。

0 投票
0 回答
900 浏览

javascript - 未捕获的类型错误:无法读取未定义 noUiSlider 的属性“0”

这是我的示例数据

这是插件页面,我从 http://refreshless.com/nouislider/examples/#section-dates获得代码结构

在示例中,他们提供了一年作为开始/结束最小值/最大值。我提供了一个时间戳。可能是问题。没有把握。

这是发生错误的控制台的屏幕截图。它正在检查2015-03-08错误期间的日期,这是对应于 的星期日0。不确定是什么问题。

在此处输入图像描述

0 投票
2 回答
1524 浏览

javascript - noUiSlider 使用 libLink 自定义格式化时间

自定义格式加上 noUiSlider 中时间值的 libLink 对我来说不起作用。

我想使用滑块以 24 小时格式输出时间(如 17:32)。

我还想输入一个有效时间并通过 libLink 更新滑块。

当我移动滑块时,输入中的时间会正确更新。但反过来就不行:在输入中输入一个新时间,然后取消聚焦会将输入重置为之前的值。

如果您取消注释函数 HHMMtoMinutes() 中的 console.log,您可以看到它触发了两次。这里发生了什么?

这里也是一个 JSFiddle:https ://jsfiddle.net/g42e6saf/2/

0 投票
2 回答
576 浏览

javascript - 使用 jQuery 创建具有不同类名或 ID 的多个元素

我正在尝试使用http://refreshless.com/nouislider/创建具有不同类名或 ID 的多个滑块,以便后端功能可以使用它们的单独值。我可以为每个滑块编写一个具有不同输入的新函数,但这会重复我自己。我认为这可能是 $(this) 的合适情况,但我不太确定如何使用它。如果它可以在 handlebars.js 中完成,那会让我很开心。

我知道菜鸟问题,但我似乎可以通过搜索找到合适的答案或教程,这可能是由于不知道合适的术语。

这是我的创建滑块功能:

这是呈现它的html:

谢谢

0 投票
0 回答
563 浏览

slider - noUiSlider - 将日期文本放在滑块句柄中

我有两个手柄 noUiSlider 日期范围滑块工作,基于其网站的示例页面。

我希望让日期文本出现在句柄中,而不是示例页面的源代码中的单独跨度。