@onereach/ui-components 8.19.5 → 8.20.0

package/dist/bundled/v2/components/OrRangeSliderV3/OrRangeSlider.js

@@ -18,19 +18,19 @@ var script = defineComponent({
   props: {
     modelValue: {
       type: Object,
-      default: undefined
+      default: () => undefined
     },
     minValue: {
       type: Number,
-      default: 0
+      default: () => 0
     },
     maxValue: {
       type: Number,
-      default: 100
+      default: () => 100
     },
     step: {
       type: Number,
-      default: 1
+      default: () => 1
     },
     breakpoints: {
       type: Array,
@@ -46,7 +46,7 @@ var script = defineComponent({
     },
     disabled: {
       type: Boolean,
-      default: false
+      default: () => false
     }
   },
   emits: ['update:modelValue'],
@@ -64,13 +64,35 @@ var script = defineComponent({
     const rootStyles = computed(() => ['or-range-slider-v3', ...RangeSlider, ...RangeSliderOrientations[props.orientation]]);
     const railStyles = computed(() => ['or-range-slider-rail-v3', ...RangeSliderRail, ...RangeSliderRailOrientations[props.orientation]]);
     const offsetStyles = computed(() => [...RangeSliderOffset, ...RangeSliderOffsetOrientations[props.orientation]]);
-    const offsetComputedStyles = computed(() => ({
-      [props.orientation === SliderOrientation.Horizontal ? 'width' : 'height']: `${internalModelValueFrom.value * 100}%`
-    }));
+    const offsetComputedStyles = computed(() => {
+      switch (props.orientation) {
+        case SliderOrientation.Horizontal:
+        case SliderOrientation.HorizontalReversed:
+          return {
+            width: `${internalModelValueFrom.value * 100}%`
+          };
+        case SliderOrientation.Vertical:
+        case SliderOrientation.VerticalReversed:
+          return {
+            height: `${internalModelValueFrom.value * 100}%`
+          };
+      }
+    });
     const trackStyles = computed(() => [...RangeSliderTrack, ...RangeSliderTrackColors[props.color]]);
-    const trackComputedStyles = computed(() => ({
-      [props.orientation === SliderOrientation.Horizontal ? 'width' : 'height']: `${(internalModelValueTo.value - internalModelValueFrom.value) * 100}%`
-    }));
+    const trackComputedStyles = computed(() => {
+      switch (props.orientation) {
+        case SliderOrientation.Horizontal:
+        case SliderOrientation.HorizontalReversed:
+          return {
+            width: `${(internalModelValueTo.value - internalModelValueFrom.value) * 100}%`
+          };
+        case SliderOrientation.Vertical:
+        case SliderOrientation.VerticalReversed:
+          return {
+            height: `${(internalModelValueTo.value - internalModelValueFrom.value) * 100}%`
+          };
+      }
+    });
     const thumbStyles = computed(() => ['or-range-slider-thumb-v3', ...RangeSliderThumb, ...RangeSliderThumbColors[props.color]]);
     const breakpointMarkStyles = computed(() => [...RangeSliderBreakpointMark, ...RangeSliderBreakpointMarkColors[props.color]]);
     const labelStyles = computed(() => [...RangeSliderLabel, ...RangeSliderLabelOrientations[props.orientation]]);
@@ -81,24 +103,66 @@ var script = defineComponent({
     });
     const internalModelValueFrom = computed({
       get: () => {
-        return (proxyModelValue.value[0] - props.minValue) / (props.maxValue - props.minValue);
+        let modelValue = 0;
+        switch (props.orientation) {
+          case SliderOrientation.Horizontal:
+          case SliderOrientation.Vertical:
+            modelValue = proxyModelValue.value[0];
+            break;
+          case SliderOrientation.HorizontalReversed:
+          case SliderOrientation.VerticalReversed:
+            modelValue = proxyModelValue.value[1];
+            break;
+        }
+        return (modelValue - props.minValue) / (props.maxValue - props.minValue);
       },
       set: value => {
         const modelValue = value * (props.maxValue - props.minValue) + props.minValue;
-        proxyModelValue.value = [internalBreakpoints.value.reduce((a, b) => {
+        const draftProxyModelValue = [internalBreakpoints.value.reduce((a, b) => {
           return Math.abs(a - modelValue) < Math.abs(b - modelValue) ? a : b;
         }), internalModelValueTo.value * (props.maxValue - props.minValue) + props.minValue];
+        switch (props.orientation) {
+          case SliderOrientation.Horizontal:
+          case SliderOrientation.Vertical:
+            proxyModelValue.value = draftProxyModelValue;
+            break;
+          case SliderOrientation.HorizontalReversed:
+          case SliderOrientation.VerticalReversed:
+            proxyModelValue.value = draftProxyModelValue.reverse();
+            break;
+        }
       }
     });
     const internalModelValueTo = computed({
       get: () => {
-        return (proxyModelValue.value[1] - props.minValue) / (props.maxValue - props.minValue);
+        let modelValue = 0;
+        switch (props.orientation) {
+          case SliderOrientation.Horizontal:
+          case SliderOrientation.Vertical:
+            modelValue = proxyModelValue.value[1];
+            break;
+          case SliderOrientation.HorizontalReversed:
+          case SliderOrientation.VerticalReversed:
+            modelValue = proxyModelValue.value[0];
+            break;
+        }
+        return (modelValue - props.minValue) / (props.maxValue - props.minValue);
       },
       set: value => {
         const modelValue = value * (props.maxValue - props.minValue) + props.minValue;
-        proxyModelValue.value = [internalModelValueFrom.value * (props.maxValue - props.minValue) + props.minValue, internalBreakpoints.value.reduce((a, b) => {
+        const draftProxyModelValue = [internalModelValueFrom.value * (props.maxValue - props.minValue) + props.minValue, internalBreakpoints.value.reduce((a, b) => {
           return Math.abs(a - modelValue) < Math.abs(b - modelValue) ? a : b;
         })];
+        switch (props.orientation) {
+          case SliderOrientation.Horizontal:
+          case SliderOrientation.Vertical:
+            proxyModelValue.value = draftProxyModelValue;
+            break;
+          case SliderOrientation.HorizontalReversed:
+          case SliderOrientation.VerticalReversed:
+            proxyModelValue.value = draftProxyModelValue.reverse();
+            break;
+        }
       }
     });
     const internalBreakpoints = computed(() => {
@@ -108,6 +172,16 @@ var script = defineComponent({
       return Array(Math.ceil(Math.abs(props.maxValue - props.minValue) / props.step)).fill(null).map((value, index) => Math.floor((props.minValue + props.step * index) * 1000) / 1000).concat(...props.breakpoints, props.maxValue).sort((a, b) => a - b);
     });
     const railBoundingBox = useElementBounding(rail);
+    const tooltipPlacement = computed(() => {
+      switch (props.orientation) {
+        case SliderOrientation.Horizontal:
+        case SliderOrientation.HorizontalReversed:
+          return 'top';
+        case SliderOrientation.Vertical:
+        case SliderOrientation.VerticalReversed:
+          return 'right';
+      }
+    });
     const selectedControl = ref();
     // Handlers
     function onDrag(position, event) {
@@ -117,12 +191,59 @@ var script = defineComponent({
       const totalWidth = railBoundingBox.width.value;
       const totalHeight = railBoundingBox.height.value;
       if (selectedControl.value === 'from') {
-        internalModelValueFrom.value = props.orientation === SliderOrientation.Horizontal ? clamp(event.clientX - railBoundingBox.left.value, 0, internalModelValueTo.value * totalWidth) / totalWidth : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), 0, internalModelValueTo.value * totalHeight) / totalHeight;
+        switch (props.orientation) {
+          case SliderOrientation.Horizontal:
+            internalModelValueFrom.value = clamp(event.clientX - railBoundingBox.left.value, 0, internalModelValueTo.value * totalWidth) / totalWidth;
+            break;
+          case SliderOrientation.HorizontalReversed:
+            internalModelValueFrom.value = clamp(railBoundingBox.right.value - event.clientX, 0, internalModelValueTo.value * totalWidth) / totalWidth;
+            break;
+          case SliderOrientation.Vertical:
+            internalModelValueFrom.value = clamp(totalHeight - (event.clientY - railBoundingBox.top.value), 0, internalModelValueTo.value * totalHeight) / totalHeight;
+            break;
+          case SliderOrientation.VerticalReversed:
+            internalModelValueFrom.value = clamp(totalHeight - (railBoundingBox.bottom.value - event.clientY), 0, internalModelValueTo.value * totalHeight) / totalHeight;
+            break;
+        }
       } else {
-        internalModelValueTo.value = props.orientation === SliderOrientation.Horizontal ? clamp(event.clientX - railBoundingBox.left.value, internalModelValueFrom.value * totalWidth, totalWidth) / totalWidth : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), internalModelValueFrom.value * totalHeight, totalHeight) / totalHeight;
+        switch (props.orientation) {
+          case SliderOrientation.Horizontal:
+            internalModelValueTo.value = clamp(event.clientX - railBoundingBox.left.value, internalModelValueFrom.value * totalWidth, totalWidth) / totalWidth;
+            break;
+          case SliderOrientation.HorizontalReversed:
+            internalModelValueTo.value = clamp(railBoundingBox.right.value - event.clientX, internalModelValueFrom.value * totalWidth, totalWidth) / totalWidth;
+            break;
+          case SliderOrientation.Vertical:
+            internalModelValueTo.value = clamp(totalHeight - (event.clientY - railBoundingBox.top.value), internalModelValueFrom.value * totalHeight, totalHeight) / totalHeight;
+            break;
+          case SliderOrientation.VerticalReversed:
+            internalModelValueTo.value = clamp(totalHeight - (railBoundingBox.bottom.value - event.clientY), internalModelValueFrom.value * totalHeight, totalHeight) / totalHeight;
+            break;
+        }
       }
     }
     // Methods
+    function getBreakpointMarkComputedStyles(breakpoint) {
+      switch (props.orientation) {
+        case SliderOrientation.Horizontal:
+          return {
+            left: `${getBreakpointOffset(breakpoint) * 100}%`
+          };
+        case SliderOrientation.HorizontalReversed:
+          return {
+            right: `${getBreakpointOffset(breakpoint) * 100}%`
+          };
+        case SliderOrientation.Vertical:
+          return {
+            bottom: `${getBreakpointOffset(breakpoint) * 100}%`
+          };
+        case SliderOrientation.VerticalReversed:
+          return {
+            top: `${getBreakpointOffset(breakpoint) * 100}%`
+          };
+      }
+    }
+    // Helpers
     function getBreakpointOffset(breakpoint) {
       return (breakpoint - props.minValue) / (props.maxValue - props.minValue);
     }
@@ -188,8 +309,9 @@ var script = defineComponent({
       labelStyles,
       labelMarkStyles,
       proxyModelValue,
+      tooltipPlacement,
       selectedControl,
-      getBreakpointOffset,
+      getBreakpointMarkComputedStyles,
       isHoveringOffset,
       isHoveringTrack,
       isHoveringFiller,
@@ -232,8 +354,8 @@ var __vue_render__ = function () {
     class: ['relative', 'z-10'],
     attrs: {
       "is-open": !_vm.isDragging && (_vm.isHoveringRail || _vm.isHoveringThumbFrom) || _vm.isDragging && _vm.selectedControl === 'from',
-      "content": String(_vm.proxyModelValue[0]),
-      "placement": _vm.orientation === 'horizontal' ? 'top' : 'right',
+      "content": String(_vm.proxyModelValue[_vm.orientation.endsWith('-reversed') ? 1 : 0]),
+      "placement": _vm.tooltipPlacement,
       "offset": 24,
       "external-control": true
     }
@@ -254,8 +376,8 @@ var __vue_render__ = function () {
     class: ['relative', 'z-10'],
     attrs: {
       "is-open": !_vm.isDragging && (_vm.isHoveringRail || _vm.isHoveringThumbTo) || _vm.isDragging && _vm.selectedControl === 'to',
-      "content": String(_vm.proxyModelValue[1]),
-      "placement": _vm.orientation === 'horizontal' ? 'top' : 'right',
+      "content": String(_vm.proxyModelValue[_vm.orientation.endsWith('-reversed') ? 0 : 1]),
+      "placement": _vm.tooltipPlacement,
       "offset": 24,
       "external-control": true
     }
@@ -272,13 +394,12 @@ var __vue_render__ = function () {
       "disabled": _vm.disabled
     }
   }), _vm._v(" "), _vm._l(_vm.breakpoints, function (breakpoint) {
-    var _obj;
     return _c('div', {
       key: breakpoint,
       class: _vm.breakpointMarkStyles,
-      style: (_obj = {}, _obj[_vm.orientation === 'horizontal' ? 'left' : 'bottom'] = _vm.getBreakpointOffset(breakpoint) * 100 + "%", _obj),
+      style: _vm.getBreakpointMarkComputedStyles(breakpoint),
       attrs: {
-        "activated": breakpoint >= _vm.proxyModelValue[0] && breakpoint <= _vm.proxyModelValue[1],
+        "activated": breakpoint >= _vm.proxyModelValue[_vm.orientation.endsWith('-reversed') ? 1 : 0] && breakpoint <= _vm.proxyModelValue[_vm.orientation.endsWith('-reversed') ? 0 : 1],
         "disabled": _vm.disabled
       }
     });

package/dist/bundled/v2/components/OrRangeSliderV3/OrRangeSlider.vue.d.ts

@@ -12,19 +12,28 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     railStyles: import("@vue/composition-api").ComputedRef<string[]>;
     offsetStyles: import("@vue/composition-api").ComputedRef<string[]>;
     offsetComputedStyles: import("@vue/composition-api").ComputedRef<{
-        [x: string]: string;
-    }>;
+        width: string;
+        height?: undefined;
+    } | {
+        height: string;
+        width?: undefined;
+    } | undefined>;
     trackStyles: import("@vue/composition-api").ComputedRef<string[]>;
     trackComputedStyles: import("@vue/composition-api").ComputedRef<{
-        [x: string]: string;
-    }>;
+        width: string;
+        height?: undefined;
+    } | {
+        height: string;
+        width?: undefined;
+    } | undefined>;
     thumbStyles: import("@vue/composition-api").ComputedRef<string[]>;
     breakpointMarkStyles: import("@vue/composition-api").ComputedRef<string[]>;
     labelStyles: import("@vue/composition-api").ComputedRef<string[]>;
     labelMarkStyles: import("@vue/composition-api").ComputedRef<string[]>;
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<[number, number]>;
+    tooltipPlacement: import("@vue/composition-api").ComputedRef<"top" | "right" | undefined>;
     selectedControl: import("@vue/composition-api").Ref<"from" | "to" | undefined>;
-    getBreakpointOffset: (breakpoint: number) => number;
+    getBreakpointMarkComputedStyles: (breakpoint: number) => Partial<CSSStyleDeclaration> | undefined;
     isHoveringOffset: import("@vue/composition-api").Ref<boolean>;
     isHoveringTrack: import("@vue/composition-api").Ref<boolean>;
     isHoveringFiller: import("@vue/composition-api").Ref<boolean>;
@@ -35,19 +44,19 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
         type: PropType<[number, number]>;
-        default: undefined;
+        default: () => undefined;
     };
     minValue: {
         type: NumberConstructor;
-        default: number;
+        default: () => 0;
     };
     maxValue: {
         type: NumberConstructor;
-        default: number;
+        default: () => 100;
     };
     step: {
         type: NumberConstructor;
-        default: number;
+        default: () => 1;
     };
     breakpoints: {
         type: PropType<number[]>;
@@ -58,29 +67,29 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: () => RangeSliderColor.Primary;
     };
     orientation: {
-        type: PropType<"horizontal" | "vertical">;
+        type: PropType<"horizontal" | "horizontal-reversed" | "vertical" | "vertical-reversed">;
         default: () => RangeSliderOrientation.Horizontal;
     };
     disabled: {
         type: BooleanConstructor;
-        default: boolean;
+        default: () => false;
     };
 }, import("@vue/composition-api").ExtractPropTypes<{
     modelValue: {
         type: PropType<[number, number]>;
-        default: undefined;
+        default: () => undefined;
     };
     minValue: {
         type: NumberConstructor;
-        default: number;
+        default: () => 0;
     };
     maxValue: {
         type: NumberConstructor;
-        default: number;
+        default: () => 100;
     };
     step: {
         type: NumberConstructor;
-        default: number;
+        default: () => 1;
     };
     breakpoints: {
         type: PropType<number[]>;
@@ -91,12 +100,12 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: () => RangeSliderColor.Primary;
     };
     orientation: {
-        type: PropType<"horizontal" | "vertical">;
+        type: PropType<"horizontal" | "horizontal-reversed" | "vertical" | "vertical-reversed">;
         default: () => RangeSliderOrientation.Horizontal;
     };
     disabled: {
         type: BooleanConstructor;
-        default: boolean;
+        default: () => false;
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     modelValue: [number, number];
@@ -105,7 +114,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     step: number;
     breakpoints: number[];
     color: "primary" | "secondary";
-    orientation: "horizontal" | "vertical";
+    orientation: "horizontal" | "horizontal-reversed" | "vertical" | "vertical-reversed";
     disabled: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
@@ -121,19 +130,28 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     railStyles: import("@vue/composition-api").ComputedRef<string[]>;
     offsetStyles: import("@vue/composition-api").ComputedRef<string[]>;
     offsetComputedStyles: import("@vue/composition-api").ComputedRef<{
-        [x: string]: string;
-    }>;
+        width: string;
+        height?: undefined;
+    } | {
+        height: string;
+        width?: undefined;
+    } | undefined>;
     trackStyles: import("@vue/composition-api").ComputedRef<string[]>;
     trackComputedStyles: import("@vue/composition-api").ComputedRef<{
-        [x: string]: string;
-    }>;
+        width: string;
+        height?: undefined;
+    } | {
+        height: string;
+        width?: undefined;
+    } | undefined>;
     thumbStyles: import("@vue/composition-api").ComputedRef<string[]>;
     breakpointMarkStyles: import("@vue/composition-api").ComputedRef<string[]>;
     labelStyles: import("@vue/composition-api").ComputedRef<string[]>;
     labelMarkStyles: import("@vue/composition-api").ComputedRef<string[]>;
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<[number, number]>;
+    tooltipPlacement: import("@vue/composition-api").ComputedRef<"top" | "right" | undefined>;
     selectedControl: import("@vue/composition-api").Ref<"from" | "to" | undefined>;
-    getBreakpointOffset: (breakpoint: number) => number;
+    getBreakpointMarkComputedStyles: (breakpoint: number) => Partial<CSSStyleDeclaration> | undefined;
     isHoveringOffset: import("@vue/composition-api").Ref<boolean>;
     isHoveringTrack: import("@vue/composition-api").Ref<boolean>;
     isHoveringFiller: import("@vue/composition-api").Ref<boolean>;
@@ -148,7 +166,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     step: number;
     breakpoints: number[];
     color: "primary" | "secondary";
-    orientation: "horizontal" | "vertical";
+    orientation: "horizontal" | "horizontal-reversed" | "vertical" | "vertical-reversed";
     disabled: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
@@ -159,7 +177,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     step: number;
     breakpoints: number[];
     color: "primary" | "secondary";
-    orientation: "horizontal" | "vertical";
+    orientation: "horizontal" | "horizontal-reversed" | "vertical" | "vertical-reversed";
     disabled: boolean;
 }, true>);
 export default _default;

package/dist/bundled/v2/components/OrRangeSliderV3/styles.js

@@ -9,10 +9,20 @@ const RangeSliderOrientations = {
   'layout-column',
   // Box
   'w-full'],
+  [SliderOrientation.HorizontalReversed]: [
+  // Layout
+  'layout-column',
+  // Box
+  'w-full'],
   [SliderOrientation.Vertical]: [
   // Layout
   'layout-row',
   // Box
+  'h-full'],
+  [SliderOrientation.VerticalReversed]: [
+  // Layout
+  'layout-row',
+  // Box
   'h-full']
 };
 const RangeSliderRail = [
@@ -32,12 +42,26 @@ const RangeSliderRailOrientations = {
   'w-full', 'h-xs',
   // Spacing
   'mx-0', 'my-md+'],
+  [SliderOrientation.HorizontalReversed]: [
+  // Layout
+  'layout-row-reverse',
+  // Box
+  'w-full', 'h-xs',
+  // Spacing
+  'mx-0', 'my-md+'],
   [SliderOrientation.Vertical]: [
   // Layout
   'layout-column-reverse items-center',
   // Box
   'w-xs', 'h-full',
   // Spacing
+  'mx-md+', 'my-0'],
+  [SliderOrientation.VerticalReversed]: [
+  // Layout
+  'layout-column items-center',
+  // Box
+  'w-xs', 'h-full',
+  // Spacing
   'mx-md+', 'my-0']
 };
 const RangeSliderOffset = [];
@@ -45,8 +69,14 @@ const RangeSliderOffsetOrientations = {
   [SliderOrientation.Horizontal]: [
   // Box
   'h-full'],
+  [SliderOrientation.HorizontalReversed]: [
+  // Box
+  'h-full'],
   [SliderOrientation.Vertical]: [
   // Box
+  'w-full'],
+  [SliderOrientation.VerticalReversed]: [
+  // Box
   'w-full']
 };
 const RangeSliderTrack = [
@@ -121,10 +151,20 @@ const RangeSliderLabelOrientations = {
   'layout-row',
   // Box
   'w-full'],
+  [SliderOrientation.HorizontalReversed]: [
+  // Layout
+  'layout-row-reverse',
+  // Box
+  'w-full'],
   [SliderOrientation.Vertical]: [
   // Layout
   'layout-column-reverse items-center',
   // Box
+  'h-full'],
+  [SliderOrientation.VerticalReversed]: [
+  // Layout
+  'layout-column items-center',
+  // Box
   'h-full']
 };
 const RangeSliderLabelMark = [

package/dist/bundled/v2/components/OrSliderV3/OrSlider.js

@@ -18,19 +18,19 @@ var script = defineComponent({
   props: {
     modelValue: {
       type: Number,
-      default: undefined
+      default: () => undefined
     },
     minValue: {
       type: Number,
-      default: 0
+      default: () => 0
     },
     maxValue: {
       type: Number,
-      default: 100
+      default: () => 100
     },
     step: {
       type: Number,
-      default: 1
+      default: () => 1
     },
     breakpoints: {
       type: Array,
@@ -46,7 +46,7 @@ var script = defineComponent({
     },
     disabled: {
       type: Boolean,
-      default: false
+      default: () => false
     }
   },
   emits: ['update:modelValue'],
@@ -60,9 +60,20 @@ var script = defineComponent({
     const rootStyles = computed(() => ['or-slider-v3', ...Slider, ...SliderOrientations[props.orientation]]);
     const railStyles = computed(() => ['or-slider-rail-v3', ...SliderRail, ...SliderRailOrientations[props.orientation]]);
     const trackStyles = computed(() => [...SliderTrack, ...SliderTrackColors[props.color]]);
-    const trackComputedStyles = computed(() => ({
-      [props.orientation === SliderOrientation.Horizontal ? 'width' : 'height']: `${internalModelValue.value * 100}%`
-    }));
+    const trackComputedStyles = computed(() => {
+      switch (props.orientation) {
+        case SliderOrientation.Horizontal:
+        case SliderOrientation.HorizontalReversed:
+          return {
+            width: `${internalModelValue.value * 100}%`
+          };
+        case SliderOrientation.Vertical:
+        case SliderOrientation.VerticalReversed:
+          return {
+            height: `${internalModelValue.value * 100}%`
+          };
+      }
+    });
     const thumbStyles = computed(() => ['or-slider-thumb-v3', ...SliderThumb, ...SliderThumbColors[props.color]]);
     const breakpointMarkStyles = computed(() => [...SliderBreakpointMark, ...SliderBreakpointMarkColors[props.color]]);
     const labelStyles = computed(() => [...SliderLabel, ...SliderLabelOrientations[props.orientation]]);
@@ -89,6 +100,16 @@ var script = defineComponent({
       return Array(Math.ceil(Math.abs(props.maxValue - props.minValue) / props.step)).fill(null).map((value, index) => Math.floor((props.minValue + props.step * index) * 1000) / 1000).concat(...props.breakpoints, props.maxValue).sort((a, b) => a - b);
     });
     const railBoundingBox = useElementBounding(rail);
+    const tooltipPlacement = computed(() => {
+      switch (props.orientation) {
+        case SliderOrientation.Horizontal:
+        case SliderOrientation.HorizontalReversed:
+          return 'top';
+        case SliderOrientation.Vertical:
+        case SliderOrientation.VerticalReversed:
+          return 'right';
+      }
+    });
     // Handlers
     function onDrag(position, event) {
       if (props.disabled) {
@@ -96,9 +117,43 @@ var script = defineComponent({
       }
       const totalWidth = railBoundingBox.width.value;
       const totalHeight = railBoundingBox.height.value;
-      internalModelValue.value = props.orientation === SliderOrientation.Horizontal ? clamp(event.clientX - railBoundingBox.left.value, 0, totalWidth) / totalWidth : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), 0, totalHeight) / totalHeight;
+      switch (props.orientation) {
+        case SliderOrientation.Horizontal:
+          internalModelValue.value = clamp(event.clientX - railBoundingBox.left.value, 0, totalWidth) / totalWidth;
+          break;
+        case SliderOrientation.HorizontalReversed:
+          internalModelValue.value = clamp(railBoundingBox.right.value - event.clientX, 0, totalWidth) / totalWidth;
+          break;
+        case SliderOrientation.Vertical:
+          internalModelValue.value = clamp(totalHeight - (event.clientY - railBoundingBox.top.value), 0, totalHeight) / totalHeight;
+          break;
+        case SliderOrientation.VerticalReversed:
+          internalModelValue.value = clamp(totalHeight - (railBoundingBox.bottom.value - event.clientY), 0, totalHeight) / totalHeight;
+          break;
+      }
     }
     // Methods
+    function getBreakpointMarkComputedStyles(breakpoint) {
+      switch (props.orientation) {
+        case SliderOrientation.Horizontal:
+          return {
+            left: `${getBreakpointOffset(breakpoint) * 100}%`
+          };
+        case SliderOrientation.HorizontalReversed:
+          return {
+            right: `${getBreakpointOffset(breakpoint) * 100}%`
+          };
+        case SliderOrientation.Vertical:
+          return {
+            bottom: `${getBreakpointOffset(breakpoint) * 100}%`
+          };
+        case SliderOrientation.VerticalReversed:
+          return {
+            top: `${getBreakpointOffset(breakpoint) * 100}%`
+          };
+      }
+    }
+    // Helpers
     function getBreakpointOffset(breakpoint) {
       return (breakpoint - props.minValue) / (props.maxValue - props.minValue);
     }
@@ -139,7 +194,8 @@ var script = defineComponent({
       labelStyles,
       labelMarkStyles,
       proxyModelValue,
-      getBreakpointOffset,
+      tooltipPlacement,
+      getBreakpointMarkComputedStyles,
       isHovering,
       isDragging
     };
@@ -177,7 +233,7 @@ var __vue_render__ = function () {
     attrs: {
       "is-open": _vm.isHovering || _vm.isDragging,
       "content": String(_vm.proxyModelValue),
-      "placement": _vm.orientation === 'horizontal' ? 'top' : 'right',
+      "placement": _vm.tooltipPlacement,
       "offset": 24,
       "external-control": true
     }
@@ -188,11 +244,10 @@ var __vue_render__ = function () {
       "disabled": _vm.disabled
     }
   })]), _vm._v(" "), _vm._l(_vm.breakpoints, function (breakpoint) {
-    var _obj;
     return _c('div', {
       key: breakpoint,
       class: _vm.breakpointMarkStyles,
-      style: (_obj = {}, _obj[_vm.orientation === 'horizontal' ? 'left' : 'bottom'] = _vm.getBreakpointOffset(breakpoint) * 100 + "%", _obj),
+      style: _vm.getBreakpointMarkComputedStyles(breakpoint),
       attrs: {
         "activated": breakpoint <= _vm.proxyModelValue,
         "disabled": _vm.disabled