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

Question

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

但是，有一个例外，我希望它们实际上是可见的：当用户移动手柄时。

也就是说，通常滑块应如下所示：

但是当移动手柄时（并且只有这样）它应该是这样的：

我试过了onChange，但我没有管理

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

这是一个 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();
    }
});