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 rsOutOfLimit class. This can be used to style the pips differently when they are outside of the limits.

Alternatively, if you only want to modify the colours; then you can use the slider’s CSS variables to change the colours of the pips, range, handles, etc.

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

#sliderLimits .rsOutOfLimit {
  /* Hide the pips that are outside of the limits */
  opacity: 0;
}

#sliderLimits .rangeLimit {
  /* Customize the range limit */
  height: 16px;
  top: -4px;
}

#sliderLimits .rangeBar {
  /* Customize the range bar */
  border-radius: 0;
  height: 22px;
  top: -7px;
}