Skip to content
RevoGrid [Pro]

Filter Slider

Source code
src/components/filter-slider/FilterAdvanced.ts
import { defineCustomElements } from '@revolist/revogrid/loader';
import { AdvanceFilterPlugin, ColumnStretchPlugin } from '@revolist/revogrid-pro';
defineCustomElements();


import { currentTheme, useRandomData } from '../composables/useRandomData';


const { createRandomData } = useRandomData();
const { isDark } = currentTheme();
export function load(parentSelector: string) {
  const grid = document.createElement('revo-grid');


  grid.source = createRandomData(100);
  grid.columns = [
    {
      name: '🆔 ID',
      prop: 'id',
      filter: ['number', 'slider']
    },
    {
      name: '🍎 Fruit',
      prop: 'name',
    },
  ];
  // Define plugin
  grid.plugins = [AdvanceFilterPlugin, ColumnStretchPlugin];


  grid.additionalData = {
    stretch: 'all'
  };
  grid.filter = {};
  grid.theme = isDark() ? 'darkCompact' : 'compact';
  grid.hideAttribution = true;
  document.querySelector(parentSelector)?.appendChild(grid);
}

The Advanced Filtering Plugin for RevoGrid extends the grid’s capabilities by introducing powerful filtering options, making data management more efficient and flexible. This plugin includes new filter types, such as slider and selection, which provide intuitive ways for users to interact with and refine data views.

Key Features

  • Custom Filter Types: Enables the use of slider and selection filters, allowing users to quickly narrow down data based on specific criteria.
  • Flexible and Extensible: This plugin demonstrates the potential for creating custom plugins, encouraging developers to expand the grid’s functionality further.
  • Automatic Theme Support: The plugin adapts to light or dark themes based on user settings.

Usage Example

import { AdvanceFilterPlugin } from '@revolist/revogrid-pro';


// Basic setup
const grid = document.createElement('revo-grid');
grid.columns = [
    {
        name: 'Numeric Column',
        prop: 'numericValue',
        filter: ['number', 'slider']
    }
];
grid.plugins = [AdvanceFilterPlugin];
grid.filter = {};


// Advanced setup with slider configuration
grid.filter = {
    slider: {
        showTooltips: true,
        showRangeDisplay: true,
        formatValue: (value) => `$${value.toFixed(2)}`
    }
};

Slider Configuration Options

The slider filter can be customized using the following configuration options:

OptionTypeDefaultDescription
showTooltipsbooleantrueShows tooltips when hovering over the slider handles
showRangeDisplaybooleantrueDisplays the current range values above the slider
formatValuefunction(value) => value.toFixed(2)Custom function to format the displayed values

Styling

The slider component supports custom styling through CSS variables:

revo-grid {
  --slider-color: #c6c6c6;      /* Color of the inactive slider track */
  --range-color: #0068f0;       /* Color of the active slider range */
  --tooltip-bg: #333333;        /* Tooltip background color */
  --tooltip-color: #ffffff;     /* Tooltip text color */
}


/* Dark theme support */
revo-grid[theme^='dark'] {
  --slider-color: #c6c6c6;
  --range-color: #0068f0;
  --filter-input-bg: #333333;
  --filter-input-color: #ffffff;
  --tooltip-bg: #f2f2f6;
  --tooltip-color: #333333;
}

Advanced Features

  1. Range Selection:

    • The slider provides two handles for selecting a range of values
    • Values are automatically normalized between the minimum and maximum values in your dataset
    • Real-time filtering as users adjust the range

  2. Tooltips:

    • Interactive tooltips show the exact value when hovering over slider handles
    • Tooltips can be customized using the formatValue function
    • Position updates dynamically as the handles move

  3. Range Display:

    • Optional display of current range values above the slider
    • Formatted values using the same formatValue function
    • Clear visual feedback of the selected range

  4. Theme Integration:

    • Automatically adapts to light and dark themes
    • Customizable colors through CSS variables
    • Consistent look and feel with the rest of your grid

Integration with Other Filters

The slider filter can be combined with other filter types for more complex filtering scenarios:

grid.columns = [
    {
        name: 'Price',
        prop: 'price',
        filter: ['number', 'slider', 'selection'] // Combine with selection filter
    }
];

Best Practices

  1. Performance:

    • The slider filter is optimized for large datasets
    • Range calculations are performed efficiently
    • Real-time updates are throttled for smooth performance

  2. User Experience:

    • Use showTooltips for precise value selection
    • Implement formatValue for meaningful value display
    • Enable showRangeDisplay for clear range visualization

  3. Accessibility:

    • Slider handles are keyboard-navigable
    • ARIA attributes are automatically applied
    • High contrast visual feedback for active states

Customization and Extensibility

This plugin highlights the extensibility of RevoGrid’s plugin system, showcasing how developers can build and integrate advanced features tailored to specific needs. The flexibility of RevoGrid plugins enables comprehensive data manipulation and display control, making it an ideal choice for complex data-driven applications. For a deeper dive into plugin development, refer to the RevoGrid Plugin Documentation.