Float

By passing the float prop to the component, we can have a nice label which floats above the handle and shows the current value.

Floats can be formatted separately to the pips by using custom handleFormatter functions.

<RangeSlider float />

Float without Hover

The Slider can be initialised with hoverable set false which will prevent the float from appearing on hover.

<RangeSlider float />
<RangeSlider float hoverable={false} />

Floats on the Range

In version 4.0.0 we added the ability to have a float on the range (area between handles). This is useful for when you want to show the current value of the range.

Hover/Drag the Slider handles below to see the float

<RangeSlider rangeFloat float />

Always show the floats

We can set the floats to always be visible by modifying the css slightly. This can either be done in an external css file or inline in the Svelte component.

<RangeSlider id="always" float range bind:values />

<style>
  /* to style inside of a Svelte component, we need to use :global() */
  :global(#always .rangeFloat) {
    opacity: 1;
    translate: -50% 0%;
  }
</style>

/* styling in an external css file */
#always .rangeFloat {
  opacity: 1;
  translate: -50% 0%;
}

Focus on load

It’s possible to focus the slider on load with a little bit of javascript.

<script>
  let slider;

  $: if ( slider ) {
    slider.querySelector('.rangeHandle').focus();
  }
</script>

<RangeSlider bind:slider float />

Automatically toggle rangeFloat

Here we demonstrate a simple example of how to toggle the rangeFloat and float properties based on the distance between the handles.

<script>
  let values = [25,75];

</script>

<RangeSlider 
  id="toggle-range-float"
  bind:values 
  range
  rangeFloat={values[1] - values[0] < 22} 
  float={values[1] - values[0] >= 22} 
/>

<p>Try dragging the handles close to each other</p>

#toggle-range-float .rangeFloat {
  opacity: 1;
  translate: -50% -20% 0.01px;
  animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
}

This simple example is using the values property to toggle the rangeFloat and float properties. But it would be possible to use the on:change event, and calculate the pixel-distance between the handles, if that was a better approach for your use case.

Keep Float inside container

If your slider has very long float labels—and is positioned close to the edge of the browser or its parent container—you may find the floats extend past the boundaries and look terrible.

One way to keep floats inside is by using a simple css calc() to re-position the floats based on the handle’s position.

<script>
  let value = 80;

</script>

<div class="container">

  <RangeSlider 
    id="auto-position"
    bind:value 
    float
    handleFormatter={value => `Stays Inside Container @ ${(value * -0.6 - 20).toFixed(1)}%`}
  />

  <p>Move the handle from left-right</p>

  <RangeSlider 
    bind:value 
    float
    handleFormatter={value => `Overflows Container @ ${value}%`}
  />

</div>

<style>
  .container {
    overflow: hidden;
    padding-inline: 1em;
  }

  :global(.container .rangeSlider .rangeFloat) {
    opacity: 1;
    translate: -50% -20% 0.01px;
  }
</style>

#auto-position .rangeFloat {
  
  --float-x: calc((var(--handle-pos) * -0.6% - 20%)); /* offset the float horizontally */
  --float-y: -20%; /* offset the float vertically */
  
  /* keep the float inside the container by shifting it 
     based on handle's position */
  translate: var(--float-x) var(--float-y) 0.01px;
}