DateRangeSlider Resize

[cpear]

trafficstars

It appears that resize is only available for the RangeSlider and not the DateRangeSlider. IS the only option to completely destroy the timeline and rebuild to have new bounds take effect?

[ghusse]

Resize is available for all slider, all you have to do is to call it with the proper method:

 $("#slider").dateRangeSlider("resize")
 // instead of
 $("#slider").rangeSlider("resize")

[maddy25]

date range slider resize is not working for me. $scope.initSlider = function () { //$('#dateRulersExample').dateRangeSlider('resize'); $(function () { var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];

            // wait till load event fires so all resources are available
            that.$dateRulersExample = $("#dateRulersExample").dateRangeSlider({
                bounds: {min: new Date(2011, 0, 1), max: new Date(2012, 11, 31, 12, 59, 59)},
                defaultValues: {min: new Date(2012, 1, 10), max: new Date(2012, 4, 22)},
                scales: [{
                    first: function(value){ return value; },
                    end: function(value) {return value; },
                    next: function(value){
                        var next = new Date(value);
                        return new Date(next.setMonth(value.getMonth() + 1));
                    },
                    label: function(value){
                        return months[value.getMonth()];
                    },
                    format: function(tickContainer, tickStart, tickEnd){
                        tickContainer.addClass("myCustomClass");
                    },
                    step:{
                        months: 24
                    }
                }]
            });
        });
       $('#dateRulersExample').dateRangeSlider('resize');
    };
    $scope.initSlider();

[ghusse]

You have to call it only once the container becomes available

Le 15 août 2016 4:04 PM, "maddy25" [email protected] a écrit :

date range slider resize is not working for me. $scope.initSlider = function () { //$('#dateRulersExample').dateRangeSlider('resize'); $(function () { var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];

        // wait till load event fires so all resources are available
        that.$dateRulersExample = $("#dateRulersExample").dateRangeSlider({
            bounds: {min: new Date(2011, 0, 1), max: new Date(2012, 11, 31, 12, 59, 59)},
            defaultValues: {min: new Date(2012, 1, 10), max: new Date(2012, 4, 22)},
            scales: [{
                first: function(value){ return value; },
                end: function(value) {return value; },
                next: function(value){
                    var next = new Date(value);
                    return new Date(next.setMonth(value.getMonth() + 1));
                },
                label: function(value){
                    return months[value.getMonth()];
                },
                format: function(tickContainer, tickStart, tickEnd){
                    tickContainer.addClass("myCustomClass");
                },
                step:{
                    months: 24
                }
            }]
        });
    });
   $('#dateRulersExample').resize();
};
$scope.initSlider();

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ghusse/jQRangeSlider/issues/173#issuecomment-239809983, or mute the thread https://github.com/notifications/unsubscribe-auth/AAgLjcAtf1Mbop1QHgBdI8ih3WlcjSOhks5qgHH5gaJpZM4CNxF- .

[maddy25]

After I resize the window

[maddy25]

Looks like the class ui-rangeSlider-innerBar is not added until we resize the window. any idea why it might be happening?

[maddy25]

Figured it out.