Skip to main content

onChange

Description

Fires when a new value is selected in a Slider

Usage

onChange?: (ev: {
value: number;
previous?: number;
input?: boolean;
}) => void;

Parameters

  • value - (required) the newly selected value
  • previous - (optional) the previously selected value
  • input - (optional) true, if the Slider handle is being dragged (check details)

Example

function handleChange(ev: { value: number; previous?: number; input?: boolean }) {
const newValue = ev.value;
console.log(newValue);
// => 64
}

<Slider onChange={handleChange} />

Details

The onChange handler receives an object with the value selected in the slider. The received object may also contain the following:

  • if the Slider handle is being dragged, the onChange handler will receive the previously selected Slider value and input: true:
{value: 56, previous: 50, input: true}
  • if a new Slider value has been applied, the onChange handler will receive just the value parameter:
{value: 64}

Related article: Catching the change of the value

Related sample: Slider