# Filter Slider
URL: https://pro.rv-grid.com/guides/data-filter/filter-slider/
Source: src/content/docs/guides/data-filter/filter-slider.mdx
Description: An advanced filtering plugin for RevoGrid with custom filter types like slider and selection.
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

```typescript
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,
        showRangeInputs: true,
        formatValue: (value) => `$${value.toFixed(2)}`,
        formatInputValue: (value) => value.toFixed(2),
        parseInputValue: (value) => Number(value.replace(',', '.'))
    }
};
```

### Slider Configuration Options

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

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `showTooltips` | boolean | true | Shows tooltips when hovering over the slider handles |
| `showRangeDisplay` | boolean | true | Displays the current range values above the slider |
| `showRangeInputs` | boolean | false | Shows numeric inputs for editing the selected range |
| `formatValue` | function | `(value) => value.toFixed(2)` | Custom function to format the displayed values |
| `formatInputValue` | function | `(value) => String(value)` | Custom function to format values inside editable range inputs |
| `parseInputValue` | function | `(value) => Number(value.replace(',', '.'))` | Custom function to parse editable range input text |

### Styling

The slider component supports custom styling through CSS variables:

```css
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:

```typescript
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.
