Date Range Slider – QBeeQ

The Date Range Slider plugin enhances your dashboards with a clean, interactive date selection experience—embedded directly into the canvas. Designed with flexibility and aesthetic control in mind, it allows users to select and apply custom date ranges without relying on side panels or detached filters.

Installation and configuration

The Date Range Slider is a BloX widget, and is not installed using the plugin installation steps.

⚠️

The Date Range Slider requires the use of Sisense BloX. Users should have a basic understanding of JSON and basic HTML and CSS knowledge.

Operating system and version support:

Linux - Latest

Windows - Latest

Creating a new Date Range Slider

⚠️

Customizing the Date Range Slider requires the use of Sisense BloX. Users should have a basic understanding of JSON and basic HTML and CSS knowledge.

To create a new Date Range Slider select BloX from the widget dropdown list:

Copy the JSON into the BloX Editor

Create a custom action and action snippet

Customize slider via code

Add a widget-level script

Copy the JSON into the BloX Editor

Copy and paste the provided JSON into the BloX Editor in the Editor tab.

{
  "style": "",
  "script": "",
  "title": "",
  "showCarousel": true,
  "body": [
    {
      "type": "Container",
      "items": [
        {
          "spacing": "small",
          "type": "TextBlock",
          "text": "<div id='year-slider' class='blox-slider' items='{sliderData:A}' range='true' point-color='red' line-color='#808080'></div>"
        }
      ]
    }
  ],
  "actions": [
    {
      "type": "ApplyFilter",
      "title": "Apply Filter"
    }
  ]
}

Create a custom action and action snippet

Switch to the Actions tab in the BloX Editor

Click the three-dot menu and click Create Action

Name your action ApplyFilter

Copy and paste the JavaScript code into the editor

var _0x55b531 = _0x34c9;
(function (_0x58014a, _0x31db3f) {
  var _0x34b1a9 = _0x34c9,
    _0x414455 = _0x58014a();
  while (!![]) {
    try {
      var _0x40e66e =
        parseInt(_0x34b1a9(0x126)) / 0x1 +
        (parseInt(_0x34b1a9(0x124)) / 0x2) *
          (-parseInt(_0x34b1a9(0x119)) / 0x3) +
        -parseInt(_0x34b1a9(0x11e)) / 0x4 +
        parseInt(_0x34b1a9(0x132)) / 0x5 +
        (-parseInt(_0x34b1a9(0x12f)) / 0x6) *
          (-parseInt(_0x34b1a9(0x128)) / 0x7) +
        parseInt(_0x34b1a9(0x118)) / 0x8 +
        -parseInt(_0x34b1a9(0x115)) / 0x9;
      if (_0x40e66e === _0x31db3f) break;
      else _0x414455["push"](_0x414455["shift"]());
    } catch (_0x202b28) {
      _0x414455["push"](_0x414455["shift"]());
    }
  }
})(_0x28cf, 0xd0e7a);
var rangeHtml = $(
    _0x55b531(0x117) + payload[_0x55b531(0x127)][_0x55b531(0x137)] + "]"
  )["find"](_0x55b531(0x134)),
  fromRange = rangeHtml[0x0]["innerText"];
rangeHtml[0x1][_0x55b531(0x131)][_0x55b531(0x11b)] = _0x55b531(0x122);

