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.

Hover/Drag the Slider handles below to see the float

<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} />

We can set the floats to always be visible by modifying the css slightly.

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

<style>
  :global(#always .rangeFloat) {
    opacity: 1;
  }
</style>

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 />