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>

Pushy (with gap)

Although it’s not an official feature (yet?), it’s possible to set a gap between the handles when the pushy property is set to true. This is done by updating the values of the slider when the user drags the handles.

<script>
  let values = [40,60];
  let min = 0;
  let max = 100;
  let gap = 15;

  /**
   * maintain a distance of 1 between the handles when
   * the user is dragging the handle
   */
   const slide = ({ detail }) => {
    if (detail.activeHandle === 0 && values[1] < detail.value + gap) {
      values[1] = detail.value + gap;
    }
    if (detail.activeHandle === 1 && values[0] > detail.value - gap) {
      values[0] = detail.value - gap;
    }
  };

  /**
   * enforce the gap between the handles when the user
   * stops dragging the handle
   */
  const stop = ({ detail }) => {
    if (detail.activeHandle === 0 && detail.value >= max - gap) {
      values[0] = max - gap;
    }
    if (detail.activeHandle === 1 && detail.value <= min + gap) {
      values[1] = min + gap;
    }
  };
</script>

<RangeSlider range pushy pips bind:values on:change={slide} on:stop={stop} {min } {max} />

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 pip-in-range class to style the pip differently when it is in-range.

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

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