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.

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

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