Slider Editor

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.

The control uses the shared slider’s thin track and outlined thumb. Its value appears in a themed badge and previews while dragging; releasing the thumb commits the edit. Existing min, max, step, thresholds, hideValue and formatValue column settings remain available.

Source code

1
import { defineCustomElements } from '@revolist/revogrid/loader';
2
import {
3
  editorSlider,
4
  avatarRenderer,
5
  RowOddPlugin,
6
} from '@revolist/revogrid-pro';
7
import { currentTheme } from '../composables/useRandomData';
8

9
defineCustomElements();
10

11
export function load(parentSelector: string) {
12
  const grid = document.createElement('revo-grid');
13
  grid.range = true;
14
  grid.className = 'rounded-lg overflow-hidden cell-border';
15
  grid.style.minHeight = '300px';
16

17
  grid.source = [
18
    {
19
      avatar: 'https://i.pravatar.cc/300?img=1',
20
      name: 'John Doe',
21
      rating: 85,
22
      progress: 45,
23
    },
24
    {
25
      avatar: 'https://i.pravatar.cc/300?img=2',
26
      name: 'Jane Smith',
27
      rating: 92,
28
      progress: 78,
29
    },
30
    {
31
      avatar: 'https://i.pravatar.cc/300?img=3',
32
      name: 'Bob Johnson',
33
      rating: 78,
34
      progress: 60,
35
    },
36
    {
37
      avatar: 'https://i.pravatar.cc/300?img=4',
38
      name: 'Alice Brown',
39
      rating: 95,
40
      progress: 89,
41
    },
42
    {
43
      avatar: 'https://i.pravatar.cc/300?img=5',
44
      name: 'Charlie Wilson',
45
      rating: 88,
46
      progress: 72,
47
    },
48
  ];
49

50
  grid.columns = [
51
    {
52
      prop: 'avatar',
53
      size: 60,
54
      cellTemplate: avatarRenderer,
55
      rectangular: true,
56
    },
57
    { prop: 'name', size: 150 },
58
    {
59
      name: 'Rating (0-100)',
60
      prop: 'rating',
61
      size: 200,
62
      cellTemplate: editorSlider,
63
      thresholds: [
64
        { value: 70, className: 'high' },
65
        { value: 30, className: 'medium' },
66
        { value: 0, className: 'low' },
67
      ],
68
      min: 0,
69
      max: 100,
70
      step: 1,
71
    },
72
    {
73
      name: 'Progress (%)',
74
      prop: 'progress',
75
      size: 200,
76
      cellTemplate: editorSlider,
77
      min: 0,
78
      max: 100,
79
      step: 5,
80
    },
81
  ];
82

83
  grid.plugins = [RowOddPlugin];
84

85
  const { isDark } = currentTheme();
86
  grid.theme = isDark() ? 'darkMaterial' : 'material';
87
  grid.hideAttribution = true;
88

89
  document.querySelector(parentSelector)?.appendChild(grid);
90
}

1
<template>
2
  <RevoGrid
3
    class="rounded-lg overflow-hidden cell-border"
4
    range
5
    :columns="columns"
6
    :source="source"
7
    :theme="isDark ? 'darkMaterial' : 'material'"
8
    :plugins="[RowOddPlugin]"
9
    hide-attribution
10
    style="min-height: 300px"
11
  />
12
</template>
13

14
<script setup lang="ts">
15
import RevoGrid, { type ColumnRegular } from '@revolist/vue3-datagrid';
16
import {
17
  editorSlider,
18
  avatarRenderer,
19
  RowOddPlugin,
20
} from '@revolist/revogrid-pro';
21
import { ref } from 'vue';
22
import { currentThemeVue } from '../composables/useRandomData';
23

24
const { isDark } = currentThemeVue();
25

26
const source = ref([
27
  {
28
    avatar: 'https://i.pravatar.cc/300?img=1',
29
    name: 'John Doe',
30
    rating: 85,
31
    progress: 45,
32
  },
33
  {
34
    avatar: 'https://i.pravatar.cc/300?img=2',
35
    name: 'Jane Smith',
36
    rating: 92,
37
    progress: 78,
38
  },
39
  {
40
    avatar: 'https://i.pravatar.cc/300?img=3',
41
    name: 'Bob Johnson',
42
    rating: 78,
43
    progress: 60,
44
  },
45
  {
46
    avatar: 'https://i.pravatar.cc/300?img=4',
47
    name: 'Alice Brown',
48
    rating: 95,
49
    progress: 89,
50
  },
51
  {
52
    avatar: 'https://i.pravatar.cc/300?img=5',
53
    name: 'Charlie Wilson',
54
    rating: 88,
55
    progress: 72,
56
  },
57
]);
58

59
const columns: ColumnRegular[] = [
60
  { prop: 'avatar', size: 60, cellTemplate: avatarRenderer, rectangular: true },
61
  { prop: 'name', size: 150 },
62
  {
63
    name: 'Rating (0-100)',
64
    prop: 'rating',
65
    size: 200,
66
    cellTemplate: editorSlider,
67
    thresholds: [
68
      { value: 70, className: 'high' },
69
      { value: 30, className: 'medium' },
70
      { value: 0, className: 'low' },
71
    ],
72
    min: 0,
73
    max: 100,
74
    step: 1,
75
  },
76
  {
77
    name: 'Progress (%)',
78
    prop: 'progress',
79
    size: 200,
80
    cellTemplate: editorSlider,
81
    min: 0,
82
    max: 100,
83
    step: 5,
84
  },
85
];
86
</script>

