JQuery Range Slider not aligning correctly

JavaScript
1

I am using jquery range slider and moment.js to select a time of the day using a slider.

It is all almost working perfectly however the slider handles do not line up correctly until you move one of the handles and then it will jump into place.
It also jumps into place when I open firebug which I take to mean it displays correctly after it is refreshed.

I’m not sure what is causing the problem and I’m new to jQuery and unsure if this is likely to be a jquery problem or possibly because I’m using moment.js or something like that.

Here is the code for the slider

$(".breakslider").dateRangeSlider({
    bounds: {
 		min: moment().startOf("day").add("hours", st).toDate(),
        max: moment().startOf("day").add("hours", ft).toDate()
    },
    defaultValues: {
        min: moment().startOf("day").add("hours", defaultbstart).add("m", defaultbstartmins).toDate(),
        max: moment().startOf("day").add("hours", defaultbfin).add("m", defaultbfinmins).toDate()
    },
    formatter: function (value) {
        return moment(value).format("HH:mm");
    },
	step: {
	   minutes:5	
	},
	arrows:false
    });

Any help is appreciated.

Thank you.