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 
  bind:values 
  range
  rangeFloat={values[1] - values[0] < 30} 
  float={values[1] - values[0] >= 30} 
/>

<p>Try dragging the handles to see the floats toggle</p>