function _0x28cf() {
  var _0x36bc59 = [
    "CxvLCNLszxn1Bhq",
    "mJq1nePhAezXuG",
    "DgL0Bgu",
    "ndyWotq3r1fIBK1H",
    "D2LKz2v0",
    "odu3ntm1q1rZuNbk",
    "zM9YrwfJAa",
    "DMfSDwvZ",
    "jcr3AwrNzxrZ",
    "vgv4Da",
    "AxrLBxm",
    "zMLUza",
    "nJzNBKvjAK0",
    "B3b0Aw9UCW",
    "C3r5Bgu",
    "nZeYmZmZmffvqMruCG",
    "zgLT",
    "lNvPlxn0yxrLlwrLzMf1Bhq",
    "zgf0yxr5Cgu",
    "CgfUzwXZ",
    "B2LK",
    "Aw5UzxjuzxH0",
    "D2LKz2v0CW",
    "y29SDw1U",
    "CMf3uxvLCNLszxn1Bhq",
    "Bwv0ywrHDge",
    "zgf0yq",
    "mJe3ody2nJLWq05Xsxy",
    "DxbKyxrL",
    "D2LKz2v0w3DPzgDLDgLKpq",
    "mtm1mtaZotjRsNPAt08",
    "ntK3CgHTuuHx",
    "Dgv4Da",
    "yM9YzgvYuMfKAxvZ",
    "zMLSDgvYCW",
    "AMfXBa",
    "ntyWntuXnNzVzvLYva",
    "yxbWBgLLzfrOCM91z2HdDxn0B21gAwX0zxi",
    "ywn0AxzLrgfZAgjVyxjK",
    "Bgv2zwW",
    "mtaWjq",
  ];
  _0x28cf = function () {
    return _0x36bc59;
  };
  return _0x28cf();
}
var toRange = rangeHtml[0x1][_0x55b531(0x138)],
  currentWidget = payload[_0x55b531(0x127)]["oid"],
  jaql =
    payload[_0x55b531(0x127)][_0x55b531(0x13c)][_0x55b531(0x136)][0x0][
      _0x55b531(0x12d)
    ][0x0][_0x55b531(0x11d)],
  modifiedFromRange,
  modifiedToRange;

function _0x34c9(_0x2a8293, _0x217982) {
  var _0x28cfdc = _0x28cf();
  return (
    (_0x34c9 = function (_0x34c918, _0x41e1de) {
      _0x34c918 = _0x34c918 - 0x114;
      var _0x2305d1 = _0x28cfdc[_0x34c918];
      if (_0x34c9["KRnGzj"] === undefined) {
        var _0x1f8469 = function (_0x564e7e) {
          var _0x4a7c02 =
            "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=";
          var _0x5e4a3c = "",
            _0x35e8ec = "";
          for (
            var _0x501358 = 0x0, _0x3c87d9, _0x28e2bd, _0x8a53b8 = 0x0;
            (_0x28e2bd = _0x564e7e["charAt"](_0x8a53b8++));
            ~_0x28e2bd &&
            ((_0x3c87d9 =
              _0x501358 % 0x4 ? _0x3c87d9 * 0x40 + _0x28e2bd : _0x28e2bd),
            _0x501358++ % 0x4)
              ? (_0x5e4a3c += String["fromCharCode"](
                  0xff & (_0x3c87d9 >> ((-0x2 * _0x501358) & 0x6))
                ))
              : 0x0
          ) {
            _0x28e2bd = _0x4a7c02["indexOf"](_0x28e2bd);
          }
          for (
            var _0x57615c = 0x0, _0x553b62 = _0x5e4a3c["length"];
            _0x57615c < _0x553b62;
            _0x57615c++
          ) {
            _0x35e8ec +=
              "%" +
              ("00" + _0x5e4a3c["charCodeAt"](_0x57615c)["toString"](0x10))[
                "slice"
              ](-0x2);
          }
          return decodeURIComponent(_0x35e8ec);
        };
        (_0x34c9["zKHTHH"] = _0x1f8469),
          (_0x2a8293 = arguments),
          (_0x34c9["KRnGzj"] = !![]);
      }
      var _0x48424d = _0x28cfdc[0x0],
        _0x27f8c6 = _0x34c918 + _0x48424d,
        _0x55dd7b = _0x2a8293[_0x27f8c6];
      return (
        !_0x55dd7b
          ? ((_0x2305d1 = _0x34c9["zKHTHH"](_0x2305d1)),
            (_0x2a8293[_0x27f8c6] = _0x2305d1))
          : (_0x2305d1 = _0x55dd7b),
        _0x2305d1
      );
    }),
    _0x34c9(_0x2a8293, _0x217982)
  );
}
payload[_0x55b531(0x127)][_0x55b531(0x123)][_0x55b531(0x129)]((_0x564e7e) => {
  var _0x1313cb = _0x55b531;
  _0x564e7e[0x0][_0x1313cb(0x12c)] == fromRange &&
    (modifiedFromRange = payload[_0x1313cb(0x127)][_0x1313cb(0x13b)][
      _0x1313cb(0x12a)
    ][_0x1313cb(0x12e)](
      (_0x4a7c02) => _0x4a7c02[0x0][_0x1313cb(0x11a)] === _0x564e7e[0x0]["Text"]
    )[0x0][_0x1313cb(0x114)]),
    _0x564e7e[0x0][_0x1313cb(0x12c)] == toRange &&
      (modifiedToRange = payload[_0x1313cb(0x127)][_0x1313cb(0x13b)][
        _0x1313cb(0x12a)
      ]["find"](
        (_0x5e4a3c) =>
          _0x5e4a3c[0x0][_0x1313cb(0x11a)] === _0x564e7e[0x0]["Text"]
      )[0x0][_0x1313cb(0x114)]);
}),
  prism["activeDashboard"][_0x55b531(0x11c)][_0x55b531(0x116)](
    {
      jaql: {
        dim: jaql[_0x55b531(0x133)],
        title: jaql[_0x55b531(0x125)],
        filter: {
          from: modifiedFromRange,
          to: modifiedToRange,
          custom: !![],
          isAdvanced: !![],
        },
        column: jaql[_0x55b531(0x13a)],
        datatype: jaql[_0x55b531(0x135)],
        level: jaql[_0x55b531(0x121)],
        merged: !![],
        table: jaql["table"],
      },
    },
    {
      save: !![],
      refresh: !![],
      unionIfSameDimensionAndSameType: ![],
      reason: _0x55b531(0x11f),
    }
  ),
  prism[_0x55b531(0x120)][_0x55b531(0x139)][_0x55b531(0x12b)][_0x55b531(0x129)](
    (_0x35e8ec) => {
      var _0x44436c = _0x55b531;
      _0x35e8ec[_0x44436c(0x137)] == currentWidget &&
        (_0x35e8ec[_0x44436c(0x130)]["selector"] = ![]);
    }
  );

