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 value = 50;
  const jump = () => value > 50 ? value = 5 : value = 95;
</script>

<RangeSlider bind:value />

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

Disable Spring

By default, the spring is enabled. To disable it, set the spring property to false. This will disable animations and make the handles move instantly to the new position.

<script>
  let value = 50;
  let spring = true;
  const jump = () => value > 50 ? value = 5 : value = 95;
</script>

<RangeSlider bind:value bind:spring />

<div data-flex>
  <label for="springEnabled1">
    <input bind:checked={spring} id="springEnabled1" type="checkbox" /> 
    Enable Spring?
  </label>

<button type="button" on:click={jump}>
  {spring ? 'Smoothly Change' : 'Change Instantly'}
</button>
</div>

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.

springValues={{ stiffness: 0.15, damping: 0.4 }}

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

Springs for suggestions

Here’s a bunch of spring configs which you can use to test the spring easing. If you like the way one feels, you can copy the settings in to your own project!

I’m sure you’ll agree the default setting I chose is pretty darn good!