Events

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

start

Function

<RangeSlider 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

<RangeSlider 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

<RangeSlider 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;