javascript - ion.rangeSlider : show labels only when dragging/moving handles

Question

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

但是，有一个异常(exception)，我希望它们实际上是可见的:当用户移动 handle 时。

也就是说，通常 slider 应该是这样的:

但是当移动 handle 时(并且只有在那时)它应该看起来像这样:

我尝试使用 onChange，但我没有成功

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

Here a jsfiddle .

关于如何做到这一点有什么想法吗？

Answer 1

这可以很简单地完成:

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