我正在使用Ion.RangeSlider作为时间表。我的设置为hide_from_to: true
,因为我不希望看到这些标签。
然而,有一个例外,我希望它们实际上是可见的:当用户移动手柄时。
也就是说,滑块通常应如下所示:
但是当移动手柄时(仅此时)它应该如下所示:
我尝试使用onChange
,但我没有管理
$range.ionRangeSlider({
type: "double",
min: 4,
...,
onChange: function (){
hide_from_to = false,
},
...
关于如何做到这一点的任何想法?
答案 0 :(得分:2)
这可以很简单:
http://jsfiddle.net/IonDen/z8j5anno/
var $range = $(".js-range-slider");
var label;
function Label (container) {
this.$label = $(container).find(".irs-single");
this.active = false;
this.ACTIVE = "irs-single--active";
}
Label.prototype = {
start: function () {
if (!this.active) {
this.active = true;
this.$label.addClass(this.ACTIVE);
}
},
end: function () {
this.$label.removeClass(this.ACTIVE);
this.active = false;
}
};
$range.ionRangeSlider({
type: "single",
min: 0,
max: 1000,
from: 500,
grid: true,
onStart: function (data) {
label = new Label(data.slider);
},
onChange: function () {
label.start();
},
onFinish: function () {
label.end();
}
});