Range Filter with Charts

Explore Range Filter with Charts to enable users to adjust data ranges and visualize changes dynamically through interactive charts.

Payment Transactions Price Range Preview

<!DOCTYPE html>
              <html lang="en" dir="" class="relative qm7fm mamhr">
                <head>
                  <meta charset="utf-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                  <title>Preline UI</title>
                  <link rel="shortcut icon" href="../../favicon.ico">
                  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                  <link rel="stylesheet" href="../../assets/css/obfuscated.min.css">
                </head>
                <body>
                <div class="z6k5q w-full cjuve ha88l">
              <div class="relative">
                <div id="hs-pro-pytfrrch-bg"></div>
                <div class="absolute utnk6 f8uov w-full mamhr vlqzh">
                  <div id="hs-pro-pytfrrch-fg"></div>
                </div>
              </div>

<div id="hs-pro-pytfrrch" class="gpg8y --prevent-on-load-init" data-hs-range-slider='{
                  "start": [0, 1000],
                  "range": {
                    "min": 0,
                    "max": 1000
                  },
                  "connect": true,
                  "formatter": "integer",
                  "cssClasses": {
                    "target": "relative i8gh6 a3ufl qqcm6 dark:bg-neutral-700",
                    "base": "w-full mamhr relative z-1",
                    "origin": "absolute utnk6 s0ojd w-full mamhr ktqlu a3ufl",
                    "handle": "absolute onm4j s0ojd z-2 vugj6 v869m dpq4d a11ya a3ufl dqyik cursor-pointer w0duv -translate-y-2/4 dark:bg-neutral-800 dark:border-neutral-700",
                    "connects": "relative k2gzw w-full mamhr a3ufl vlqzh",
                    "connect": "absolute utnk6 s0ojd z-1 w-full mamhr owc06 ktqlu",
                    "touchArea": "absolute -top-1 -bottom-1 -start-1 -end-1"
                  }
                }'>
              </div>

<div class="z6k5q flex encm3 yru4d">
                
                <div class="bx4k9">
                  <label for="hs-pro-pytfrrch-vtit-min" class="block mazvo hac7f oxyct dark:text-neutral-500">
                    Min
                  </label>
                  <input id="hs-pro-pytfrrch-vtit-min" type="hrp0m" class="v7jym tm5do block mmih0 bx4k9 a11ya it6u8 hac7f ryt8y hpfd8 hcddo hbjst azcyg wh3vh joig9 czx2f oekgx z50zr dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:hover:ring-neutral-600 dark:focus:ring-neutral-600" value="250">
                </div>

<div class="bx4k9">
                  <label for="hs-pro-pytfrrch-vtit-max" class="block mazvo hac7f oxyct dark:text-neutral-500">
                    Max
                  </label>
                  <input id="hs-pro-pytfrrch-vtit-max" type="hrp0m" class="v7jym tm5do block mmih0 bx4k9 a11ya it6u8 hac7f ryt8y hpfd8 hcddo hbjst azcyg wh3vh joig9 czx2f oekgx z50zr dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:hover:ring-neutral-600 dark:focus:ring-neutral-600" value="750">
                </div>
                
              </div>
              </div>
                  <script src="../../assets/vendor/preline/dist/index.js?v=1.0.0"></script>
                </body>
              </html>

