IonRangeSlider momentJS step issue

Question

I am using ion Rangeslider with MomentJS. (http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html)

I have the slider up and working, now I want to add "Step" for every 15 minutes for 0-24hours i.e I should be able to step between 15 minutes interval between 0-24 hours.

I tried the following:

initializeRangePicker: function() {
    this.ui.timeRangeIonPicker.ionRangeSlider({
        min: +moment().startOf("day").format("X"),
        max: +moment().endOf("day").format("X"),
        from: +moment().hours(9).minutes(0).format("X"),
        to: +moment().hours(13).minutes(0).format("X"),
        step: +moment("15", "mm").format("mm"),            // DOESN't WORK :(
        type: 'double',
        grid: true,
        force_edges: true,
        grid_num: 24,
        prettify: function(num) {
            var m = moment(num, "X").locale("en");
            return m.format("HH:mm");
        }
    });
},

I'm not sure where I'm going wrong. I'm newbie for MomentJS, would really appreciate your help.

score 1 · Answer 1 · answered Jan 17 '17 at 22:51

If your min,max, from and to set in seconds then you have to set interval also in seconds.

initializeRangePicker: function() {
    this.ui.timeRangeIonPicker.ionRangeSlider({
        min: +moment().startOf("day").format("X"),
        max: +moment().endOf("day").format("X"),
        from: +moment().hours(9).minutes(0).format("X"),
        to: +moment().hours(13).minutes(0).format("X"),
        step: +moment("15", "mm").format("mm")*60,            
        type: 'double',
        grid: true,
        force_edges: true,
        grid_num: 24,
        prettify: function(num) {
            var m = moment(num, "X").locale("en");
            return m.format("HH:mm");
        }
    });
},

Working jsfiddle, there might be moment.js methods that will return duration in seconds.

IonRangeSlider momentJS step issue

1 Answers1