change

Description

fires when a new value is selected in a Slider

Parameters

• ev - (object) a CustomEvent object. Its detail property contains:
  • value - (number) the newly selected value
  • previous - (number) the previously selected value, if the Slider handle is being dragged
  • input - (boolean) true, if the Slider handle is being dragged (check details)

Example

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

<Slider on:change={handleChange}/>

Details

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

• if the Slider handle is being dragged, the change event of the Slider control will have the previously selected Slider value and input:true in ev.detail:

{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 in ev.detail

Related article: Catching the change of the value

Related sample: Slider