Range

A stand-out feature which makes this component considerably better than the standard <input type="range"> is the range property. This Boolean allows two values to appear as a selected range, and also prevents the handles from going past each other.

<script>
  let values = [20,80,100,0];
</script>

<RangeSlider range pips bind:values />

Range as Min and Max

Aside from a Boolean, the range property can also accept "min" or "max" values. This will set the range visual to begin from the min value, or extend to the max value, respectively.

<script>
  let values = [50, 20, 80];
</script>

<RangeSlider range="min" pips bind:values />
<RangeSlider range="max" pips bind:values />

Pushy Range Handles

When applying a range, the two handles are not allowed to pass each other, and by default they will block each other from moving. But by applying the pushy property to the Slider, it will allow each handle to push the other one along when they collide.

<script>
  let values = [40,60];
</script>

<div data-grid>
  <RangeSlider range pushy pips bind:values />
  <RangeSlider range pips bind:values />
</div>
<strong><em>Try pushing one handle into the other handle.</em></strong>

This can be combined with the rangeGapMin property to set a minimum between the handles and prevent the handles overlapping.

Draggy Ranges

As of version 4.0.0, it is now possible to select the range between handles and drag to move the entire range either direction.

<script>
  let values = [30,70];

  const echo = (e) => {
    // view your console to see the difference in event 
    // details when dragging the range area
    console.log(e.detail);
  }
</script>

<RangeSlider range draggy pips bind:values on:change={echo} />
<RangeSlider range pips bind:values on:change={echo} />

This can be combined with the rangeGapMin and rangeGapMax properties to set a minimum or maximum distance between the handles and prevent ‘squashing’ at the slider limits.

Styling Range

Something to notice is that when a pip falls inside of the range, it is given a special css class so it can be differentiated as in-range. Here I am using the rsInRange class to style the pip differently when it is in-range.

Here I’m using the id prop to give the Slider a unique identifier styling.

<script>
  let values = [20,80];
</script>

<RangeSlider id="sliderInRange" range pips bind:values />

Multiple Ranges

Unfortunately due to the immense complexity, multiple ranges are not currently supported as a prop on the slider. However, it’s possible to fake multiple ranges by applying a gradient to the rangeBar element, and setting the range values on the style prop.

This is demonstrated in the Multi-Range recipe.

Range from center

Another possible use case—range from center—is not really supported out of the box, as it is a very specific edge case. However, it is possible to achieve this by using a combination of the style and class props with a bit of JS/CSS.

This is demonstrated in the Positive/Negative recipe.