ion.rangeSlider:仅在拖动/移动手柄时显示标签

时间:2017-02-23 13:16:10

标签: javascript jquery ion-range-slider

我正在使用Ion.RangeSlider作为时间表。我的设置为hide_from_to: true,因为我不希望看到这些标签。

然而,有一个例外,我希望它们实际上是可见的:当用户移动手柄时。

也就是说,滑块通常应如下所示:

Handle without label

但是当移动手柄时(仅此时)它应该如下所示:

enter image description here

我尝试使用onChange,但我没有管理

$range.ionRangeSlider({
    type: "double",
    min: 4,
    ...,
    onChange: function (){
        hide_from_to = false,
    },
    ...

Here a jsfiddle

关于如何做到这一点的任何想法?

1 个答案:

答案 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();
    }
});