# Editor Slider
URL: https://pro.rv-grid.com/api/editor-slider/
Source: src/content/docs/api/editor-slider.md
### `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
```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 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`

```ts
editorSlider: CellTemplate<DataType<any, ColumnProp>> | undefined;
```
