jQuery & jQuery UI Range Slider Plugin Demos

var renderLabel;
renderLabel = function(ui, customContent) {
  var content, endAt, range, startAt;
  if (customContent == null) {
    customContent = false;
  }
  range = ui.range;
  startAt = moment(range.startAt, "YYYY-MM-DD h:mm").add(range.startValue, "minutes");
  endAt = moment(range.startAt, "YYYY-MM-DD h:mm").add(range.endValue, "minutes");
  content = "" + (startAt.format("YYYY-MM-DD h:mm")) + " -- " + (endAt.format("YYYY-MM-DD h:mm"));
  if (customContent) {
    content = $("<div style='left: -40px;position: absolute;'>" + (startAt.format("YYYY-MM-DD h:mm")) + "</div><div style='right: -40px;position: absolute;'>" + (endAt.format("YYYY-MM-DD h:mm")) + "</div>");
  }
  return content;
};

$('#slider-range-custom-label').rangeSlider({
  min: 0,
  max: 1440,
  ranges: myarr,
  rangeLabel: function(event, ui) {
    return ui.label.empty().append(renderLabel(ui, true));
  },
  rangeSlide: function(event, ui) {
    return $("#display-label-timer").empty().append(renderLabel(ui));
  }
});