Click Next

Copy and paste the JSON snippet in the editor

Click Create

{
  "type": "ApplyFilter",
  "title": "Apply Filter"
}

Customize slider via code

Because the Date Range Slider is built using BloX, users have the ability to customize and style it using simple HTML and CSS. Switch to the Configurations tab in the BloX Editor, and tailor as needed for your use case.

Add a widget-level script

Include the following widget-level script, which will ensure the selected values are retained.

widget.on("ready", function () {
  setTimeout(() => {
    let dashboardFilters = widget.dashboard.filters;
    var from = (to = "");
    if (dashboardFilters.length > 0) {
      dashboardFilters.$$items.forEach((item) => {
        if (item.isCascading && item.levels.length > 0) {
          item.levels.forEach((level) => {
            if (
              level.filter &&
              level.filter.from &&
              level.filter.to &&
              level.dim === widget.metadata.panels[0].items[0].jaql.dim
            ) {
              from = level.filter.from;
              to = level.filter.to;
            }
          });
        } else {
          if (
            item &&
            item.jaql &&
            item.jaql.filter &&
            item.jaql.filter.from &&
            item.jaql.filter.to &&
            item.jaql.dim === widget.metadata.panels[0].items[0].jaql.dim
          ) {
            from = item.jaql.filter.from;
            to = item.jaql.filter.to;
          }
        }
      });
    }
    var x = (y = 0);
    widget.queryResult.forEach((item, index) => {
      if (item[0].Text == from) x = index;
    });
    widget.queryResult.forEach((item, index) => {
      if (item[0].Text == to) y = index;
    });

    if (prism.$ngscope.appstate == "dashboard")
      if (x == y) {
        $("widget[widgetid=" + widget.oid + "]")
          .find("#year-slider")
          .slider("option", "values", [0, 1]);
      } else {
        $("widget[widgetid=" + widget.oid + "]")
          .find("#year-slider")
          .slider("option", "values", [x, y]);
      }
    if (prism.$ngscope.appstate == "widget")
      if (x == y) {
        $("#year-slider").slider("option", "values", [0, 1]);
      } else {
        $("#year-slider").slider("option", "values", [x, y]);
      }
  }, 100);
});

Using the Date Range Slider

Once set up on the dashboard, the Slider will appear on the dashboard.

Users can interact with the slider to set a start and end date. Clicking the Apply Filter button will trigger the ApplyFilter action, updating the dashboard with the selected range.