Spring Easing

The sliders come, by default with a Svelte Spring animation. This uses the internal spring() function from Svelte. The properties of the spring() (stiffness, damping) can be set with this springValues property.

Default Spring

The default animation is not especially noticeable when moving the handle manually. But when clicking from one end to the other, the large distance travelled is animated and much more noticeable.

<script>
  let values = [50];
  let jump = () => values[0] > 50 ? values[0] = 5 : values[0] = 95;
</script>

<RangeSlider bind:values />

<button type="button" on:click={jump}>
  Animate
</button>

Custom Spring

Here’s a demonstration of the Slider with modified springValues property. The stiffness and damping values have been bound to the inputs below the Slider.

Move the easing/damping sliders to update the springy-ness of the first slider’s animation.

<RangeSlider springValues={{ stiffness: 0.15, damping: 0.4 }} />