1
import { useMemo } from 'react';
2
import { RevoGrid, type ColumnRegular } from '@revolist/react-datagrid';
3
import {
4
  editorSlider,
5
  avatarRenderer,
6
  RowOddPlugin,
7
} from '@revolist/revogrid-pro';
8
import { currentTheme } from '../composables/useRandomData';
9

10
function EditorSlider() {
11
  const { isDark } = currentTheme();
12

13
  const source = useMemo(
14
    () => [
15
      {
16
        avatar: 'https://i.pravatar.cc/300?img=1',
17
        name: 'John Doe',
18
        rating: 85,
19
        progress: 45,
20
      },
21
      {
22
        avatar: 'https://i.pravatar.cc/300?img=2',
23
        name: 'Jane Smith',
24
        rating: 92,
25
        progress: 78,
26
      },
27
      {
28
        avatar: 'https://i.pravatar.cc/300?img=3',
29
        name: 'Bob Johnson',
30
        rating: 78,
31
        progress: 60,
32
      },
33
      {
34
        avatar: 'https://i.pravatar.cc/300?img=4',
35
        name: 'Alice Brown',
36
        rating: 95,
37
        progress: 89,
38
      },
39
      {
40
        avatar: 'https://i.pravatar.cc/300?img=5',
41
        name: 'Charlie Wilson',
42
        rating: 88,
43
        progress: 72,
44
      },
45
    ],
46
    [],
47
  );
48

49
  const columns: ColumnRegular[] = useMemo(
50
    () => [
51
      {
52
        prop: 'avatar',
53
        size: 60,
54
        cellTemplate: avatarRenderer,
55
        rectangular: true,
56
      },
57
      { prop: 'name', size: 150 },
58
      {
59
        name: 'Rating (0-100)',
60
        prop: 'rating',
61
        size: 200,
62
        cellTemplate: editorSlider,
63
        thresholds: [
64
          { value: 70, className: 'high' },
65
          { value: 30, className: 'medium' },
66
          { value: 0, className: 'low' },
67
        ],
68
        min: 0,
69
        max: 100,
70
        step: 1,
71
      },
72
      {
73
        name: 'Progress (%)',
74
        prop: 'progress',
75
        size: 200,
76
        cellTemplate: editorSlider,
77
        min: 0,
78
        max: 100,
79
        step: 5,
80
      },
81
    ],
82
    [],
83
  );
84

85
  const plugins = useMemo(() => [RowOddPlugin], []);
86

87
  return (
88
    <RevoGrid
89
      className="rounded-lg overflow-hidden cell-border"
90
      range
91
      source={source}
92
      columns={columns}
93
      plugins={plugins}
94
      theme={isDark() ? 'darkMaterial' : 'material'}
95
      hideAttribution
96
      style={{ minHeight: '300px' }}
97
    />
98
  );
99
}
100

101
export default EditorSlider;

1
import { Component, ViewEncapsulation } from '@angular/core';
2
import { RevoGrid } from '@revolist/angular-datagrid';
3
import {
4
  editorSlider,
5
  avatarRenderer,
6
  RowOddPlugin,
7
} from '@revolist/revogrid-pro';
8
import { currentTheme } from '../composables/useRandomData';
9

10
@Component({
11
  selector: 'editor-slider-grid',
12
  standalone: true,
13
  imports: [RevoGrid],
14
  template: `
15
    <revo-grid
16
      class="rounded-lg overflow-hidden cell-border"
17
      [range]="true"
18
      [source]="source"
19
      [columns]="columns"
20
      [plugins]="plugins"
21
      [theme]="theme"
22
      [hideAttribution]="true"
23
      style="min-height: 300px;"
24
    ></revo-grid>
25
  `,
26
  encapsulation: ViewEncapsulation.None,
27
})
28
export class EditorSliderGridComponent {
29
  theme = currentTheme().isDark() ? 'darkMaterial' : 'material';
30

31
  source = [
32
    {
33
      avatar: 'https://i.pravatar.cc/300?img=1',
34
      name: 'John Doe',
35
      rating: 85,
36
      progress: 45,
37
    },
38
    {
39
      avatar: 'https://i.pravatar.cc/300?img=2',
40
      name: 'Jane Smith',
41
      rating: 92,
42
      progress: 78,
43
    },
44
    {
45
      avatar: 'https://i.pravatar.cc/300?img=3',
46
      name: 'Bob Johnson',
47
      rating: 78,
48
      progress: 60,
49
    },
50
    {
51
      avatar: 'https://i.pravatar.cc/300?img=4',
52
      name: 'Alice Brown',
53
      rating: 95,
54
      progress: 89,
55
    },
56
    {
57
      avatar: 'https://i.pravatar.cc/300?img=5',
58
      name: 'Charlie Wilson',
59
      rating: 88,
60
      progress: 72,
61
    },
62
  ];
63

64
  columns = [
65
    {
66
      prop: 'avatar',
67
      size: 60,
68
      cellTemplate: avatarRenderer,
69
      rectangular: true,
70
    },
71
    { prop: 'name', size: 150 },
72
    {
73
      name: 'Rating (0-100)',
74
      prop: 'rating',
75
      size: 200,
76
      cellTemplate: editorSlider,
77
      thresholds: [
78
        { value: 70, className: 'high' },
79
        { value: 30, className: 'medium' },
80
        { value: 0, className: 'low' },
81
      ],
82
      min: 0,
83
      max: 100,
84
      step: 1,
85
    },
86
    {
87
      name: 'Progress (%)',
88
      prop: 'progress',
89
      size: 200,
90
      cellTemplate: editorSlider,
91
      min: 0,
92
      max: 100,
93
      step: 5,
94
    },
95
  ];
96

97
  plugins = [RowOddPlugin];
98
}

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
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