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>

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