Filter

Module Extensions

`FilterCaptions` (Extended from `@revolist/revogrid`)

1
interface FilterCaptions {
2
  /**
3
       * The title of the selection filter
4
       */
5
      selectionTitle: string;
6
  /**
7
       * Placeholder for the selection filter search input.
8
       */
9
      selectionSearchPlaceholder: string;
10
  /**
11
       * The title of the slider filter
12
       */
13
      sliderTitle: string;
14
  /**
15
       * The title of the date filter
16
       */
17
      dateTitle: string;
18
  /**
19
       * The popup header title before the column name.
20
       */
21
      popupHeaderTitle: string;
22
  /**
23
       * The popup header separator between title and column name.
24
       */
25
      popupHeaderSeparator: string;
26
  /**
27
       * Formats the popup header column name from the full column data.
28
       */
29
      popupHeaderColumnName: (column: ShowData) => string;
30
  /**
31
       * Accessible label for the popup header filter icon when the column has active filters.
32
       */
33
      popupHeaderActive: string;
34
  /**
35
       * The popup header close icon accessible label and title.
36
       */
37
      popupHeaderClose: string;
38
  /**
39
       * The button label for opening the Pro expression filter editor.
40
       */
41
      expressionButton: string;
42
  /**
43
       * The title shown above the expression editor.
44
       */
45
      expressionTitle: string;
46
  /**
47
       * Placeholder text for the expression editor.
48
       */
49
      expressionPlaceholder: string;
50
  /**
51
       * Accessible label for applying expression text immediately.
52
       */
53
      expressionApply: string;
54
  /**
55
       * Label shown before expression validation errors.
56
       * @deprecated Expression validation details are now shown in the expression tooltip.
57
       */
58
      expressionInvalid: string
59
}

`ColumnFilterConfig` (Extended from `@revolist/revogrid`)

1
interface ColumnFilterConfig {
2
  /**
3
       * The configuration for the selection filter
4
       */
5
      selection?: SelectionConfig;
6
  /**
7
       * The configuration for the slider filter.
8
       *
9
       * @example
10
       * ```ts
11
       * grid.filter = {
12
       *   slider: {
13
       *     showRangeDisplay: true,
14
       *     showRangeInputs: true,
15
       *     formatInputValue: value => value.toFixed(2),
16
       *     parseInputValue: value => Number(value.replace(',', '.')),
17
       *   },
18
       * };
19
       * ```
20
       */
21
      slider?: Pick<
22
        RangeSliderProps,
23
        'showTooltips' | 'showRangeDisplay' | 'showRangeInputs' | 'formatValue' | 'formatInputValue' | 'parseInputValue'
24
      >;
25
  /**
26
       * The configuration for the Pro advanced filter popup header.
27
       */
28
      popupHeader?: FilterPopupHeaderConfig;
29
  /**
30
       * Opt-in current-column expression editor for advanced filters.
31
       * When enabled, the popup appends an expandable expression panel below the regular filter controls.
32
       * Valid expressions compile into the existing `multiFilterItems` filter model.
33
       *
34
       * @example
35
       * ```ts
36
       * grid.filter = {
37
       *   expressions: {
38
       *     enabled: true,
39
       *     applyDebounceMs: 300,
40
       *     errorTooltipLabel: 'Expression validation details',
41
       *     formatDiagnostic: diagnostic => translateExpressionDiagnostic(diagnostic),
42
       *   },
43
       * };
44
       * ```
45
       */
46
      expressions?: boolean | ExpressionFilterConfig
47
}

Plugin API

`defineAdvancedFilterConfig`

1
export function defineAdvancedFilterConfig(
2
  config: AdvancedFilterConfig,
3
): ColumnFilterConfig;

`AdvancedFilterConfig` (Extended from `index.ts`)

1
export type AdvancedFilterConfig = Omit<ColumnFilterConfig, 'localization'> & {
2
  localization?: AdvancedFilterLocalization;
3
};

`AdvancedFilterLocalization` (Extended from `index.ts`)

1
export type AdvancedFilterLocalization = Partial<Omit<CoreFilterLocalization, 'filterNames'>> & {
2
  filterNames?: Partial<CoreFilterLocalization['filterNames']>;
3
};

`AdvanceFilterPlugin`

Plugins The AdvanceFilterPlugin extends the filtering capabilities of a RevoGrid component by introducing advanced, customizable filter options, such as selection and range-based filters. This plugin enhances the grid’s filter functionality, allowing users to interact with and manipulate data effectively.

Key Features:

Custom Filters: Introduces custom filter types including selection and slider for more flexible data filtering. These filters allow users to select specific values or define a range for filtering data.
Event Integration: Listens for BEFORE_HEADER_RENDER_EVENT to determine the applicability of filters for a given column, ensuring that only relevant filters are displayed.
Dynamic Content Rendering: Uses a HyperFunc to dynamically render filter UI components in the grid’s header, including a RangeSlider component and selection list rendering.
Enhanced Filter Management: Provides methods to manage excluded values from filters and to generate selection lists based on current data, facilitating complex filter interactions.

Usage:

Integrate AdvanceFilterPlugin into a RevoGrid instance to enable advanced filtering features. Add the plugin to the grid’s plugins array during initialization.

Example

1
import { AdvanceFilterPlugin } from '@revolist/revogrid-pro'
2

3
const grid = document.createElement('revo-grid');
4
grid.plugins = [AdvanceFilterPlugin];

This plugin is essential for applications that require sophisticated filtering mechanisms, enabling users to perform more nuanced data queries and enhancing the overall data exploration experience.

Dependencies

Optional FilterPlugin: Replaces an existing core FilterPlugin while preserving its filter configuration.

1
class AdvanceFilterPlugin {
2
  initConfig(config: ColumnFilterConfig);
3

4
  beforeshow(data: ShowData): void;
5

6
  async headerclick(...args: Parameters<FilterPlugin['headerclick']>);
7

8
  async onFilterChange(filterItems: Parameters<FilterPlugin['onFilterChange']>[0]);
9

10
  async doFiltering(...args: Parameters<FilterPlugin['doFiltering']>);
11

12
  isSelectionCascadeEnabled();
13

14
  getContextAwareSelectionList(
15
    columnProp: ColumnProp,
16
    exlude = new Set<string>(),
17
    sourceRowTypes?: DimensionRows[],
18
  );
19

20
  getExcludedValues(columnProp: ColumnProp);
21

22
  getSelectionList(
23
    columnProp: ColumnProp,
24
    exlude = new Set<string>(),
25
    sourceRowTypes?: DimensionRows[],
26
  ):;
27

28
  destroy();
29
}

