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 or range area (when using draggy).
// e.detail
activeHandle: Integer; // -1 when dragging range area
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, by dragging the handle, or dragging the range area),
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 or range area.
// e.detail
activeHandle: Integer; // -1 when dragging range area
startValue: Float | Array; // Array when dragging range area
previousValue: Float | Array; // Array when dragging range area
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; // -1 when dragging range area
startValue: Float | Array; // Array when dragging range area
value: Float;
values: Array;