ion.rangeSlider：仅在 dragging/moving 处理时显示标签

Question

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

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

也就是说，通常滑块应该是这样的：

但是在移动手柄时（并且只有在那时）它应该看起来像这样：

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

ion.rangeSlider：仅在 dragging/moving 处理时显示标签

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

javascript

jquery

ion-range-slider