@onereach/ui-components 8.24.2-beta.4156.0 → 8.24.2-beta.4157.0

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

@@ -105,26 +105,59 @@ var script = defineComponent({
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
       defaultValue: computed(() => [props.minValue, props.maxValue])
     });
-    const internalModelValueFrom = computed({
+    watch(proxyModelValue, _ref => {
+      let [a, b] = _ref;
+      switch (props.orientation) {
+        case SliderOrientation.Horizontal:
+        case SliderOrientation.Vertical:
+          if (a > b) proxyModelValue.value = [b, a];
+          break;
+        case SliderOrientation.HorizontalReversed:
+        case SliderOrientation.VerticalReversed:
+          if (a < b) proxyModelValue.value = [b, a];
+          break;
+      }
+    });
+    const proxyModelValueFrom = computed({
       get: () => {
-        let modelValue = 0;
         switch (props.orientation) {
           case SliderOrientation.Horizontal:
           case SliderOrientation.Vertical:
-            modelValue = proxyModelValue.value[0];
+            return proxyModelValue.value[0];
+          case SliderOrientation.HorizontalReversed:
+          case SliderOrientation.VerticalReversed:
+            return proxyModelValue.value[1];
+        }
+        return props.minValue;
+      },
+      set: value => {
+        const draftProxyModelValue = [value !== null && value !== void 0 ? value : props.minValue, proxyModelValue.value[1]];
+        switch (props.orientation) {
+          case SliderOrientation.Horizontal:
+          case SliderOrientation.Vertical:
+            proxyModelValue.value = draftProxyModelValue;
             break;
           case SliderOrientation.HorizontalReversed:
           case SliderOrientation.VerticalReversed:
-            modelValue = proxyModelValue.value[1];
+            proxyModelValue.value = [draftProxyModelValue[1], draftProxyModelValue[0]];
             break;
         }
-        return (modelValue - props.minValue) / (props.maxValue - props.minValue);
+      }
+    });
+    const proxyModelValueTo = computed({
+      get: () => {
+        switch (props.orientation) {
+          case SliderOrientation.Horizontal:
+          case SliderOrientation.Vertical:
+            return proxyModelValue.value[1];
+          case SliderOrientation.HorizontalReversed:
+          case SliderOrientation.VerticalReversed:
+            return proxyModelValue.value[0];
+        }
+        return props.maxValue;
       },
       set: value => {
-        const modelValue = value * (props.maxValue - props.minValue) + props.minValue;
-        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];
+        const draftProxyModelValue = [proxyModelValue.value[0], value !== null && value !== void 0 ? value : props.maxValue];
         switch (props.orientation) {
           case SliderOrientation.Horizontal:
           case SliderOrientation.Vertical:
@@ -132,25 +165,35 @@ var script = defineComponent({
             break;
           case SliderOrientation.HorizontalReversed:
           case SliderOrientation.VerticalReversed:
-            proxyModelValue.value = draftProxyModelValue.reverse();
+            proxyModelValue.value = [draftProxyModelValue[1], draftProxyModelValue[0]];
             break;
         }
       }
     });
-    const internalModelValueTo = computed({
+    const internalModelValueFrom = computed({
       get: () => {
-        let modelValue = 0;
+        return (proxyModelValueFrom.value - props.minValue) / (props.maxValue - props.minValue);
+      },
+      set: value => {
+        const modelValue = value * (props.maxValue - props.minValue) + props.minValue;
+        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:
-            modelValue = proxyModelValue.value[1];
+            proxyModelValue.value = draftProxyModelValue;
             break;
           case SliderOrientation.HorizontalReversed:
           case SliderOrientation.VerticalReversed:
-            modelValue = proxyModelValue.value[0];
+            proxyModelValue.value = [draftProxyModelValue[1], draftProxyModelValue[0]];
             break;
         }
-        return (modelValue - props.minValue) / (props.maxValue - props.minValue);
+      }
+    });
+    const internalModelValueTo = computed({
+      get: () => {
+        return (proxyModelValueTo.value - props.minValue) / (props.maxValue - props.minValue);
       },
       set: value => {
         const modelValue = value * (props.maxValue - props.minValue) + props.minValue;
@@ -164,7 +207,7 @@ var script = defineComponent({
             break;
           case SliderOrientation.HorizontalReversed:
           case SliderOrientation.VerticalReversed:
-            proxyModelValue.value = draftProxyModelValue.reverse();
+            proxyModelValue.value = [draftProxyModelValue[1], draftProxyModelValue[0]];
             break;
         }
       }
@@ -175,7 +218,6 @@ 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:
@@ -186,7 +228,9 @@ var script = defineComponent({
           return 'right';
       }
     });
+    const highlightedBreakpoint = ref();
     const selectedControl = ref();
+    const railBoundingBox = useElementBounding(rail);
     // Handlers
     function onDrag(position, event) {
       if (props.disabled) {
@@ -226,6 +270,15 @@ var script = defineComponent({
         }
       }
     }
+    function onClick(breakpoint) {
+      if (selectedControl.value === 'from') {
+        proxyModelValueFrom.value = breakpoint;
+        selectedControl.value = 'to';
+      } else {
+        proxyModelValueTo.value = breakpoint;
+        selectedControl.value = 'from';
+      }
+    }
     // Methods
     function getBreakpointMarkComputedStyles(breakpoint) {
       switch (props.orientation) {
@@ -314,7 +367,9 @@ var script = defineComponent({
       labelMarkStyles,
       proxyModelValue,
       tooltipPlacement,
+      highlightedBreakpoint,
       selectedControl,
+      onClick,
       getBreakpointMarkComputedStyles,
       isHoveringOffset,
       isHoveringTrack,
@@ -425,6 +480,14 @@ var __vue_render__ = function () {
       attrs: {
         "activated": breakpoint >= _vm.proxyModelValue[_vm.orientation.endsWith('-reversed') ? 1 : 0] && breakpoint <= _vm.proxyModelValue[_vm.orientation.endsWith('-reversed') ? 0 : 1],
         "disabled": _vm.disabled
+      },
+      on: {
+        "mouseenter": function ($event) {
+          _vm.highlightedBreakpoint = breakpoint;
+        },
+        "mouseleave": function ($event) {
+          _vm.highlightedBreakpoint = undefined;
+        }
       }
     });
   }) : _vm._e()], 2), _vm._v(" "), _c('div', {
@@ -435,7 +498,19 @@ var __vue_render__ = function () {
       class: _vm.labelMarkStyles,
       style: _vm.getBreakpointMarkComputedStyles(breakpoint),
       attrs: {
-        "disabled": _vm.disabled
+        "disabled": _vm.disabled,
+        "force-state": _vm.highlightedBreakpoint === breakpoint ? 'hover' : null
+      },
+      on: {
+        "mouseenter": function ($event) {
+          _vm.highlightedBreakpoint = breakpoint;
+        },
+        "mouseleave": function ($event) {
+          _vm.highlightedBreakpoint = undefined;
+        },
+        "click": function ($event) {
+          return _vm.onClick(breakpoint);
+        }
       }
     }, [_vm._t(breakpoint + "-label", function () {
       return [_vm._v("\n        " + _vm._s(breakpoint) + "\n      ")];

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

@@ -32,7 +32,9 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     labelMarkStyles: import("@vue/composition-api").ComputedRef<string[]>;
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<[number, number]>;
     tooltipPlacement: import("@vue/composition-api").ComputedRef<"top" | "right" | undefined>;
+    highlightedBreakpoint: import("@vue/composition-api").Ref<number | undefined>;
     selectedControl: import("@vue/composition-api").Ref<"from" | "to" | undefined>;
+    onClick: (breakpoint: number) => void;
     getBreakpointMarkComputedStyles: (breakpoint: number) => Partial<CSSStyleDeclaration> | undefined;
     isHoveringOffset: import("@vue/composition-api").Ref<boolean>;
     isHoveringTrack: import("@vue/composition-api").Ref<boolean>;
@@ -165,7 +167,9 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     labelMarkStyles: import("@vue/composition-api").ComputedRef<string[]>;
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<[number, number]>;
     tooltipPlacement: import("@vue/composition-api").ComputedRef<"top" | "right" | undefined>;
+    highlightedBreakpoint: import("@vue/composition-api").Ref<number | undefined>;
     selectedControl: import("@vue/composition-api").Ref<"from" | "to" | undefined>;
+    onClick: (breakpoint: number) => void;
     getBreakpointMarkComputedStyles: (breakpoint: number) => Partial<CSSStyleDeclaration> | undefined;
     isHoveringOffset: import("@vue/composition-api").Ref<boolean>;
     isHoveringTrack: import("@vue/composition-api").Ref<boolean>;

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

@@ -172,6 +172,8 @@ const RangeSliderLabelOrientations = {
 const RangeSliderLabelMark = [
 // Position
 'absolute',
+// Interactivity
+'interactivity-click',
 // Typography
 'typography-caption-regular whitespace-nowrap',
 // Theme

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

@@ -103,7 +103,6 @@ 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:
@@ -114,6 +113,8 @@ var script = defineComponent({
           return 'right';
       }
     });
+    const highlightedBreakpoint = ref();
+    const railBoundingBox = useElementBounding(rail);
     // Handlers
     function onDrag(position, event) {
       if (props.disabled) {
@@ -199,6 +200,7 @@ var script = defineComponent({
       labelMarkStyles,
       proxyModelValue,
       tooltipPlacement,
+      highlightedBreakpoint,
       getBreakpointMarkComputedStyles,
       isHovering,
       isDragging
@@ -265,6 +267,14 @@ var __vue_render__ = function () {
       attrs: {
         "activated": breakpoint <= _vm.proxyModelValue,
         "disabled": _vm.disabled
+      },
+      on: {
+        "mouseenter": function ($event) {
+          _vm.highlightedBreakpoint = breakpoint;
+        },
+        "mouseleave": function ($event) {
+          _vm.highlightedBreakpoint = undefined;
+        }
       }
     });
   }) : _vm._e()], 2), _vm._v(" "), _c('div', {
@@ -275,7 +285,19 @@ var __vue_render__ = function () {
       class: _vm.labelMarkStyles,
       style: _vm.getBreakpointMarkComputedStyles(breakpoint),
       attrs: {
-        "disabled": _vm.disabled
+        "disabled": _vm.disabled,
+        "force-state": _vm.highlightedBreakpoint === breakpoint ? 'hover' : null
+      },
+      on: {
+        "mouseenter": function ($event) {
+          _vm.highlightedBreakpoint = breakpoint;
+        },
+        "mouseleave": function ($event) {
+          _vm.highlightedBreakpoint = undefined;
+        },
+        "click": function ($event) {
+          _vm.proxyModelValue = breakpoint;
+        }
       }
     }, [_vm._t(breakpoint + "-label", function () {
       return [_vm._v("\n        " + _vm._s(breakpoint) + "\n      ")];

package/dist/bundled/v2/components/OrSliderV3/OrSlider.vue.d.ts

@@ -20,6 +20,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     labelMarkStyles: import("@vue/composition-api").ComputedRef<string[]>;
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<number>;
     tooltipPlacement: import("@vue/composition-api").ComputedRef<"top" | "right" | undefined>;
+    highlightedBreakpoint: import("@vue/composition-api").Ref<number | undefined>;
     getBreakpointMarkComputedStyles: (breakpoint: number) => Partial<CSSStyleDeclaration> | undefined;
     isHovering: import("@vue/composition-api").Ref<boolean>;
     isDragging: import("@vue/composition-api").ComputedRef<boolean>;
@@ -135,6 +136,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     labelMarkStyles: import("@vue/composition-api").ComputedRef<string[]>;
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<number>;
     tooltipPlacement: import("@vue/composition-api").ComputedRef<"top" | "right" | undefined>;
+    highlightedBreakpoint: import("@vue/composition-api").Ref<number | undefined>;
     getBreakpointMarkComputedStyles: (breakpoint: number) => Partial<CSSStyleDeclaration> | undefined;
     isHovering: import("@vue/composition-api").Ref<boolean>;
     isDragging: import("@vue/composition-api").ComputedRef<boolean>;

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

@@ -157,6 +157,8 @@ const SliderLabelOrientations = {
 const SliderLabelMark = [
 // Position
 'absolute',
+// Interactivity
+'interactivity-click',
 // Typography
 'typography-caption-regular whitespace-nowrap',
 // Theme

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

@@ -1 +1 @@
-export { s as default } from '../OrRangeSliderV3-37003ca8.js';
+export { s as default } from '../OrRangeSliderV3-abd9022e.js';

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

@@ -69,7 +69,9 @@ declare const _default: import("vue-demi").DefineComponent<{
     labelMarkStyles: import("vue-demi").ComputedRef<string[]>;
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<[number, number]>;
     tooltipPlacement: import("vue-demi").ComputedRef<"top" | "right" | undefined>;
+    highlightedBreakpoint: import("vue-demi").Ref<number | undefined>;
     selectedControl: import("vue-demi").Ref<"from" | "to" | undefined>;
+    onClick: (breakpoint: number) => void;
     getBreakpointMarkComputedStyles: (breakpoint: number) => Partial<CSSStyleDeclaration> | undefined;
     isHoveringOffset: import("vue-demi").Ref<boolean>;
     isHoveringTrack: import("vue-demi").Ref<boolean>;

package/dist/bundled/v3/components/OrRangeSliderV3/index.js

@@ -1,2 +1,2 @@
-export { s as OrRangeSliderV3 } from '../OrRangeSliderV3-37003ca8.js';
-export { S as RangeSliderColor, a as RangeSliderOrientation } from '../OrSliderV3-8912e4bc.js';
+export { s as OrRangeSliderV3 } from '../OrRangeSliderV3-abd9022e.js';
+export { S as RangeSliderColor, a as RangeSliderOrientation } from '../OrSliderV3-e1218b6f.js';

package/dist/bundled/v3/components/OrRangeSliderV3/props.js

@@ -1 +1 @@
-export { S as RangeSliderColor, a as RangeSliderOrientation } from '../OrSliderV3-8912e4bc.js';
+export { S as RangeSliderColor, a as RangeSliderOrientation } from '../OrSliderV3-e1218b6f.js';

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

@@ -1,2 +1,2 @@
-import '../OrSliderV3-8912e4bc.js';
-export { R as RangeSlider, j as RangeSliderBreakpointMark, k as RangeSliderBreakpointMarkColors, l as RangeSliderLabel, n as RangeSliderLabelMark, o as RangeSliderLabelMarkOrientations, m as RangeSliderLabelOrientations, d as RangeSliderOffset, e as RangeSliderOffsetOrientations, a as RangeSliderOrientations, b as RangeSliderRail, c as RangeSliderRailOrientations, h as RangeSliderThumb, i as RangeSliderThumbColors, f as RangeSliderTrack, g as RangeSliderTrackColors } from '../OrRangeSliderV3-37003ca8.js';
+import '../OrSliderV3-e1218b6f.js';
+export { R as RangeSlider, j as RangeSliderBreakpointMark, k as RangeSliderBreakpointMarkColors, l as RangeSliderLabel, n as RangeSliderLabelMark, o as RangeSliderLabelMarkOrientations, m as RangeSliderLabelOrientations, d as RangeSliderOffset, e as RangeSliderOffsetOrientations, a as RangeSliderOrientations, b as RangeSliderRail, c as RangeSliderRailOrientations, h as RangeSliderThumb, i as RangeSliderThumbColors, f as RangeSliderTrack, g as RangeSliderTrackColors } from '../OrRangeSliderV3-abd9022e.js';

package/dist/bundled/v3/components/{OrRangeSliderV3-37003ca8.js → OrRangeSliderV3-abd9022e.js}

@@ -1,4 +1,4 @@
-import { a as SliderOrientation, S as SliderColor } from './OrSliderV3-8912e4bc.js';
+import { a as SliderOrientation, S as SliderColor } from './OrSliderV3-e1218b6f.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createVNode, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, Fragment, renderList, createCommentVNode } from 'vue';
 import { h as useElementBounding, a as useElementHover, i as useDraggable, j as clamp } from './OrBottomSheetV3-d2f7ec3a.js';
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
@@ -177,6 +177,8 @@ const RangeSliderLabelOrientations = {
 const RangeSliderLabelMark = [
 // Position
 'absolute',
+// Interactivity
+'interactivity-click',
 // Typography
 'typography-caption-regular whitespace-nowrap',
 // Theme
@@ -296,26 +298,59 @@ var script = defineComponent({
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
       defaultValue: computed(() => [props.minValue, props.maxValue])
     });
-    const internalModelValueFrom = computed({
+    watch(proxyModelValue, _ref => {
+      let [a, b] = _ref;
+      switch (props.orientation) {
+        case SliderOrientation.Horizontal:
+        case SliderOrientation.Vertical:
+          if (a > b) proxyModelValue.value = [b, a];
+          break;
+        case SliderOrientation.HorizontalReversed:
+        case SliderOrientation.VerticalReversed:
+          if (a < b) proxyModelValue.value = [b, a];
+          break;
+      }
+    });
+    const proxyModelValueFrom = computed({
       get: () => {
-        let modelValue = 0;
         switch (props.orientation) {
           case SliderOrientation.Horizontal:
           case SliderOrientation.Vertical:
-            modelValue = proxyModelValue.value[0];
+            return proxyModelValue.value[0];
+          case SliderOrientation.HorizontalReversed:
+          case SliderOrientation.VerticalReversed:
+            return proxyModelValue.value[1];
+        }
+        return props.minValue;
+      },
+      set: value => {
+        const draftProxyModelValue = [value !== null && value !== void 0 ? value : props.minValue, proxyModelValue.value[1]];
+        switch (props.orientation) {
+          case SliderOrientation.Horizontal:
+          case SliderOrientation.Vertical:
+            proxyModelValue.value = draftProxyModelValue;
             break;
           case SliderOrientation.HorizontalReversed:
           case SliderOrientation.VerticalReversed:
-            modelValue = proxyModelValue.value[1];
+            proxyModelValue.value = [draftProxyModelValue[1], draftProxyModelValue[0]];
             break;
         }
-        return (modelValue - props.minValue) / (props.maxValue - props.minValue);
+      }
+    });
+    const proxyModelValueTo = computed({
+      get: () => {
+        switch (props.orientation) {
+          case SliderOrientation.Horizontal:
+          case SliderOrientation.Vertical:
+            return proxyModelValue.value[1];
+          case SliderOrientation.HorizontalReversed:
+          case SliderOrientation.VerticalReversed:
+            return proxyModelValue.value[0];
+        }
+        return props.maxValue;
       },
       set: value => {
-        const modelValue = value * (props.maxValue - props.minValue) + props.minValue;
-        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];
+        const draftProxyModelValue = [proxyModelValue.value[0], value !== null && value !== void 0 ? value : props.maxValue];
         switch (props.orientation) {
           case SliderOrientation.Horizontal:
           case SliderOrientation.Vertical:
@@ -323,25 +358,35 @@ var script = defineComponent({
             break;
           case SliderOrientation.HorizontalReversed:
           case SliderOrientation.VerticalReversed:
-            proxyModelValue.value = draftProxyModelValue.reverse();
+            proxyModelValue.value = [draftProxyModelValue[1], draftProxyModelValue[0]];
             break;
         }
       }
     });
-    const internalModelValueTo = computed({
+    const internalModelValueFrom = computed({
       get: () => {
-        let modelValue = 0;
+        return (proxyModelValueFrom.value - props.minValue) / (props.maxValue - props.minValue);
+      },
+      set: value => {
+        const modelValue = value * (props.maxValue - props.minValue) + props.minValue;
+        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:
-            modelValue = proxyModelValue.value[1];
+            proxyModelValue.value = draftProxyModelValue;
             break;
           case SliderOrientation.HorizontalReversed:
           case SliderOrientation.VerticalReversed:
-            modelValue = proxyModelValue.value[0];
+            proxyModelValue.value = [draftProxyModelValue[1], draftProxyModelValue[0]];
             break;
         }
-        return (modelValue - props.minValue) / (props.maxValue - props.minValue);
+      }
+    });
+    const internalModelValueTo = computed({
+      get: () => {
+        return (proxyModelValueTo.value - props.minValue) / (props.maxValue - props.minValue);
       },
       set: value => {
         const modelValue = value * (props.maxValue - props.minValue) + props.minValue;
@@ -355,7 +400,7 @@ var script = defineComponent({
             break;
           case SliderOrientation.HorizontalReversed:
           case SliderOrientation.VerticalReversed:
-            proxyModelValue.value = draftProxyModelValue.reverse();
+            proxyModelValue.value = [draftProxyModelValue[1], draftProxyModelValue[0]];
             break;
         }
       }
@@ -366,7 +411,6 @@ 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:
@@ -377,7 +421,9 @@ var script = defineComponent({
           return 'right';
       }
     });
+    const highlightedBreakpoint = ref();
     const selectedControl = ref();
+    const railBoundingBox = useElementBounding(rail);
     // Handlers
     function onDrag(position, event) {
       if (props.disabled) {
@@ -417,6 +463,15 @@ var script = defineComponent({
         }
       }
     }
+    function onClick(breakpoint) {
+      if (selectedControl.value === 'from') {
+        proxyModelValueFrom.value = breakpoint;
+        selectedControl.value = 'to';
+      } else {
+        proxyModelValueTo.value = breakpoint;
+        selectedControl.value = 'from';
+      }
+    }
     // Methods
     function getBreakpointMarkComputedStyles(breakpoint) {
       switch (props.orientation) {
@@ -505,7 +560,9 @@ var script = defineComponent({
       labelMarkStyles,
       proxyModelValue,
       tooltipPlacement,
+      highlightedBreakpoint,
       selectedControl,
+      onClick,
       getBreakpointMarkComputedStyles,
       isHoveringOffset,
       isHoveringTrack,
@@ -525,8 +582,8 @@ const _hoisted_4 = ["disabled"];
 const _hoisted_5 = ["disabled"];
 const _hoisted_6 = ["disabled"];
 const _hoisted_7 = ["disabled"];
-const _hoisted_8 = ["activated", "disabled"];
-const _hoisted_9 = ["disabled"];
+const _hoisted_8 = ["activated", "disabled", "onMouseenter"];
+const _hoisted_9 = ["disabled", "force-state", "onMouseenter", "onClick"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrTooltip = resolveComponent("OrTooltip");
   return openBlock(), createElementBlock("div", {
@@ -593,8 +650,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       class: normalizeClass(_ctx.breakpointMarkStyles),
       style: normalizeStyle(_ctx.getBreakpointMarkComputedStyles(breakpoint)),
       activated: breakpoint >= _ctx.proxyModelValue[_ctx.orientation.endsWith('-reversed') ? 1 : 0] && breakpoint <= _ctx.proxyModelValue[_ctx.orientation.endsWith('-reversed') ? 0 : 1],
-      disabled: _ctx.disabled
-    }, null, 14 /* CLASS, STYLE, PROPS */, _hoisted_8);
+      disabled: _ctx.disabled,
+      onMouseenter: $event => _ctx.highlightedBreakpoint = breakpoint,
+      onMouseleave: _cache[0] || (_cache[0] = $event => _ctx.highlightedBreakpoint = undefined)
+    }, null, 46 /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */, _hoisted_8);
   }), 128 /* KEYED_FRAGMENT */)) : createCommentVNode("v-if", true)], 10 /* CLASS, PROPS */, _hoisted_2), createElementVNode("div", {
     class: normalizeClass(_ctx.labelStyles)
   }, [(openBlock(true), createElementBlock(Fragment, null, renderList([_ctx.minValue, ..._ctx.breakpoints, _ctx.maxValue], breakpoint => {
@@ -602,10 +661,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       key: breakpoint,
       class: normalizeClass(_ctx.labelMarkStyles),
       style: normalizeStyle(_ctx.getBreakpointMarkComputedStyles(breakpoint)),
-      disabled: _ctx.disabled
+      disabled: _ctx.disabled,
+      "force-state": _ctx.highlightedBreakpoint === breakpoint ? 'hover' : null,
+      onMouseenter: $event => _ctx.highlightedBreakpoint = breakpoint,
+      onMouseleave: _cache[1] || (_cache[1] = $event => _ctx.highlightedBreakpoint = undefined),
+      onClick: $event => _ctx.onClick(breakpoint)
     }, [renderSlot(_ctx.$slots, `${breakpoint}-label`, {
       value: breakpoint
-    }, () => [createTextVNode(toDisplayString(breakpoint), 1 /* TEXT */)])], 14 /* CLASS, STYLE, PROPS */, _hoisted_9);
+    }, () => [createTextVNode(toDisplayString(breakpoint), 1 /* TEXT */)])], 46 /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */, _hoisted_9);
   }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */)], 10 /* CLASS, PROPS */, _hoisted_1);
 }
 

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

@@ -1 +1 @@
-export { s as default } from '../OrSliderV3-8912e4bc.js';
+export { s as default } from '../OrSliderV3-e1218b6f.js';

package/dist/bundled/v3/components/OrSliderV3/OrSlider.vue.d.ts

@@ -57,6 +57,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     labelMarkStyles: import("vue-demi").ComputedRef<string[]>;
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<number>;
     tooltipPlacement: import("vue-demi").ComputedRef<"top" | "right" | undefined>;
+    highlightedBreakpoint: import("vue-demi").Ref<number | undefined>;
     getBreakpointMarkComputedStyles: (breakpoint: number) => Partial<CSSStyleDeclaration> | undefined;
     isHovering: import("vue-demi").Ref<boolean>;
     isDragging: import("vue-demi").ComputedRef<boolean>;

package/dist/bundled/v3/components/OrSliderV3/index.js

@@ -1 +1 @@
-export { s as OrSliderV3, S as SliderColor, a as SliderOrientation } from '../OrSliderV3-8912e4bc.js';
+export { s as OrSliderV3, S as SliderColor, a as SliderOrientation } from '../OrSliderV3-e1218b6f.js';

package/dist/bundled/v3/components/OrSliderV3/props.js

@@ -1 +1 @@
-export { S as SliderColor, a as SliderOrientation } from '../OrSliderV3-8912e4bc.js';
+export { S as SliderColor, a as SliderOrientation } from '../OrSliderV3-e1218b6f.js';

package/dist/bundled/v3/components/OrSliderV3/styles.js

@@ -1 +1 @@
-export { b as Slider, j as SliderBreakpointMark, k as SliderBreakpointMarkColors, l as SliderLabel, n as SliderLabelMark, o as SliderLabelMarkOrientations, m as SliderLabelOrientations, c as SliderOrientations, d as SliderRail, e as SliderRailOrientations, h as SliderThumb, i as SliderThumbColors, f as SliderTrack, g as SliderTrackColors } from '../OrSliderV3-8912e4bc.js';
+export { b as Slider, j as SliderBreakpointMark, k as SliderBreakpointMarkColors, l as SliderLabel, n as SliderLabelMark, o as SliderLabelMarkOrientations, m as SliderLabelOrientations, c as SliderOrientations, d as SliderRail, e as SliderRailOrientations, h as SliderThumb, i as SliderThumbColors, f as SliderTrack, g as SliderTrackColors } from '../OrSliderV3-e1218b6f.js';