Editor Slider

editorSlider

The editorSlider is a custom cell editor for RevoGrid that provides a slider input to edit numeric values within a specified range directly within the grid cells.

Features:

• Renders a slider input element for cells, allowing users to select numeric values by dragging a slider handle.
• Supports customizable minimum and maximum values through column properties.
• Supports visual thresholds with custom CSS classes for different value ranges.
• Automatically dispatches a celledit event upon change, updating the grid’s data model with the new value.
• Ensures seamless integration with RevoGrid by providing row and column details in the event payload.
• Shows current value and visual fill indicator for better UX.
• Supports theming through CSS variables.
• Optional value display that can be hidden through column properties.

Usage:

• Import editorSlider and assign it to the cellTemplate property of a column in the RevoGrid.
• Specify min and max values in the column properties to define the slider range.
• Use hideValue property to hide the numeric value display.
• Add thresholds property to define custom CSS classes for different value ranges.

Example

import { editorSlider } from '@revolist/revogrid-pro'

const grid = document.createElement('revo-grid');
grid.columns = [
  {
    prop: 'rating',
    name: 'Rating',
    cellTemplate: editorSlider,
    min: 0,
    max: 100,
    hideValue: false,
    thresholds: [
      { value: 70, className: 'high' },
      { value: 30, className: 'medium' },
      { value: 0, className: 'low' }
    ]
  },
];

Event Handling:

• The editorSlider dispatches a celledit event whenever the slider value changes.
• The event detail contains:
  • rgCol: The column index of the edited cell.
  • rgRow: The row index of the edited cell.
  • type: The type of the cell.
  • prop: The property of the cell being edited.
  • val: The new numeric value after the slider change.
  • preventFocus: A flag to control grid focus behavior (default: true).

Theming: The slider can be themed using CSS variables:

• --slider-thumb-size: Size of the slider handle (default: 12px)
• --slider-track-height: Height of the slider track (default: 4px)
• --slider-value-size: Font size of the value display (default: 12px)
• --slider-spacing: Spacing between elements (default: 8px)
• --slider-thumb-bg: Background color of the slider handle
• --slider-thumb-border: Border color of the slider handle
• --slider-track-bg: Background color of the unfilled track
• --slider-fill-start: Start color of the fill gradient
• --slider-fill-end: End color of the fill gradient
• --slider-value-color: Color of the value text

These variables inherit from RevoGrid theme variables when available:

• --revo-primary
• --revo-primary-light
• --revo-background
• --revo-border-color
• --revo-text-color-secondary

editorSlider: CellTemplate | undefined;