- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用 noUISlider 加载多个 slider ,但它不起作用。使用第一个 slider 时,第二个和第三个 slider 的值会发生变化。我该如何重构一个 slider 的代码,以便我可以轻松添加具有不同选项的其他 slider ?
这是一个 fiddle下面是我的代码。
// noUISlider
var actSlider = document.getElementById('act-slider');
noUiSlider.create(actSlider, {
start: [0, 50],
connect: false,
step: 1,
range: {
'min': 0,
'max': 50
},
format: {
to: function (value) {
return value + '';
},
from: function (value) {
return value.replace('', '');
}
}
});
// Connect bar
var connectBar = document.createElement('div'),
connectBase = actSlider.getElementsByClassName('noUi-base')[0],
connectHandles = actSlider.getElementsByClassName('noUi-origin');
// Give the bar a class for styling and add it to the slider.
connectBar.className += 'connect';
connectBase.appendChild(connectBar);
actSlider.noUiSlider.on('update', function (values, handle) {
// Pick left for the first handle, right for the second.
var side = handle ? 'right' : 'left',
// Get the handle position and trim the '%' sign.
offset = (connectHandles[handle].style.left).slice(0, -1);
// Right offset is 100% - left offset
if (handle === 1) {
offset = 100 - offset;
}
connectBar.style[side] = offset + '%';
});
// Value tooltips
var tipHandles = actSlider.getElementsByClassName('noUi-handle'),
tooltips = [];
// Add divs to the slider handles.
for (var i = 0; i < tipHandles.length; i++) {
tooltips[i] = document.createElement('div');
tooltips[i].className += 'value-tooltip';
tipHandles[i].appendChild(tooltips[i]);
}
// When the slider changes, write the value to the tooltips.
actSlider.noUiSlider.on('update', function (values, handle) {
tooltips[handle].innerHTML = values[handle];
});
最佳答案
您可以将您的 slider 创建包装在一个函数中,并为您想要创建 slider 的所有元素调用它。
noUiSlider 还支持 tooltips
(从 8.1.0 版本开始)和 connect
选项,因此如果您不想制作,则不必自己实现这些非常具体的变化。
至于每个 slider 的不同选项,有几种方法可以做到这一点。我为 step
选项添加了一个使用数据属性的示例。
以下代码使用 .slider
类初始化所有元素上的 slider 。
function data ( element, key ) {
return element.getAttribute('data-' + key);
}
function createSlider ( slider ) {
noUiSlider.create(slider, {
start: [0, 50],
connect: false,
step: Number(data(slider, 'step')) || 1,
range: {
'min': 0,
'max': 50
},
tooltips: true,
connect: true,
format: {
to: function (value) {
return value + '';
},
from: function (value) {
return value.replace('', '');
}
}
});
}
Array.prototype.forEach.call(document.querySelectorAll('.slider'), createSlider);
这是一个 jsFiddle演示此代码。
关于nouislider - 如何使用 noUISlider 加载多个带有值和工具提示的 slider ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33418808/
文档说要使用 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 的一个实际
我是一名优秀的程序员,十分优秀!