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​

<script>
    function handleChange(ev){
        const newValue = ev.value;
        console.log(newValue);
        // => {value: 64}
    }
</script>

<Slider onchange={handleChange}/>

Details​

The handler function 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 change event of the Slider control will have the previously selected Slider value and input:true:
{value: 56, previous: 50, input: true}
  • if a new Slider value has been applied, the change event of the Slider control will have just the value parameter

Related article: Catching the change of the value

Related sample: Slider