`getStartOfToday`

1
export function getStartOfToday(): Date;

`getStartOfYesterday`

1
export function getStartOfYesterday(): Date;

`getStartOfThisMonth`

1
export function getStartOfThisMonth(): Date;

`getStartOfLastMonth`

1
export function getStartOfLastMonth(): Date;

`getStartOfThisQuarter`

1
export function getStartOfThisQuarter(): Date;

`getStartOfThisYear`

1
export function getStartOfThisYear(): Date;

`getExtraByOperator`

1
export function getExtraByOperator(operator: DateFilterOperator): ExtraField | undefined;

`FILTER_DATE`

1
FILTER_DATE: string;

`filterOperators`

1
filterOperators: DateFilterOperator[];

`DateFilterOperatorWithDatePickerExtra`

1
export type DateFilterOperatorWithDatePickerExtra =
2
  | 'equals'
3
  | 'before'
4
  | 'after'
5
  | 'onOrBefore'
6
  | 'onOrAfter'
7
  | 'notEqual';

`DateFilterOperatorWithDateRangeExtra`

1
export type DateFilterOperatorWithDateRangeExtra = 'between';

`DateFilterOperator`

1
export type DateFilterOperator =
2
  | 'notEqual'
3
  | 'isEmpty'
4
  | 'isNotEmpty'
5
  | 'today'
6
  | 'yesterday'
7
  | 'last7Days'
8
  | 'thisMonth'
9
  | 'lastMonth'
10
  | 'thisQuarter'
11
  | 'nextQuarter'
12
  | 'previousQuarter'
13
  | 'thisYear'
14
  | 'nextYear'
15
  | 'previousYear'
16
  | DateFilterOperatorWithDatePickerExtra
17
  | DateFilterOperatorWithDateRangeExtra;

`DateRangeValue`

1
interface DateRangeValue {
2
  operator: DateFilterOperator;
3
  fromDate?: string;
4
  toDate?: string
5
}

`DATE_FILTERS`

1
DATE_FILTERS: Record<DateFilterOperator, CustomFilter<any, LogicFunctionExtraParam>>;

`SliderRange`

1
export type SliderRange = { fromValue: number; toValue: number };

`RangeSliderProps`

Props for the RangeSlider component.

The slider keeps its own visual controls synchronized with optional editable inputs. Use formatInputValue and parseInputValue together when the input text must follow a custom number format, such as comma decimals.

Example:

1
* ```ts
2
 * slider: {
3
 *   showRangeInputs: true,
4
 *   formatValue: value => value.toFixed(2),
5
 *   formatInputValue: value => value.toFixed(2).replace('.', ','),
6
 *   parseInputValue: value => Number(value.replace(',', '.')),
7
 * }
8
 * ```

1
interface RangeSliderProps {
2
  /** Minimum value for the range */
3
    min: number;
4
  /** Maximum value for the range */
5
    max: number;
6
  /** Current value for the start of the range */
7
    fromValue: number;
8
  /** Current value for the end of the range */
9
    toValue: number;
10
  /** Whether to show tooltips on hover */
11
    showTooltips?: boolean;
12
  /** Whether to show the current range values above the slider */
13
    showRangeDisplay?: boolean;
14
  /** Whether to show numeric inputs for editing the selected range */
15
    showRangeInputs?: boolean;
16
  /**
17
     * Optional function to format values inside the editable inputs.
18
     * Defaults to `String(value)`, which keeps dot decimals independent of the
19
     * browser's localized number input rendering.
20
     */
21
    formatInputValue?: (value: number) => string;
22
  /**
23
     * Optional function to parse editable input text back to a number.
24
     * Return `NaN` to ignore incomplete or invalid text while the user is typing.
25
     * The default parser accepts both dot and comma decimal separators.
26
     */
27
    parseInputValue?: (value: string) => number;
28
  /** Callback fired when the range values change */
29
    onRangeChange: (range: SliderRange) => void;
30
  /**
31
     * Optional function to format read-only labels and tooltips.
32
     * Editable inputs use `formatInputValue` so display labels and input text can
33
     * intentionally use different formats.
34
     */
35
    formatValue?: (value: number) => string
36
}

`SelectionItem`

1
export type SelectionItem = { value: string; label: string; [key: string]: any };

`GetItemsFn`

1
export type GetItemsFn = (prop: ColumnProp) => Promise<SelectionItem[]> | SelectionItem[];

`SelectionItemTemplateProps`

1
export type SelectionItemTemplateProps = {
2
  /** Current column prop for the selection filter popup. */
3
  columnProp: ColumnProp;
4
  /** Original item returned by the default option loader or custom `selection.getItems`. */
5
  item: SelectionItem;
6
  /** Normalized option value used by selection filtering. */
7
  value: string;
8
  /** Display label for the option. */
9
  label: string;
10
  /** Whether this option is currently included in the filter result. */
11
  checked: boolean;
12
};

`SelectionItemTemplate`

1
export type SelectionItemTemplate = (
2
  h: HyperFunc<VNode>,
3
  props: SelectionItemTemplateProps,
4
) => any;

`SelectionGridSettings`

1
export type SelectionGridSettings = Partial<{
2
  additionalData: HTMLRevoGridElement['additionalData'];
3
  autoSizeColumn: HTMLRevoGridElement['autoSizeColumn'];
4
  canFocus: HTMLRevoGridElement['canFocus'];
5
  colSize: HTMLRevoGridElement['colSize'];
6
  columnTypes: HTMLRevoGridElement['columnTypes'];
7
  editors: HTMLRevoGridElement['editors'];
8
  frameSize: HTMLRevoGridElement['frameSize'];
9
  hideAttribution: HTMLRevoGridElement['hideAttribution'];
10
  noHorizontalScrollTransfer: HTMLRevoGridElement['noHorizontalScrollTransfer'];
11
  range: HTMLRevoGridElement['range'];
12
  readonly: HTMLRevoGridElement['readonly'];
13
  resize: HTMLRevoGridElement['resize'];
14
  rowDefinitions: HTMLRevoGridElement['rowDefinitions'];
15
  rowHeaders: HTMLRevoGridElement['rowHeaders'];
16
  rowSize: HTMLRevoGridElement['rowSize'];
17
  theme: HTMLRevoGridElement['theme'];
18
  useClipboard: HTMLRevoGridElement['useClipboard'];
19
}>;