series.forEach((single, i) => {
                    const val = props.series[i][dataPointIndex] || (typeof series[i].data[dataPointIndex] !== 'object' ? series[i].data[dataPointIndex] : props.series[i][dataPointIndex]);
                    const label = series[i].name;
                    const groupData = invertGroup ? {
                      left: `${hasTextLabel ? label : ''}${labelDivider}`,
                      right: `${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}`
                    } : {
                      left: `${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}`,
                      right: `${hasTextLabel ? label : ''}${labelDivider}`
                    }
                    const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${groupData.left}</span>`;

seriesGroups += `<div class="apexcharts-tooltip-series-group wxfee ${hasTextLabel ? 'dppa3' : ''} order-${i + 1} ${seriesClasses} ${seriesExtClasses}">
                    <span class="flex items-center">
                      <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${colors[i]}"></span>
                      <div class="apexcharts-tooltip-text">
                        <div class="apexcharts-tooltip-y-group h3urn">
                          <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${groupData.right}</span>
                        </div>
                      </div>
                    </span>
                    ${labelMarkup}
                  </div>`
                  });

const {
                    title,
                    mode,
                    valuePrefix = '$',
                    isValueDivided = true,
                    valuePostfix = '',
                    hasCategory = true,
                    hasTextLabel = false,
                    labelDivider = '',
                    wrapperClasses = 'vcuaq pqyx6 v869m dpq4d a11ya b7vor xroga h41lv dark:bg-neutral-800 dark:border-neutral-700',
                    wrapperExtClasses = '',
                    seriesClasses = 'dppa3 w-full qwx52',
                    seriesExtClasses = '',
                    titleClasses = 'flex encm3 u2ysm n940x p6wmt vktwm b7vor cl5h5 dark:!bg-neutral-800 dark:!border-neutral-700 dark:text-neutral-200',
                    titleExtClasses = '',
                    markerClasses = 'v0ajf rczsd kvtlb',
                    markerExtClasses = 'ekhil',
                    valueClasses = 'vduor oxyct omgws dark:text-neutral-400',
                    valueExtClasses = '',
                    labelClasses = 'oxyct dark:text-neutral-400 f0q0d',
                    labelExtClasses = ''
                  } = options;

series.forEach((_, i) => {
                    const val = props.series[i][dataPointIndex] || (typeof series[i].data[dataPointIndex] !== 'object' ? series[i].data[dataPointIndex] : props.series[i][dataPointIndex]);
                    const label = series[i].name;
                    const altValue = series[i].altValue || null;
                    const labelMarkup = `<span class="apexcharts-tooltip-text-y-label ${labelClasses} ${labelExtClasses}">${newCategory} ${label || ''}</span>`;
                    const valueMarkup = altValue || `<span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${valuePrefix}${val >= 1000 && isValueDivided ? `${val / 1000}k` : val}${valuePostfix}${labelDivider}</span>`;

seriesGroups += `<div class="apexcharts-tooltip-series-group ${seriesClasses} wxfee order-${i + 1} ${seriesExtClasses}">
                    <span class="flex items-center">
                      <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${colors[i]}"></span>
                      <div class="apexcharts-tooltip-text">
                        <div class="apexcharts-tooltip-y-group h3urn">
                          ${valueMarkup}
                        </div>
                      </div>
                    </span>
                    ${hasTextLabel ? labelMarkup : ''}
                  </div>`
                  });

return `<div class="${mode === 'dark' ? 'dark ' : ''}${wrapperClasses} ${wrapperExtClasses}">
                  <div class="apexcharts-tooltip-title ${titleClasses} ${titleExtClasses}">
                    <span>${title}</span>
                    <span class="flex items-center c0yql ${!isDifferenceIsNull ? (isGrowing ? 'kikgv' : 'tvxlh') : ''} f0q0d">
                      ${!isDifferenceIsNull ? icon : ''}
                      <span class="dxkem hac7f">
                        ${difference.toFixed(1)}%
                      </span>
                    </span>
                  </div>
                  ${seriesGroups}
                </div>`;
                }

seriesGroups += `<div class="apexcharts-tooltip-series-group wxfee ${seriesClasses} order-${i + 1} ${seriesExtClasses}">
                    <span class="flex items-center">
                      <span class="apexcharts-tooltip-marker ${markerClasses} ${markerExtClasses}" style="background: ${colors[i]}"></span>
                      <div class="apexcharts-tooltip-text qwx52 ">
                        <div class="apexcharts-tooltip-y-group h3urn">
                          <span class="apexcharts-tooltip-text-y-value ${valueClasses} ${valueExtClasses}">${newCategory} ${label || ''}${labelDivider}</span>
                        </div>
                      </div>
                    </span>
                    ${hasTextLabel ? labelMarkup : ''}
                  </div>`
                  });

function buildTooltipForDonut({ series, seriesIndex, w }, textColor) {
                  const { globals } = w;
                  const { colors } = globals;

return `<div class="apexcharts-tooltip-series-group" style="background-color: ${colors[seriesIndex]}; display: block;">
                  <div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
                    <div class="apexcharts-tooltip-y-group" style="color: ${textColor[seriesIndex]}">
                      <span class="apexcharts-tooltip-text-y-label">${globals.labels[seriesIndex]}: </span>
                      <span class="apexcharts-tooltip-text-y-value">${series[seriesIndex]}</span>
                    </div>
                  </div>
                </div>`;
                }

function buildChart(id, shared, light, dark) {
                  const $chart = document.querySelector(id);
                  let chart = null;

if (!$chart) return false;

const tabpanel = $chart.closest('[role="tabpanel"]');
                  let modeFromBodyClass = null;

Array.from(document.querySelector('html').classList).forEach((cl) => {
                    if (['dark', 'light', 'default'].includes(cl)) modeFromBodyClass = cl;
                  });

const optionsFn = (mode = modeFromBodyClass || localStorage.getItem('hs_theme')) => _.merge(shared(mode), mode === 'dark' ? dark : light);

if ($chart) {
                    chart = new ApexCharts($chart, optionsFn());
                    chart.render();

window.addEventListener('on-hs-appearance-change', (evt) => chart.updateOptions(optionsFn(evt.detail)));

if (tabpanel) tabpanel.addEventListener('on-hs-appearance-change', (evt) => chart.updateOptions(optionsFn(evt.detail)));
                  }

return chart;
                }
              </script>
  
              <script>
                window.addEventListener('load', () => {
                  (function () {
                    const updateForegroundChart = (foregroundParent, foreground, values) => {
                      const from = (100 * values[0]) / 1000;
                      const to = (100 * values[1]) / 1000;
                      const width = (100 - (from + (100 - to)));

foregroundParent.style.left = `${from}%`;
                      foregroundParent.style.width = `${width}%`;
                      foreground.style.width = `${foregroundParent.parentElement.clientWidth}px`;
                      foreground.style.marginLeft = `${-((foregroundParent.parentElement.clientWidth / 100) * from)}px`;
                    };

const range = document.querySelector('#hs-pro-pytfrrch');
                    const rangeInstance = new HSRangeSlider(range);
                    const min = document.querySelector('#hs-pro-pytfrrch-vtit-min');
                    const max = document.querySelector('#hs-pro-pytfrrch-vtit-max');
                    const background = document.querySelector('#hs-pro-pytfrrch-bg');
                    const foreground = document.querySelector('#hs-pro-pytfrrch-fg');
                    const foregroundParent = foreground.parentElement;

buildChart('#hs-pro-pytfrrch-bg', (mode) => ({
                      series: [{
                        name: 'Transactions',
                        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 18, 20, 35, 25, 25, 48, 40, 30, 30, 35, 45, 48, 48, 30, 40, 35, 25, 48, 48, 30, 40, 35, 25, 25, 8, 10, 15, 10]
                      }],
                      chart: {
                        height: 50,
                        type: 'bar',
                        sparkline: {
                          enabled: true
                        }
                      },
                      xaxis: {
                        type: 'category',
                        crosshairs: {
                          show: false
                        }
                      },
                      states: {
                        hover: {
                          filter: {
                            type: 'none'
                          }
                        },
                        active: {
                          allowMultipleDataPointsSelection: false,
                          filter: {
                            type: 'none'
                          }
                        }
                      },
                      tooltip: {
                        enabled: false
                      },
                    }), {
                      colors: ['#f3f4f6'],
                      plotOptions: {
                        bar: {
                          colors: {
                            ranges: [{
                              from: -45,
                              to: 0,
                              color: '#e5e7eb'
                            }]
                          }
                        }
                      },
                      grid: {
                        borderColor: '#e5e7eb'
                      }
                    }, {
                      colors: ['#ffffff'],
                      plotOptions: {
                        bar: {
                          colors: {
                            ranges: [{
                              from: -45,
                              to: 0,
                              color: '#ffffff'
                            }]
                          }
                        }
                      },
                      grid: {
                        borderColor: '#404040'
                      }
                    });
                    buildChart('#hs-pro-pytfrrch-fg', (mode) => ({
                      series: [{
                        name: 'Transactions',
                        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 18, 20, 35, 25, 25, 48, 40, 30, 30, 35, 45, 48, 48, 30, 40, 35, 25, 48, 48, 30, 40, 35, 25, 25, 8, 10, 15, 10]
                      }],
                      chart: {
                        height: 50,
                        type: 'bar',
                        sparkline: {
                          enabled: true
                        }
                      },
                      xaxis: {
                        type: 'category',
                        crosshairs: {
                          show: false
                        }
                      },
                      states: {
                        hover: {
                          filter: {
                            type: 'none'
                          }
                        },
                        active: {
                          allowMultipleDataPointsSelection: false,
                          filter: {
                            type: 'none'
                          }
                        }
                      },
                      tooltip: {
                        enabled: false
                      },
                    }), {
                      colors: ['#9333ea'],
                      plotOptions: {
                        bar: {
                          colors: {
                            ranges: [{
                              from: -45,
                              to: 0,
                              color: '#e5e7eb'
                            }]
                          }
                        }
                      },
                      grid: {
                        borderColor: '#e5e7eb'
                      }
                    }, {
                      colors: ['#a855f7'],
                      plotOptions: {
                        bar: {
                          colors: {
                            ranges: [{
                              from: -45,
                              to: 0,
                              color: '#ffffff'
                            }]
                          }
                        }
                      },
                      grid: {
                        borderColor: '#404040'
                      }
                    });

range.noUiSlider.on('update', (values) => {
                      min.value = rangeInstance.formattedValue[0];
                      max.value = rangeInstance.formattedValue[1];

updateForegroundChart(foregroundParent, foreground, values);
                    });

min.addEventListener('input', _.debounce((evt) => rangeInstance.el.noUiSlider.set([evt.target.value, max.value]), 200));
                    max.addEventListener('input', _.debounce((evt) => rangeInstance.el.noUiSlider.set([min.value, evt.target.value]), 200));

window.addEventListener("bsr7l", () => updateForegroundChart(foregroundParent, foreground, range.noUiSlider.get()));

// Please add it for the popup to work correctly.
                    const popup = HSOverlay.getInstance('#hs-pro-pytfm', true);

if (popup) popup.element.on('open', () => updateForegroundChart(foregroundParent, foreground, range.noUiSlider.get()));
                  })();
                });
              </script>