Reversed

Setting reversed to true will reverse the orientation of the Slider so that the min and max values are swapped. This is useful for RTL languages.

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

<RangeSlider reversed pips all="label" float range bind:values pipstep={20} />
Reversing Values & Labels
30 70
020 40 60 80 100
30,70

Vertical

Another use case for reversed is when doing a vertical slider where you need the min value to be at the top.

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

<div data-grid>

  <p>Normal</p>
  <RangeSlider vertical pips all="label" float range bind:values pipstep={20} />

  <p>Reversed</p>
  <RangeSlider reversed vertical pips all="label" float range bind:values pipstep={20} />

</div>
Vertical in Reverse

Normal

0 60
020 40 60 80 100

Reversed

0 60
020 40 60 80 100
0,60