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 thecellTemplate
property of a column in the RevoGrid. - Specify
min
andmax
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
typescript
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 acelledit
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
ts
editorSlider: CellTemplate | undefined;