A timeline which would allow users to set a custom date range and filter survey results

[JaneSjs]

Suggestion: create an example demonstrating how to filter survey results by a custom date range specified using a UI widget.

[tsv2013]

I've created a live example - https://plnkr.co/edit/6Ud7XymmslozkKhW

Core code:

var timer = undefined;
var isUpdating = false;
var currMin = undefined;
var currMax = undefined;
function createValsUpdater(parent, vizPanel, data) {
  return function() {
    var sliders = parent.getElementsByTagName("input");
    var slide1 = parseFloat(sliders[0].value);
    var slide2 = parseFloat(sliders[1].value);
    if(slide1 > slide2)
      { var tmp = slide2; slide2 = slide1; slide1 = tmp; }
    currMin = slide1;
    currMax = slide2;
    // var currData = data.filter(function(item) {
    //   return item.HappendAt >= currMin && item.HappendAt <= currMax;
    // });
    var displayElement = parent.getElementsByClassName("rangeValues")[0];
    displayElement.innerHTML = new Date(slide1).toLocaleDateString() + " - " + new Date(slide2).toLocaleDateString();
    displayElement = parent.getElementsByClassName("rangeValuesCount")[0];
    displayElement.innerHTML = vizPanel.dataProvider.filteredData.length + " item(s)";
    if(isUpdating) {
      return;
    }
    if(timer !== undefined) {
      clearTimeout(timer);
      timer = undefined;
    }
    timer = setTimeout(function() {
      isUpdating = true;
      vizPanel.setFilter("HappendAt", { start: slide1, end: slide2 });
      timer = undefined;
      isUpdating = false;
    }, 100);
  }
}
function setupDateRange(vizPanel, data) {
  vizPanel.registerToolbarItem("dateRange", (toolbar) => {
    var itemRoot = undefined;
    if (data.length > 10 && !!data[0].HappendAt) {
      var min = data[0].HappendAt;
      var max = data[data.length-1].HappendAt;
      itemRoot = document.createElement("div");
      itemRoot.style.display = "inline-block";
      itemRoot.innerHTML = `<div class="range-slider">
        <span class="rangeValues"></span>
        <input value="` + currMin + `" min="` + min + `" max="` + max + `" type="range">
        <input value="` + currMax + `" min="` + min + `" max="` + max + `" type="range">
        <div class="rangeValuesCount"></div>
      </div>`;
      toolbar.appendChild(itemRoot);
      var slider1 = itemRoot.children[0].children[1];
      var slider2 = itemRoot.children[0].children[2];
      slider1.oninput = createValsUpdater(itemRoot.children[0], vizPanel, data);
      slider1.oninput();      
      slider2.oninput = createValsUpdater(itemRoot.children[0], vizPanel, data);
      slider2.oninput();      
    }
    return itemRoot;
  });
}

div.range-slider {
    position: relative;
    width: 200px;
    height: 35px;
    text-align: center;
}

div.range-slider input {
    pointer-events: none;
    position: absolute;
    overflow: hidden;
    left: 0;
    top: 30px;
    width: 200px;
    outline: none;
    height: 18px;
    margin: 0;
    padding: 0;
}

div.range-slider input::-webkit-slider-thumb {
    pointer-events: all;
    position: relative;
    z-index: 1;
    outline: 0;
}

div.range-slider input::-moz-range-thumb {
    pointer-events: all;
    position: relative;
    z-index: 10;
    -moz-appearance: none;
    width: 9px;
}

Thanks to SO community - https://stackoverflow.com/questions/4753946/html5-slider-with-two-inputs-possible

[tsv2013]

Probably we need to implement it our-of the-box