`SelectionCascadeConfig`

1
export type SelectionCascadeConfig = {
2
  /**
3
   * Enables context-aware selection options.
4
   * When true, selection values are calculated from rows matching active filters
5
   * in other columns, excluding the current column filter itself.
6
   */
7
  enabled?: boolean;
8
  /**
9
   * Shows active filter dependency order badges next to header filter icons.
10
   * Disabled by default. Set to true to show dependency badges.
11
   */
12
  showDependencyNumbers?: boolean;
13
};

`SelectionConfig`

1
export type SelectionConfig = {
2
  sortDirection?: 'asc' | 'desc' | 'none';
3
  /**
4
   * Row stores used by the default selection option loader.
5
   * Defaults to all row stores for backward compatibility. Set to `['rgRow']`
6
   * to build options from the main data source only and ignore pinned rows.
7
   */
8
  sourceRowTypes?: DimensionRows[];
9
  /**
10
   * Controls whether typing in the selection popup search input also applies a
11
   * hidden `quickSearch` filter to the grid rows.
12
   * Defaults to true for backward compatibility. Set to false to only narrow
13
   * the popup option list while keeping the grid rows unchanged until checkbox
14
   * selection values are changed.
15
   */
16
  quickSearchFiltering?: boolean;
17
  /**
18
   * Optional grouping for selection filter option rows.
19
   * - Pass a config to apply it globally to all selection-filter columns.
20
   * - Pass a record keyed by column prop to override per column.
21
   */
22
  grouping?: GroupingOptions | Record<string, GroupingOptions>;
23
  /**
24
   * Provide a custom loader for selection list items.
25
   * - Pass a function to apply it globally to all columns.
26
   * - Pass a record keyed by column prop to override per column;
27
   *   columns without an entry fall back to the default store-based lookup.
28
   */
29
  getItems?: GetItemsFn | Record<string, GetItemsFn>;
30
  /**
31
   * Custom renderer for selection option content.
32
   * The plugin still renders and controls the checkbox; this template replaces
33
   * the label content next to it, so icons and custom item metadata can be shown
34
   * without changing selection semantics.
35
   * - Pass a function to apply it globally to all columns.
36
   * - Pass a record keyed by column prop to override per column.
37
   */
38
  itemTemplate?: SelectionItemTemplate | Record<string, SelectionItemTemplate>;
39
  /**
40
   * Custom plugins for the nested selection option grid.
41
   * - Pass an array to apply it globally to all selection-filter columns.
42
   * - Pass a record keyed by column prop to override per column.
43
   */
44
  plugins?: GridPlugin[] | Record<string, GridPlugin[]>;
45
  /**
46
   * Optional settings for the nested selection option grid.
47
   * `source`, `columns`, and `grouping` stay controlled by the filter list.
48
   * - Pass an object to apply it globally to all selection-filter columns.
49
   * - Pass a record keyed by column prop to override per column.
50
   */
51
  gridSettings?: SelectionGridSettings | Record<string, SelectionGridSettings>;
52
  /**
53
   * Optional context-aware option loading for selection filters.
54
   */
55
  cascadeOptions?: SelectionCascadeConfig;
56
};

`FilterPopupHeaderConfig`

1
export type FilterPopupHeaderConfig = {
2
  /**
3
   * Hide the advanced filter popup header.
4
   */
5
  hidden?: boolean;
6
};

`FIlTER_SELECTION`

Selection filter type

1
FIlTER_SELECTION: "empty" | "none" | "notEmpty" | "eq" | "notEq" | "begins" | "contains" | "notContains" | "eqN" | "neqN" | "gt" | "gte" | "lt" | "lte";

`FIlTER_QUICK_SEARCH`

Quick search filter type

1
FIlTER_QUICK_SEARCH: "empty" | "none" | "notEmpty" | "eq" | "notEq" | "begins" | "contains" | "notContains" | "eqN" | "neqN" | "gt" | "gte" | "lt" | "lte";

`FIlTER_SLIDER`

Slider filter type

1
FIlTER_SLIDER: "empty" | "none" | "notEmpty" | "eq" | "notEq" | "begins" | "contains" | "notContains" | "eqN" | "neqN" | "gt" | "gte" | "lt" | "lte";

`FIlTER_EXPRESSION`

Hidden Pro expression filter type.

1
FIlTER_EXPRESSION: "empty" | "none" | "notEmpty" | "eq" | "notEq" | "begins" | "contains" | "notContains" | "eqN" | "neqN" | "gt" | "gte" | "lt" | "lte";

`between`

1
between: LogicFunction<any, SliderRange | undefined>;

`mergeFilterConfigs`

1
export function mergeFilterConfigs(
2
  base?: ColumnFilterConfig,
3
  override?: ColumnFilterConfig,
4
): ColumnFilterConfig | undefined;

`createAdvancedFilterConfig`

1
export function createAdvancedFilterConfig(
2
  config?: ColumnFilterConfig,
3
): ColumnFilterConfig;

`createDefaultFilterTypes`

1
export function createDefaultFilterTypes(): Record<string, string[]>;

`resetFilterConfigState`

