add reversed

src/components/Demos/examples/reversed/Reversed.svelte

@@ -0,0 +1,8 @@
+<script>
+  import RangeSlider from 'svelte-range-slider-pips';
+  let values = [30,70];
+</script>
+
+<RangeSlider reversed pips all="label" float range bind:values pipstep={20} />
+
+<code data-values title="The output slider values">{values}</code>

src/components/Demos/examples/reversed/ReversedVertical.svelte

@@ -0,0 +1,32 @@
+<script>
+  import RangeSlider from 'svelte-range-slider-pips';
+  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>
+
+<code data-values title="The output slider values">{values}</code>
+
+
+<style hide>
+  [data-grid] {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 10px;
+    justify-items: center;
+  }
+  [data-grid] :global(.rangeSlider) {
+    margin: 2em 0 1em -2em!important;
+  }
+  [data-grid] p {
+    grid-row: 2;
+  }
+</style>

src/content/docs/en/examples/reversed.mdx

@@ -0,0 +1,42 @@
+---
+title: 'Reversed'
+description: 'Should the min/max orientation be in the reverse orientation?'
+---
+import { Code } from 'astro/components';
+import RangeSlider from 'svelte-range-slider-pips';
+import { cleanImport } from '~lib/cleanImport.ts';
+
+import Demo from '~components/Reusable/Demo.svelte';
+import Note from '~components/Reusable/Note.astro';
+import Info from '~components/Reusable/Info.astro'
+
+import Reversed from '~demos/examples/reversed/Reversed.svelte';
+import ReversedRaw from '~demos/examples/reversed/Reversed.svelte?raw';
+
+import ReversedVertical from '~demos/examples/reversed/ReversedVertical.svelte';
+import ReversedVerticalRaw from '~demos/examples/reversed/ReversedVertical.svelte?raw';
+
+
+
+
+
+
+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.
+
+<Demo name="Reversing Values & Labels" client:visible>
+  <Reversed client:visible />
+  <Code slot="svelte" code={cleanImport(ReversedRaw)} lang="svelte" />
+</Demo>
+
+
+
+### Vertical
+
+Another use case for `reversed` is when doing a `vertical` slider 
+where you need the `min` value to be at the top.
+
+<Demo name="Vertical in Reverse" client:visible>
+  <ReversedVertical client:visible />
+  <Code slot="svelte" code={cleanImport(ReversedVerticalRaw)} lang="svelte" />
+</Demo>

src/content/docs/en/options.mdx

@@ -105,7 +105,7 @@ configure it to your liking. There's a link to an example for each option.
   <Info>For more complex suffixes, use the `formatter` property</Info>
 </Option>
 
-<Option propName="reversed" propType="Boolean" defaultValue="false" link="#">
+<Option propName="reversed" propType="Boolean" defaultValue="false" link="reversed">
   Reverse the orientation of min/max
 </Option>