Events

There’s a few events which trigger at different times during the lifecycle of the RangeSlider.

start

Function

on:start={(e) => { console.log(e.detail) }}

Event fired when the user begins interaction with the slider. This event fires as soon as the user mouse/touch down on the slider handle.

// e.detail
activeHandle: Integer; 
value: Float; 
values: Array;

change

Function

on:change={(e) => { console.log(e.detail) }}

Every time the value of the slider changes (either on a click, or by dragging the handle), this event will fire with the corresponding values. This event contains the startValue which is the value of the slider before the user started interacting, and the previousValue which is immediately previous value.

previousValue will be the same as startValue on the first change event, and using previousValue is useful for calculating which direction the user is dragging the handle.

// e.detail
activeHandle: Integer; 
startValue: Float; 
previousValue: Float;
value: Float; 
values: Array;

stop

Function

on:stop={(e) => { console.log(e.detail) }}

After the user has completed interacting (by releasing mouse/touch), this event will fire with the final values. This event also includes the startValue which is the value of the slider when the user first started interacting.

// e.detail
activeHandle: Integer; 
startValue: Float; 
value: Float; 
values: Array;