Limits

Sometimes it may be desired to show a range from (let’s say) 0-100, but only allow the user to select a range from 20-80. This can be achieved by setting the limits property to an array of [20, 80].

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

<RangeSlider limits={[20,80]} pips bind:value />
<RangeSlider limits={[20,80]} range pips pushy bind:values />

Limits with Min and Max

It’s possible to use the limits property alongside a ‘min’ or ‘max’ range, too!

<script>
  let values = [50];
</script>

<RangeSlider limits={[20,80]} range="min" pips bind:values />
<RangeSlider limits={[20,80]} range="max" pips bind:values />

Styling Outside of the Limits

Any pip that falls outside of the limits will be given the pip-out-of-limit class. This can be used to style the pips differently when they are outside of the limits.

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

<RangeSlider limits={[20,80]} id="sliderLimits" range pips bind:values />

  /* Customize the slider's colors using the variables */
  #sliderLimits {
    --range-slider: #d096a6;
    --range-range-limit: rgb(0, 30, 56);
    --handle: #2ad872df;
    --handle-focus: #2ad872df;
    --handle-inactive: #2ad872df;
    --range-range-inactive: #2ad872df;
  }

  #sliderLimits .rangeBar {
    border-radius: 0;
    height: 22px;
    top: -7px;
  }