步长变化
step size change
本文关键字:变化 更新时间:2023-09-26
我正在使用Andre Ruffert 的出色rangeslider.js
我有一个问题。我设置了滑块,所以当我移动滑块时,我的数字以6为增量增加,如下所示:6,12,18,24,30,36,42,48,54,60
然而,我希望滑块在达到36时以12的增量增加,从而跳过"42"answers"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>
您可以检查onSlide
事件的值,并在滑块达到36:时更改滑块的步长属性
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
函数。看看这个例子(代码笔)
$("#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)
}
});
使用rangeslider.js的新版本,您可以根据公认的答案:
var $r = $('input[type=range]');
onSlide: function(position, value) {
if (v >= 36) {
this.step = 12;
}
else {
this.step = 6;
}
}
相关文章:
- 单击页面上的链接后高度发生变化
- React redux初始化功能,无论状态变化如何
- 角度ng变化或ng点击选择can'不起作用
- 每个选择器的Jquery css颜色都在变化,但字体大小却没有变化
- JS幻灯片与CSS背景颜色变化
- 重新加载页面时Javascript变量发生变化
- 如何获得Bootstrap Datepicker的年和月,因为它在变化
- 如何用jquery替换字符串中可能变化的字符
- 检测数据的变化
- 如何检测和打印变化变量LESS
- 当文本不断变化时,如何避免在按钮内移动文本
- 当数据库中的某些内容发生变化时调用HTTP方法Meteor.js
- jQuery将侦听器的大小调整为只触发宽度的变化
- 根据元素高度和宽度的百分比变化增加或减少字体大小
- 调用$.each()函数时上下文发生变化
- 创建一个不断变化的谷歌涂鸦风格的标题
- Javascript对象颜色动态变化
- 如果在编辑中下拉值发生变化,如何执行功能
- 在bootstrap3模式中以谷歌地图为中心发布..不断变化
- React没有't重新考虑道具的变化