1
export function resetFilterConfigState(state:;

`expressionFilterFunction`

1
expressionFilterFunction: LogicFunction<any, LogicFunctionExtraParam>;

`ADVANCED_FILTERS`

1
ADVANCED_FILTERS: {
2
  [FIlTER_SELECTION]: { columnFilterType: "empty" | "none" | "notEmpty" | "eq" | "notEq" | "begins" | "contains" | "notContains" | "eqN" | "neqN" | "gt" | "gte" | "lt" | "lte"; name: "empty" | "none" | "notEmpty" | "eq" | "notEq" | "begins" | "contains" | "notContains" | "eqN" | "neqN" | "gt" | "gte" | "lt" | "lte"; func: LogicFunction<any, LogicFunctionExtraParam>; };
3
  [FIlTER_SLIDER]: { columnFilterType: "empty" | "none" | "notEmpty" | "eq" | "notEq" | "begins" | "contains" | "notContains" | "eqN" | "neqN" | "gt" | "gte" | "lt" | "lte"; name: "empty" | "none" | "notEmpty" | "eq" | "notEq" | "begins" | "contains" | "notContains" | "eqN" | "neqN" | "gt" | "gte" | "lt" | "lte"; func: LogicFunction<any, LogicFunctionExtraParam>; };
4
  [FIlTER_QUICK_SEARCH]: { columnFilterType: "empty" | "none" | "notEmpty" | "eq" | "notEq" | "begins" | "contains" | "notContains" | "eqN" | "neqN" | "gt" | "gte" | "lt" | "lte"; name: "empty" | "none" | "notEmpty" | "eq" | "notEq" | "begins" | "contains" | "notContains" | "eqN" | "neqN" | "gt" | "gte" | "lt" | "lte"; func: LogicFunction<any, LogicFunctionExtraParam>; };
5
};

`ADVANCED_FILTER_NAMES`

1
ADVANCED_FILTER_NAMES: {
2
  [FIlTER_EXPRESSION]: string;
3
};

`notContains`

1
notContains: LogicFunction<any, Set<any> | undefined>;

`popUpContent`

1
popUpContent: (data: ShowData, { multiFilterItems, onFilterItemsChange, subscribeFilterItemsChange, dataStores, getItems, itemTemplate, grouping, plugins, gridSettings, config, change, onClose, }: { multiFilterItems: MultiFilterItem; onFilterItemsChange: ProFilterItemsChangeListener; subscribeFilterItemsChange: ProFilterItemsChangeSubscription; dataStores: RowDataSources; getItems: () => SelectionItem[] | Promise<SelectionItem[]>; itemTemplate?: SelectionItemTemplate | undefined; grouping?: GroupingOptions | undefined; plugins?: typeof BasePlugin[] | undefined; gridSettings?: Partial<{ additionalData: AdditionalData; autoSizeColumn: boolean | AutoSizeColumnConfig; canFocus: boolean; colSize: number; columnTypes: { [name: string]: ColumnType<DataType<any, ColumnProp>>; }; editors: Editors; frameSize: number; hideAttribution: boolean; noHorizontalScrollTransfer: boolean; range: boolean; readonly: boolean; resize: boolean; rowDefinitions: RowDefinition[]; rowHeaders: boolean | RowHeaders; rowSize: number; theme: string; useClipboard: boolean | ClipboardConfig; }> | undefined; config?: ColumnFilterConfig | undefined; change(filterItems: MultiFilterItem): Promise<void>; onClose?(): void; }) => VNode;

`popUpBottomContent`

1
popUpBottomContent: (data: ShowData, options: { multiFilterItems: MultiFilterItem; onFilterItemsChange: ProFilterItemsChangeListener; subscribeFilterItemsChange: ProFilterItemsChangeSubscription; getItems: () => SelectionItem[] | Promise<SelectionItem[]>; config?: ColumnFilterConfig | undefined; change(filterItems: MultiFilterItem): Promise<void>; }) => never[] | VNode;

`ProFilterItemsChangeDetail`

1
export type ProFilterItemsChangeDetail = {
2
  prop: ColumnProp;
3
  multiFilterItems: MultiFilterItem;
4
};

`ProFilterItemsChangeListener`

1
export type ProFilterItemsChangeListener = (detail: ProFilterItemsChangeDetail) => void;

`ProFilterItemsChangeSubscription`

1
export type ProFilterItemsChangeSubscription = (
2
  listener: ProFilterItemsChangeListener,
3
) => () => void;

`hasMeaningfulFilterValue`

1
export function hasMeaningfulFilterValue(value: unknown);

`hasActiveFiltersForColumn`

1
export function hasActiveFiltersForColumn(
2
  columnProp: ColumnProp | undefined,
3
  multiFilterItems: MultiFilterItem,
4
);

`renderFilterPopupHeader`

1
export function renderFilterPopupHeader(
2
  data: ShowData,;

`FilterPopupHeaderOptions`

1
export type FilterPopupHeaderOptions = {
2
  multiFilterItems: MultiFilterItem;
3
  captions?: Partial<FilterCaptions>;
4
  onClose?(): void;
5
};

`renderSliderControl`

Renders the dual native range inputs used as slider handles. Shared runtime helpers keep handle position, highlighted track, labels, tooltips, and optional editable inputs synchronized.

1
export function renderSliderControl(runtime: RangeSliderRuntime);

`renderRangeInputs`

Renders optional editable range inputs for the selected slider range. Inputs intentionally use type="text" with inputMode="decimal" so custom formatters control comma/dot decimals instead of browser-localized number UI.

1
export function renderRangeInputs(runtime: RangeSliderRuntime);

`scaleSliderValue`

1
export function scaleSliderValue(value: number, scaleFactor = SLIDER_SCALE_FACTOR);

`unscaleSliderValue`

1
export function unscaleSliderValue(value: number, scaleFactor = SLIDER_SCALE_FACTOR);

`normalizeSliderState`

1
export function normalizeSliderState(;

`clampScaledValue`

1
export function clampScaledValue(value: number, minInt: number, maxInt: number);

`normalizeFromSlider`

1
export function normalizeFromSlider(fromValueInt: number, toValueInt: number);

`normalizeToSlider`

1
export function normalizeToSlider(fromValueInt: number, toValueInt: number);

`normalizeFromInputValue`

1
export function normalizeFromInputValue(
2
  value: number,
3
  currentToValueInt: number,
4
  state: Pick<ScaledSliderState, 'minInt' | 'maxInt'>,
5
  scaleFactor = SLIDER_SCALE_FACTOR,
6
);

`normalizeToInputValue`

1
export function normalizeToInputValue(
2
  value: number,
3
  currentFromValueInt: number,
4
  state: Pick<ScaledSliderState, 'minInt' | 'maxInt'>,
5
  scaleFactor = SLIDER_SCALE_FACTOR,
6
);

`toSliderRange`

1
export function toSliderRange(
2
  fromValueInt: number,
3
  toValueInt: number,
4
  scaleFactor = SLIDER_SCALE_FACTOR,
5
): SliderRange;

`toSliderDisplayValue`

1
export function toSliderDisplayValue(valueInt: number, scaleFactor = SLIDER_SCALE_FACTOR);

`formatSliderInputValue`

1
export function formatSliderInputValue(value: number);

`parseSliderInputValue`

Default editable input parser. Accepts both 640.42 and 640,42; returns NaN for empty text so partial edits do not reset the current slider selection while the user is typing.

1
export function parseSliderInputValue(value: string);

`SLIDER_SCALE_FACTOR`

Range inputs can contain decimals while native range inputs work most predictably with integers. Slider logic stores values as scaled integers and converts back to numbers only when displaying values or emitting filter state.

1
SLIDER_SCALE_FACTOR: 100;

`ScaledSliderState`

1
export type ScaledSliderState = {
2
  minInt: number;
3
  maxInt: number;
4
  fromValueInt: number;
5
  toValueInt: number;
6
};

`SliderStateInput`

1
export type SliderStateInput = {
2
  min: number;
3
  max: number;
4
  fromValue: number;
5
  toValue: number;
6
  scaleFactor?: number;
7
};

`getCurrentRange`

1
export function getCurrentRange(runtime: RangeSliderRuntime);

`syncRangeText`

1
export function syncRangeText(runtime: RangeSliderRuntime);

`updateTooltip`

1
export function updateTooltip(
2
  slider: HTMLInputElement,
3
  tooltip: HTMLDivElement,
4
  state: ScaledSliderState,
5
  formatValue: NonNullable<RangeSliderProps['formatValue']>,
6
);

`hideTooltip`

1
export function hideTooltip(tooltip: HTMLDivElement);

`fillSlider`

1
export function fillSlider(
2
  from: HTMLInputElement,
3
  to: HTMLInputElement,
4
  controlSlider: HTMLInputElement,
5
);

`syncVisuals`

1
export function syncVisuals(runtime: RangeSliderRuntime);

`setToggleAccessible`

1
export function setToggleAccessible(runtime: RangeSliderRuntime);

`emitRangeChange`

1
export function emitRangeChange(runtime: RangeSliderRuntime);

`preventInvalidNumberKey`

1
export function preventInvalidNumberKey(event: KeyboardEvent);

`RangeSliderRefs`

1
export type RangeSliderRefs = {
2
  fromSlider?: HTMLInputElement;
3
  toSlider?: HTMLInputElement;
4
  fromInput?: HTMLInputElement;
5
  toInput?: HTMLInputElement;
6
  fromLabel?: HTMLSpanElement;
7
  toLabel?: HTMLSpanElement;
8
  fromTooltip?: HTMLDivElement;
9
  toTooltip?: HTMLDivElement;
10
};

`RangeSliderRuntime`

1
export type RangeSliderRuntime = {
2
  refs: RangeSliderRefs;
3
  state: ScaledSliderState;
4
  formatValue: NonNullable<RangeSliderProps['formatValue']>;
5
  formatInputValue: NonNullable<RangeSliderProps['formatInputValue']>;
6
  parseInputValue: NonNullable<RangeSliderProps['parseInputValue']>;
7
  showTooltips: boolean;
8
  onRangeChange: RangeSliderProps['onRangeChange'];
9
  scheduleSyncVisuals: () => void;
10
  syncVisuals: () => void;
11
};

`RangeSlider`

RangeSlider renders a dual-handle range control for the Pro slider filter. The slider track and numeric inputs are separate controls that share one normalized scaled-value state.

1
RangeSlider: FunctionalComponent<RangeSliderProps>;

`isFilterOptionSourceRow`

1
export function isFilterOptionSourceRow(row?: DataType);

`getFilterOptionSourceRows`

1
export function getFilterOptionSourceRows(
2
  stores: RowDataSources,
3
  sourceRowTypes?: DimensionRows[],
4
): DataType[];

`compileExpressionFilter`

1
export function compileExpressionFilter(
2
  text: string,
3
  context: ExpressionColumnContext,
4
): ExpressionCompileResult;

`normalizeExpressionConfig`

Normalizes the public expression config into one internal shape with defaults.

Returns undefined when expressions are disabled so callers can keep opt-in rendering, filter registration, and stale-state cleanup behind one predicate.

1
export function normalizeExpressionConfig(
2
  config?: ColumnFilterConfig['expressions'],
3
): NormalizedExpressionConfig | undefined;

`evaluateExpression`

1
export function evaluateExpression(ast: ExpressionAst, value: unknown): boolean;

`expressionFilter`

1
expressionFilter: LogicFunction<unknown, ExpressionFilterValue>;

`highlightExpression`

1
export function highlightExpression(text: string, diagnostics: ExpressionDiagnostic[] = []);

`isCoreFilterType`

1
export function isCoreFilterType(value: string): value is FilterType;

`isExpressionOperator`

1
export function isExpressionOperator(value: string): value is ExpressionOperator;

`EXPRESSION_FILTER_OPERATORS`

1
EXPRESSION_FILTER_OPERATORS: { readonly empty: "empty"; readonly notEmpty: "notEmpty"; readonly eq: "eq"; readonly notEq: "notEq"; readonly begins: "begins"; readonly contains: "contains"; readonly notContains: "notContains"; readonly eqN: "eqN"; readonly neqN: "neqN"; readonly gt: "gt"; readonly gte: "gte"; readonly lt: "lt"; readonly lte: "lte"; };

`EXPRESSION_DATE_OPERATORS`

1
EXPRESSION_DATE_OPERATORS: { readonly equals: "equals"; readonly before: "before"; readonly after: "after"; readonly onOrBefore: "onOrBefore"; readonly onOrAfter: "onOrAfter"; readonly between: "between"; readonly notEqual: "notEqual"; readonly isEmpty: "isEmpty"; readonly isNotEmpty: "isNotEmpty"; readonly today: "today"; readonly yesterday: "yesterday"; readonly last7Days: "last7Days"; readonly thisMonth: "thisMonth"; readonly lastMonth: "lastMonth"; readonly thisQuarter: "thisQuarter"; readonly nextQuarter: "nextQuarter"; readonly previousQuarter: "previousQuarter"; readonly thisYear: "thisYear"; readonly nextYear: "nextYear"; readonly previousYear: "previousYear"; };

`EXPRESSION_SELECTION_OPERATORS`

1
EXPRESSION_SELECTION_OPERATORS: { readonly is: "is"; readonly in: "in"; readonly notIn: "notIn"; };

`EXPRESSION_SYMBOL_OPERATORS`

1
EXPRESSION_SYMBOL_OPERATORS: { readonly '=': "eq"; readonly '!=': "notEq"; readonly '>': "gt"; readonly '>=': "gte"; readonly '<': "lt"; readonly '<=': "lte"; };

`ExpressionFilterOperator`

1
export type ExpressionFilterOperator =
2
  | typeof EXPRESSION_FILTER_OPERATORS[keyof typeof EXPRESSION_FILTER_OPERATORS]
3
  | typeof EXPRESSION_DATE_OPERATORS[keyof typeof EXPRESSION_DATE_OPERATORS]
4
  | typeof EXPRESSION_SELECTION_OPERATORS[keyof typeof EXPRESSION_SELECTION_OPERATORS];

`ExpressionSymbolOperator`

1
export type ExpressionSymbolOperator = keyof typeof EXPRESSION_SYMBOL_OPERATORS;

`ExpressionOperator`

1
export type ExpressionOperator = ExpressionFilterOperator | ExpressionSymbolOperator;

`DATE_PERIOD_PHRASES`

1
DATE_PERIOD_PHRASES: { readonly today: "today"; readonly yesterday: "yesterday"; readonly 'last 7 days': "last7Days"; readonly 'this month': "thisMonth"; readonly 'last month': "lastMonth"; readonly 'this quarter': "thisQuarter"; readonly 'next quarter': "nextQuarter"; readonly 'previous quarter': "previousQuarter"; readonly 'this year': "thisYear"; readonly 'next year': "nextYear"; readonly 'previous year': "previousYear"; };

`VALUELESS_OPERATORS`

1
VALUELESS_OPERATORS: Set<ExpressionOperator>;

`LIST_OPERATORS`

1
LIST_OPERATORS: Set<ExpressionOperator>;

`NUMERIC_OPERATORS`

1
NUMERIC_OPERATORS: Set<ExpressionOperator>;

`DATE_OPERATORS`

1
DATE_OPERATORS: Set<ExpressionOperator>;

`SELECTION_OPERATORS`

1
SELECTION_OPERATORS: Set<ExpressionOperator>;

`VALID_OPERATORS`

1
VALID_OPERATORS: Set<ExpressionOperator>;

`OPERATOR_START_WORDS`

1
OPERATOR_START_WORDS: Set<string>;

`defineExpressionPanel`

1
export function defineExpressionPanel(el: HTMLElement, props: ExpressionPanelProps);

`ExpressionPanelProps`

1
export type ExpressionPanelProps = {
2
  data: ShowData;
3
  multiFilterItems: MultiFilterItem;
4
  onFilterItemsChange: ProFilterItemsChangeListener;
5
  subscribeFilterItemsChange: ProFilterItemsChangeSubscription;
6
  config?: ColumnFilterConfig;
7
  getItems: () => Promise<SelectionItem[]> | SelectionItem[];
8
  change(filterItems: MultiFilterItem): Promise<void>;
9
};

`parseExpression`

1
export function parseExpression(text: string): ExpressionParseResult;

`serializeExpressionFilters`

1
export function serializeExpressionFilters(filters: FilterData[] = []);

`replaceColumnFilters`

Creates the next filter item map after replacing one column’s expression-owned filters.

The advanced filter panel receives mutable filter state from the core filter panel, but expression apply logic should produce a fresh map before notifying sibling Pro controls. This keeps the helper reusable in tests and avoids hidden prop mutation from the expression UI.

1
export function replaceColumnFilters(
2
  multiFilterItems: MultiFilterItem,
3
  prop: ColumnProp,
4
  filters: FilterData[],
5
): MultiFilterItem;

`syncFilterItemsTarget`

1
export function syncFilterItemsTarget(
2
  target: MultiFilterItem,
3
  source: MultiFilterItem,
4
): void;

`tokenizeExpression`

1
export function tokenizeExpression(text: string):;

`ExpressionBooleanOperator`

Boolean operator supported by the advanced filter expression AST.

1
/**
2
 * Boolean operator supported by the advanced filter expression AST.
3
 */
4
export type ExpressionBooleanOperator = 'and' | 'or';

`ExpressionAst`

Parsed expression tree used by the hidden expression filter evaluator.

1
/**
2
 * Parsed expression tree used by the hidden expression filter evaluator.
3
 */
4
export type ExpressionAst =
5
  | ExpressionConditionNode
6
  | {
7
      kind: 'binary';
8
      op: ExpressionBooleanOperator;
9
      left: ExpressionAst;
10
      right: ExpressionAst;
11
    };

`ExpressionConditionNode`

Single current-column condition parsed from an expression.

1
/**
2
 * Single current-column condition parsed from an expression.
3
 */
4
export type ExpressionConditionNode = {
5
  /** Condition node discriminator. */
6
  kind: 'condition';
7
  /** Optional field reference. Expressions may only reference the current column. */
8
  field?: string;
9
  /** Filter, date, selection, or symbolic operator. */
10
  operator: ExpressionOperator;
11
  /** Literal values consumed by the operator. */
12
  values: ExpressionLiteral[];
13
};

`ExpressionLiteral`

Literal value parsed from expression text.

1
/**
2
 * Literal value parsed from expression text.
3
 */
4
export type ExpressionLiteral = string | number;

`ExpressionDiagnostic`

Validation or parsing diagnostic associated with an expression text range.

1
/**
2
 * Validation or parsing diagnostic associated with an expression text range.
3
 */
4
export type ExpressionDiagnostic = {
5
  /** Human-readable diagnostic message. */
6
  message: string;
7
  /** Inclusive start offset in the expression text. */
8
  start: number;
9
  /** Exclusive end offset in the expression text. */
10
  end: number;
11
};

`ExpressionTokenType`

Token categories produced by the expression tokenizer.

1
/**
2
 * Token categories produced by the expression tokenizer.
3
 */
4
export type ExpressionTokenType =
5
  | 'word'
6
  | 'string'
7
  | 'number'
8
  | 'operator'
9
  | 'paren'
10
  | 'comma'
11
  | 'invalid';

`ExpressionToken`

Token emitted by the expression tokenizer for parsing and highlighting.

1
/**
2
 * Token emitted by the expression tokenizer for parsing and highlighting.
3
 */
4
export type ExpressionToken = {
5
  /** Token category. */
6
  type: ExpressionTokenType;
7
  /** Raw token value without quote delimiters for string tokens. */
8
  value: string;
9
  /** Inclusive start offset in the expression text. */
10
  start: number;
11
  /** Exclusive end offset in the expression text. */
12
  end: number;
13
};

`ExpressionParseResult`

Result of parsing expression text.

1
/**
2
 * Result of parsing expression text.
3
 */
4
export type ExpressionParseResult = {
5
  /** Parsed AST when expression syntax is valid enough to build one. */
6
  ast?: ExpressionAst;
7
  /** Tokens produced from the source expression text. */
8
  tokens: ExpressionToken[];
9
  /** Parser and tokenizer diagnostics. */
10
  diagnostics: ExpressionDiagnostic[];
11
};

`ExpressionFilterValue`

Hidden filter value stored in multiFilterItems for expression predicates.

1
/**
2
 * Hidden filter value stored in `multiFilterItems` for expression predicates.
3
 */
4
export type ExpressionFilterValue = {
5
  /** Original expression text used for serialization back into the editor. */
6
  text: string;
7
  /** Parsed expression tree used at filter evaluation time. */
8
  ast: ExpressionAst;
9
};

`ExpressionFilterConfig`

Configuration for the Pro advanced filter expression editor.

Expression filtering is opt-in through grid.filter.expressions. When enabled, the advanced filter popup renders a current-column expression editor and compiles valid expressions into the existing RevoGrid filter model.

1
/**
2
 * Configuration for the Pro advanced filter expression editor.
3
 *
4
 * Expression filtering is opt-in through `grid.filter.expressions`. When enabled,
5
 * the advanced filter popup renders a current-column expression editor and compiles
6
 * valid expressions into the existing RevoGrid filter model.
7
 */
8
export type ExpressionFilterConfig = {
9
  /**
10
   * Enables or disables the expression editor.
11
   * Set to `false` to disable expressions when passing an object config.
12
   */
13
  enabled?: boolean;
14
  /**
15
   * Delay in milliseconds before applying expression edits after typing.
16
   * Use `0` for immediate validation/application in tests or highly reactive UIs.
17
   */
18
  applyDebounceMs?: number;
19
  /**
20
   * Label for the button that opens the expression editor.
21
   */
22
  buttonLabel?: string;
23
  /**
24
   * Placeholder shown in the expression textarea when it is empty.
25
   */
26
  placeholder?: string;
27
  /**
28
   * Accessible label/title for the validation tooltip trigger shown on invalid expressions.
29
   */
30
  errorTooltipLabel?: string;
31
  /**
32
   * Formats an expression diagnostic for the validation tooltip.
33
   *
34
   * Use this to localize diagnostic text or map low-level parser/compiler messages
35
   * to product-specific wording. Multiple diagnostics are formatted individually
36
   * and joined with new lines.
37
   */
38
  formatDiagnostic?: (diagnostic: ExpressionDiagnostic, diagnostics: ExpressionDiagnostic[]) => string;
39
};

`NormalizedExpressionConfig`

Expression configuration after defaults are applied.

1
/**
2
 * Expression configuration after defaults are applied.
3
 */
4
export type NormalizedExpressionConfig = Required<ExpressionFilterConfig>;

`ExpressionColumnContext`

Column-specific context needed to validate and compile expression text.

1
/**
2
 * Column-specific context needed to validate and compile expression text.
3
 */
4
export type ExpressionColumnContext = {
5
  /** Current column property. */
6
  prop: ColumnProp;
7
  /** Current column display name. */
8
  name?: string;
9
  /** Filter panel column metadata. */
10
  data: ShowData;
11
  /** Selection options available for current-column selection expressions. */
12
  selectionItems?: ExpressionSelectionOption[];
13
};

`ExpressionCompileResult`

Result of compiling expression text into RevoGrid filter items.

1
/**
2
 * Result of compiling expression text into RevoGrid filter items.
3
 */
4
export type ExpressionCompileResult = {
5
  /** Filter items that should replace current-column expression-owned filters. */
6
  filters: FilterData[];
7
  /** Validation diagnostics that should prevent applying filters when present. */
8
  diagnostics: ExpressionDiagnostic[];
9
};

`ExpressionSelectionOption`

Selection option available to expression selection operators.

1
/**
2
 * Selection option available to expression selection operators.
3
 */
4
export type ExpressionSelectionOption = {
5
  /** Normalized selection value used by the selection filter model. */
6
  value: string;
7
  /** User-facing selection label. */
8
  label: string;
9
};

`isEmptyValue`

Value normalization helpers shared by expression evaluation and future expression integrations. They intentionally mirror the lightweight coercion used by the existing Pro filter predicates instead of introducing a separate expression runtime.

Checks whether a value should be treated as empty by expression predicates.

1
export function isEmptyValue(value: unknown);

`normalizeExpressionText`

Normalizes a value for case-insensitive text and selection comparisons.

1
export function normalizeExpressionText(value: unknown);

`toExpressionNumber`

Coerces a value for numeric expression comparisons.

1
export function toExpressionNumber(value: unknown);

`toExpressionDateTime`

Coerces a value to a timestamp for date expression comparisons.

1
export function toExpressionDateTime(value: unknown);

`isSameCalendarDate`

Compares values by their calendar date string, matching existing Pro date-filter semantics.

1
export function isSameCalendarDate(value: unknown, compare: unknown);

`isDateLikeValue`

Detects values that should prefer date comparison over numeric comparison.

1
export function isDateLikeValue(value: unknown);

`normalizeSelectionFilterConfig`

1
export function normalizeSelectionFilterConfig(
2
  config?: ColumnFilterConfig,
3
): ColumnFilterConfig | undefined;

`resolveSelectionFilterConfig`

1
export function resolveSelectionFilterConfig(
2
  selection: SelectionConfig | undefined,
3
  prop: ColumnProp,
4
): ResolvedSelectionFilterConfig;

`normalizeSelectionItems`

1
export function normalizeSelectionItems(items: SelectionItem[]): SelectionItem[];

`ResolvedSelectionFilterConfig`

1
export type ResolvedSelectionFilterConfig = {
2
  getItems?: GetItemsFn;
3
  itemTemplate?: SelectionItemTemplate;
4
  grouping?: GroupingOptions;
5
  plugins?: GridPlugin[];
6
  gridSettings?: SelectionGridSettings;
7
  sourceRowTypes?: DimensionRows[];
8
};

`isSelectionFilterActive`

1
export function isSelectionFilterActive(data: ShowData);

`renderSelectionContent`

1
export function renderSelectionContent(
2
  data: ShowData,;

`SelectionContentOptions`

1
export type SelectionContentOptions = {
2
  multiFilterItems: MultiFilterItem;
3
  onFilterItemsChange: ProFilterItemsChangeListener;
4
  subscribeFilterItemsChange: ProFilterItemsChangeSubscription;
5
  getItems: () => Promise<SelectionItem[]> | SelectionItem[];
6
  itemTemplate?: SelectionItemTemplate;
7
  grouping?: GroupingOptions;
8
  plugins?: GridPlugin[];
9
  gridSettings?: SelectionGridSettings;
10
  config?: ColumnFilterConfig;
11
  change(filterItems: MultiFilterItem): Promise<void>;
12
};

`createFilterDependencyBadgeController`

1
export function createFilterDependencyBadgeController(
2
  plugin: FilterDependencyBadgePlugin,
3
  getFilterConfig: () => ColumnFilterConfig | undefined,
4
): FilterDependencyBadgeController;

`getContextAwareSelectionList`

1
export function getContextAwareSelectionList(
2
  plugin: FilterPluginLike,
3
  columnProp: ColumnProp,
4
  exclude = new Set<string>(),
5
  sourceRowTypes?: DimensionRows[],
6
): SelectionItem[];

`parseValue`

1
export function parseValue(
2
  originalValue: string | undefined,
3
  originalLabel?: string,
4
):;

`parseSelectionValues`

1
export function parseSelectionValues(
2
  originalValue: unknown,
3
  originalLabel?: string,
4
):;

`getSelectionValueKeys`

1
export function getSelectionValueKeys(value: unknown): string[];

`SelectionGrid`

1
SelectionGrid: ({ columnProp, rows, itemTemplate, grouping, plugins, gridSettings, onCheckedChange, }: SelectionGridProps) => preact.JSX.Element;

`List`

1
List: ({ columnProp, subscribeFilterItemsChange, getItems, exclude: initialExclude, search, searchPlaceholder, filter, quickFilter, sortDirection, itemTemplate, grouping, plugins, gridSettings, }: ListProps) => preact.JSX.Element;

`defineList`

1
defineList: (el: HTMLElement, props: ListProps) => void;

`Search`

1
Search: ({ search, selectAll, searchValue, placeholder, allSelected, }: SearchProps) => preact.JSX.Element;

`SelectionListOption`

1
export type SelectionListOption = {
2
  text: string;
3
  checked: boolean;
4
  item: SelectionItem;
5
};

`SelectionListRow`

1
export type SelectionListRow = {
2
  value: string;
3
  label: string;
4
  checked: boolean;
5
  item: SelectionItem;
6
  [key: string]: any;
7
};

`ListProps`

1
interface ListProps {
2
  columnProp: ColumnProp;
3
  subscribeFilterItemsChange?: ProFilterItemsChangeSubscription;
4
  getItems: () => Promise<SelectionItem[]> | SelectionItem[];
5
  exclude?: Set<string>;
6
  search?: string;
7
  searchPlaceholder?: string;
8
  filter: (excluded: Set<string>) => void;
9
  quickFilter: (txt: string) => void;
10
  sortDirection?: 'asc' | 'desc' | 'none';
11
  itemTemplate?: SelectionItemTemplate;
12
  grouping?: GroupingOptions;
13
  plugins?: GridPlugin[];
14
  gridSettings?: SelectionGridSettings
15
}

`EMPTY_EXCLUDE`

1
EMPTY_EXCLUDE: Set<string>;

`FILTER_LIST_ROW_HEIGHT`

1
FILTER_LIST_ROW_HEIGHT: 28;

`FILTER_LIST_MAX_VISIBLE_ROWS`

1
FILTER_LIST_MAX_VISIBLE_ROWS: 8;

`FILTER_LIST_MAX_HEIGHT`

1
FILTER_LIST_MAX_HEIGHT: number;

`normalizeSelectionValue`

1
export function normalizeSelectionValue(value?: string);

`createSelectionMap`

1
export function createSelectionMap(items: SelectionItem[], exclude: Set<string>);

`filterSelectionMapBySearch`

1
export function filterSelectionMapBySearch(
2
  data: Map<string, SelectionListOption>,
3
  searchText: string,
4
);

`sortSelectionRows`

1
export function sortSelectionRows(
2
  filteredData: Map<string, SelectionListOption>,
3
  sortDirection?: 'asc' | 'desc' | 'none',
4
): SelectionListRow[];

`countGroupedSelectionRows`

1
export function countGroupedSelectionRows(rows: SelectionListRow[], groupingProps: ColumnProp[] = []);

Filter

Module Extensions

FilterCaptions (Extended from @revolist/revogrid)

ColumnFilterConfig (Extended from @revolist/revogrid)

Plugin API

defineAdvancedFilterConfig

AdvancedFilterConfig (Extended from index.ts)

AdvancedFilterLocalization (Extended from index.ts)

AdvanceFilterPlugin

Example

Dependencies

getStartOfToday

getStartOfYesterday

getStartOfThisMonth

getStartOfLastMonth

getStartOfThisQuarter

getStartOfThisYear

getExtraByOperator

FILTER_DATE

filterOperators

DateFilterOperatorWithDatePickerExtra

DateFilterOperatorWithDateRangeExtra

DateFilterOperator

DateRangeValue

DATE_FILTERS

SliderRange

RangeSliderProps

SelectionItem

GetItemsFn

SelectionItemTemplateProps

SelectionItemTemplate

SelectionGridSettings

SelectionCascadeConfig

SelectionConfig

FilterPopupHeaderConfig

FIlTER_SELECTION

FIlTER_QUICK_SEARCH

FIlTER_SLIDER

FIlTER_EXPRESSION

between

mergeFilterConfigs

createAdvancedFilterConfig

createDefaultFilterTypes

resetFilterConfigState

expressionFilterFunction

ADVANCED_FILTERS

ADVANCED_FILTER_NAMES

notContains

popUpContent

popUpBottomContent

ProFilterItemsChangeDetail

ProFilterItemsChangeListener

ProFilterItemsChangeSubscription

hasMeaningfulFilterValue

hasActiveFiltersForColumn

renderFilterPopupHeader

FilterPopupHeaderOptions

renderSliderControl

renderRangeInputs

scaleSliderValue

unscaleSliderValue

normalizeSliderState

clampScaledValue

normalizeFromSlider

normalizeToSlider

normalizeFromInputValue

normalizeToInputValue

toSliderRange

toSliderDisplayValue

formatSliderInputValue

parseSliderInputValue

SLIDER_SCALE_FACTOR

ScaledSliderState

SliderStateInput

getCurrentRange

syncRangeText

updateTooltip

hideTooltip

fillSlider

syncVisuals