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

Question

I am using Ion.RangeSlider for a timeline. I have the setting hide_from_to: true as I don't want those labels to be seen.

However, there is one exception, where I would like that they are actually visible: when the user moves the handles.

That is, usually the slider should look like this:

But when moving the handle (and only then) it should look like this:

I tried with onChange, but I did not manage

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

Here a jsfiddle.

Any ideas on how to do that?

Answer 1

This could be done very simple:

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