Range Gaps (min/max)

As of version 4.0.0, it is now possible to set a minimum or maximum distance between the handles. This is done by setting the rangeGapMin and rangeGapMax properties.

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

<div data-grid>
  <RangeSlider range rangeGapMin={10} pips bind:values />
  <RangeSlider range rangeGapMax={50} pips bind:values />
  <RangeSlider range rangeGapMin={10} rangeGapMax={50} pips bind:values />
</div>

Pushy (with gap)

The example above doesn’t really feel good. The user might need to move the handles multiple times to get the range to the desired position.

So I would advise to almost always set the pushy property to true when using rangeGapMin or rangeGapMax.

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

<div data-grid>
  <RangeSlider range rangeGapMin={10} pushy pips bind:values />
  <RangeSlider range rangeGapMax={50} pushy pips bind:values />
  <RangeSlider range rangeGapMin={10} rangeGapMax={50} pushy pips bind:values />
</div>

Fixed range gap

Another use-case may be to make a fixed-size range which can be moved along the slider, but without allowing the user to change the size of the range.

To enable this we will also need to turn on draggy to allow user to drag the range, and pushy to allow each handle to push/pull the other handle.

To make this example even nicer, there’s a new rangeFloat property which allows combining the float values from both handles into a single float over the range.

<script>
  const gap = 20;
  let values = [40, 40 + gap];
</script>

<RangeSlider 
  range 
  rangeGapMin={gap} 
  rangeGapMax={gap}
  rangeFloat 
  draggy 
  pushy 
  pips 
  bind:values 
/>

<strong><em>Try dragging the range to move it.</em></strong>