Type Alias CustomMode

CustomMode: (
    curr: HandleItem[],
    next: HandleItem[],
    step: number,
    reversed: boolean,
    getValue: (x: number) => number,
) => HandleItem[]

A custom interaction mode function for fine-grained control over how handles move.

Receives the current handle state and the proposed next state, and returns the handles array that should actually be committed.

Type Declaration

- (
      curr: HandleItem[],
      next: HandleItem[],
      step: number,
      reversed: boolean,
      getValue: (x: number) => number,
  ): HandleItem[]
- Parameters
  - curr: HandleItem[]
    The current array of handles before the interaction.
  - next: HandleItem[]
    The proposed next array of handles after the interaction.
  - step: number
    The configured step value of the slider.
  - reversed: boolean
    Whether the slider is in reversed mode.
  - getValue: (x: number) => number
    A function that snaps a raw number to the nearest step value.
  Returns HandleItem[]
  The final array of handles to apply.

Example

// Custom mode: handles can never be closer than 10 apart
const myMode: CustomMode = (curr, next) => {
  if (next.length === 2 && (next[1].val - next[0].val) < 10) return curr;
  return next;
};
<Slider mode={myMode} ...>

Type Alias CustomMode

Type Declaration

Parameters

Returns HandleItem[]

Example

Settings