我正在使用Andre Ruffert的优秀rangelider.js
我有一个问题。 我设置了滑块,所以我的数字以6为增量增加,因为我像这样移动滑块:6,12,18,24,30,36,42,48,54,60
但是我希望滑块在达到36时增加12,从而跳过'42'和'54',这样当我移动滑块时,它可以拉到下面:6,12,18, 24,30,36,48,60
有没有办法可以用js或html做到这一点?
这是应该设置滑块值的代码,但由于某些原因,这不起作用:
$(function() {
var valMap = [6, 12, 18, 24, 36, 48, 60];
$("#term").rangeslider({
min: 6,
max: valMap.length - 1,
value: 24,
slide: function(event, ui) {
$("#amount").val(valMap[ui.value]);
}
});
我无法让JavaScript函数覆盖滑块的HTML代码,如下所示:
<input type="range" name="term" min="6" max="60" step="6" value="36" data-rangeslider>
答案 0 :(得分:1)
您可以检查onSlide
事件的值,并在滑块达到36时更改滑块的step属性:
var $r = $('input[type=range]');
onSlide: function(position, value) {
if (v>=36) {
$r.data().plugin_rangeslider.step = 12;
}
else {
$r.data().plugin_rangeslider.step = 6;
}
}
编辑:
值:min,max和value应该作为属性放在html元素上而不是初始化时。此外,没有slide
功能。
请看这个例子(codepen)
$("#term").rangeslider({
polyfill: false,
onInit: function() {
$ruler[0].innerHTML = getRulerRange(this.min, this.max, rulerStep);
this.$range.prepend($ruler);},
onSlide: function(p,v) {
if (!$("#term").data().plugin_rangeslider)
return;
if (v>=36) {
$("#term").data().plugin_rangeslider.step = 12;
}
else {
$("#term").data().plugin_rangeslider.step = 6;
}
},
onSlideEnd: function(p, v) {
$('#val').attr('value', v)
}
});
答案 1 :(得分:0)
使用新版本的rangelider.js,您可以根据接受的答案进行操作:
var $r = $('input[type=range]');
onSlide: function(position, value) {
if (v >= 36) {
this.step = 12;
}
else {
this.step = 6;
}
}