@onereach/ui-components 8.8.4-beta.3740.0 → 8.8.4-beta.3743.0

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

@@ -1,2 +1,2 @@
-export { _ as default } from '../OrRangeSliderV3-fb840def.js';
+export { _ as default } from '../OrRangeSliderV3-4fa067df.js';
 import '../OrAvatar-1a4a3615.js';

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

@@ -3,6 +3,9 @@ import { RangeSliderColor, RangeSliderOrientation } from './props';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rail: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    offset: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    track: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    filler: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     thumbFrom: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     thumbTo: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
@@ -20,7 +23,12 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     labelMarkStyles: import("@vue/composition-api").ComputedRef<string[]>;
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<[number, number]>;
     selectedControl: import("@vue/composition-api").Ref<"from" | "to" | undefined>;
-    isHovering: import("@vue/composition-api").Ref<boolean>;
+    isHoveringOffset: import("@vue/composition-api").Ref<boolean>;
+    isHoveringTrack: import("@vue/composition-api").Ref<boolean>;
+    isHoveringFiller: import("@vue/composition-api").Ref<boolean>;
+    isHoveringRail: import("@vue/composition-api").ComputedRef<boolean>;
+    isHoveringThumbFrom: import("@vue/composition-api").Ref<boolean>;
+    isHoveringThumbTo: import("@vue/composition-api").Ref<boolean>;
     isDragging: import("@vue/composition-api").ComputedRef<boolean>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
@@ -102,6 +110,9 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 }, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rail: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    offset: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    track: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    filler: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     thumbFrom: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     thumbTo: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
@@ -119,7 +130,12 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     labelMarkStyles: import("@vue/composition-api").ComputedRef<string[]>;
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<[number, number]>;
     selectedControl: import("@vue/composition-api").Ref<"from" | "to" | undefined>;
-    isHovering: import("@vue/composition-api").Ref<boolean>;
+    isHoveringOffset: import("@vue/composition-api").Ref<boolean>;
+    isHoveringTrack: import("@vue/composition-api").Ref<boolean>;
+    isHoveringFiller: import("@vue/composition-api").Ref<boolean>;
+    isHoveringRail: import("@vue/composition-api").ComputedRef<boolean>;
+    isHoveringThumbFrom: import("@vue/composition-api").Ref<boolean>;
+    isHoveringThumbTo: import("@vue/composition-api").Ref<boolean>;
     isDragging: import("@vue/composition-api").ComputedRef<boolean>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: [number, number];

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

@@ -1,2 +1,2 @@
-export { _ as OrRangeSliderV3 } from '../OrRangeSliderV3-fb840def.js';
+export { _ as OrRangeSliderV3 } from '../OrRangeSliderV3-4fa067df.js';
 export { S as RangeSliderColor, a as RangeSliderOrientation } from '../OrSliderV3-428479c8.js';

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

@@ -1,2 +1,2 @@
 import '../OrSliderV3-428479c8.js';
-export { R as RangeSlider, j as RangeSliderLabel, l as RangeSliderLabelMark, k 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-fb840def.js';
+export { R as RangeSlider, j as RangeSliderLabel, l as RangeSliderLabelMark, k 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-4fa067df.js';

package/dist/bundled/v2/components/{OrRangeSliderV3-fb840def.js → OrRangeSliderV3-4fa067df.js}

@@ -38,8 +38,12 @@ const RangeSliderRailOrientations = {
 };
 const RangeSliderOffset = [];
 const RangeSliderOffsetOrientations = {
-  [SliderOrientation.Horizontal]: [],
-  [SliderOrientation.Vertical]: []
+  [SliderOrientation.Horizontal]: [
+  // Box
+  'h-full'],
+  [SliderOrientation.Vertical]: [
+  // Box
+  'w-full']
 };
 const RangeSliderTrack = [
 // Shape
@@ -146,6 +150,9 @@ var script = defineComponent({
     // Refs
     const root = ref();
     const rail = ref();
+    const offset = ref();
+    const track = ref();
+    const filler = ref();
     const thumbFrom = ref();
     const thumbTo = ref();
     // Styles
@@ -210,7 +217,14 @@ var script = defineComponent({
       }
     }
     // Effects
-    const isHovering = useElementHover(rail);
+    const isHoveringOffset = useElementHover(offset);
+    const isHoveringTrack = useElementHover(track);
+    const isHoveringFiller = useElementHover(filler);
+    const isHoveringRail = computed(() => {
+      return isHoveringOffset.value || isHoveringTrack.value || isHoveringFiller.value;
+    });
+    const isHoveringThumbFrom = useElementHover(thumbFrom);
+    const isHoveringThumbTo = useElementHover(thumbTo);
     const {
       isDragging
     } = useDraggable(rail, {
@@ -248,6 +262,9 @@ var script = defineComponent({
     return {
       root,
       rail,
+      offset,
+      track,
+      filler,
       thumbFrom,
       thumbTo,
       rootStyles,
@@ -261,7 +278,12 @@ var script = defineComponent({
       labelMarkStyles,
       proxyModelValue,
       selectedControl,
-      isHovering,
+      isHoveringOffset,
+      isHoveringTrack,
+      isHoveringFiller,
+      isHoveringRail,
+      isHoveringThumbFrom,
+      isHoveringThumbTo,
       isDragging
     };
   }
@@ -288,6 +310,7 @@ var __vue_render__ = function () {
       "disabled": _vm.disabled
     }
   }, [_c('div', {
+    ref: "offset",
     class: _vm.offsetStyles,
     style: _vm.offsetComputedStyles,
     attrs: {
@@ -296,7 +319,7 @@ var __vue_render__ = function () {
   }), _vm._v(" "), _c('OrTooltip', {
     class: ['relative', 'z-10'],
     attrs: {
-      "is-open": !_vm.isDragging && _vm.isHovering || _vm.isDragging && _vm.selectedControl === 'from',
+      "is-open": !_vm.isDragging && (_vm.isHoveringRail || _vm.isHoveringThumbFrom) || _vm.isDragging && _vm.selectedControl === 'from',
       "content": String(_vm.proxyModelValue[0]),
       "placement": _vm.orientation === 'horizontal' ? 'top' : 'right',
       "offset": 24,
@@ -309,6 +332,7 @@ var __vue_render__ = function () {
       "disabled": _vm.disabled
     }
   })]), _vm._v(" "), _c('div', {
+    ref: "track",
     class: _vm.trackStyles,
     style: _vm.trackComputedStyles,
     attrs: {
@@ -317,7 +341,7 @@ var __vue_render__ = function () {
   }), _vm._v(" "), _c('OrTooltip', {
     class: ['relative', 'z-10'],
     attrs: {
-      "is-open": !_vm.isDragging && _vm.isHovering || _vm.isDragging && _vm.selectedControl === 'to',
+      "is-open": !_vm.isDragging && (_vm.isHoveringRail || _vm.isHoveringThumbTo) || _vm.isDragging && _vm.selectedControl === 'to',
       "content": String(_vm.proxyModelValue[1]),
       "placement": _vm.orientation === 'horizontal' ? 'top' : 'right',
       "offset": 24,
@@ -329,7 +353,13 @@ var __vue_render__ = function () {
     attrs: {
       "disabled": _vm.disabled
     }
-  })])], 1), _vm._v(" "), _c('div', {
+  })]), _vm._v(" "), _c('div', {
+    ref: "filler",
+    class: ['grow'].concat(_vm.offsetStyles),
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  })], 1), _vm._v(" "), _c('div', {
     class: _vm.labelStyles
   }, [_c('div', {
     class: _vm.labelMarkStyles

package/dist/bundled/v2/components/index.js

@@ -76,7 +76,7 @@ export { default as OrRadio } from './OrRadio/OrRadio.js';
 export { default as OrRadioGroup } from './OrRadioGroup/OrRadioGroup.js';
 export { default as OrRadioGroupV3 } from './OrRadioGroupV3/OrRadioGroup.js';
 export { _ as OrRadioV3 } from './OrRadioV3-0327f619.js';
-export { _ as OrRangeSliderV3 } from './OrRangeSliderV3-fb840def.js';
+export { _ as OrRangeSliderV3 } from './OrRangeSliderV3-4fa067df.js';
 export { _ as OrSliderV3, S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from './OrSliderV3-428479c8.js';
 export { _ as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from './OrResizeablePanelV3-aba57745.js';
 export { F as Formats, _ as OrRichTextEditorV3 } from './OrRichTextEditorV3-4f884012.js';

package/dist/bundled/v2/index.js

@@ -41,7 +41,7 @@ export { _ as OrProgressV3, P as ProgressColor, a as ProgressType } from './comp
 export { default as OrRadio } from './components/OrRadio/OrRadio.js';
 export { default as OrRadioGroup } from './components/OrRadioGroup/OrRadioGroup.js';
 export { default as OrRadioGroupV3 } from './components/OrRadioGroupV3/OrRadioGroup.js';
-export { _ as OrRangeSliderV3 } from './components/OrRangeSliderV3-fb840def.js';
+export { _ as OrRangeSliderV3 } from './components/OrRangeSliderV3-4fa067df.js';
 export { F as Formats, _ as OrRichTextEditorV3 } from './components/OrRichTextEditorV3-4f884012.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './components/OrSegmentedControlV3-e76d3e8d.js';
 export { _ as OrSelect } from './components/OrSelect-157d7097.js';

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

@@ -1 +1 @@
-export { s as default } from '../OrRangeSliderV3-ff251922.js';
+export { s as default } from '../OrRangeSliderV3-b1e08082.js';

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

@@ -36,6 +36,9 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     root: import("vue-demi").Ref<HTMLElement | undefined>;
     rail: import("vue-demi").Ref<HTMLElement | undefined>;
+    offset: import("vue-demi").Ref<HTMLElement | undefined>;
+    track: import("vue-demi").Ref<HTMLElement | undefined>;
+    filler: import("vue-demi").Ref<HTMLElement | undefined>;
     thumbFrom: import("vue-demi").Ref<HTMLElement | undefined>;
     thumbTo: import("vue-demi").Ref<HTMLElement | undefined>;
     rootStyles: import("vue-demi").ComputedRef<string[]>;
@@ -53,7 +56,12 @@ declare const _default: import("vue-demi").DefineComponent<{
     labelMarkStyles: import("vue-demi").ComputedRef<string[]>;
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<[number, number]>;
     selectedControl: import("vue-demi").Ref<"from" | "to" | undefined>;
-    isHovering: import("vue-demi").Ref<boolean>;
+    isHoveringOffset: import("vue-demi").Ref<boolean>;
+    isHoveringTrack: import("vue-demi").Ref<boolean>;
+    isHoveringFiller: import("vue-demi").Ref<boolean>;
+    isHoveringRail: import("vue-demi").ComputedRef<boolean>;
+    isHoveringThumbFrom: import("vue-demi").Ref<boolean>;
+    isHoveringThumbTo: import("vue-demi").Ref<boolean>;
     isDragging: import("vue-demi").ComputedRef<boolean>;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {

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

@@ -1,2 +1,2 @@
-export { s as OrRangeSliderV3 } from '../OrRangeSliderV3-ff251922.js';
+export { s as OrRangeSliderV3 } from '../OrRangeSliderV3-b1e08082.js';
 export { S as RangeSliderColor, a as RangeSliderOrientation } from '../OrSliderV3-999ec5f5.js';

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

@@ -1,2 +1,2 @@
 import '../OrSliderV3-999ec5f5.js';
-export { R as RangeSlider, j as RangeSliderLabel, l as RangeSliderLabelMark, k 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-ff251922.js';
+export { R as RangeSlider, j as RangeSliderLabel, l as RangeSliderLabelMark, k 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-b1e08082.js';

package/dist/bundled/v3/components/{OrRangeSliderV3-ff251922.js → OrRangeSliderV3-b1e08082.js}

@@ -38,8 +38,12 @@ const RangeSliderRailOrientations = {
 };
 const RangeSliderOffset = [];
 const RangeSliderOffsetOrientations = {
-  [SliderOrientation.Horizontal]: [],
-  [SliderOrientation.Vertical]: []
+  [SliderOrientation.Horizontal]: [
+  // Box
+  'h-full'],
+  [SliderOrientation.Vertical]: [
+  // Box
+  'w-full']
 };
 const RangeSliderTrack = [
 // Shape
@@ -146,6 +150,9 @@ var script = defineComponent({
     // Refs
     const root = ref();
     const rail = ref();
+    const offset = ref();
+    const track = ref();
+    const filler = ref();
     const thumbFrom = ref();
     const thumbTo = ref();
     // Styles
@@ -210,7 +217,14 @@ var script = defineComponent({
       }
     }
     // Effects
-    const isHovering = useElementHover(rail);
+    const isHoveringOffset = useElementHover(offset);
+    const isHoveringTrack = useElementHover(track);
+    const isHoveringFiller = useElementHover(filler);
+    const isHoveringRail = computed(() => {
+      return isHoveringOffset.value || isHoveringTrack.value || isHoveringFiller.value;
+    });
+    const isHoveringThumbFrom = useElementHover(thumbFrom);
+    const isHoveringThumbTo = useElementHover(thumbTo);
     const {
       isDragging
     } = useDraggable(rail, {
@@ -248,6 +262,9 @@ var script = defineComponent({
     return {
       root,
       rail,
+      offset,
+      track,
+      filler,
       thumbFrom,
       thumbTo,
       rootStyles,
@@ -261,7 +278,12 @@ var script = defineComponent({
       labelMarkStyles,
       proxyModelValue,
       selectedControl,
-      isHovering,
+      isHoveringOffset,
+      isHoveringTrack,
+      isHoveringFiller,
+      isHoveringRail,
+      isHoveringThumbFrom,
+      isHoveringThumbTo,
       isDragging
     };
   }
@@ -273,7 +295,8 @@ const _hoisted_3 = ["disabled"];
 const _hoisted_4 = ["disabled"];
 const _hoisted_5 = ["disabled"];
 const _hoisted_6 = ["disabled"];
-const _hoisted_7 = /*#__PURE__*/createElementVNode("div", {
+const _hoisted_7 = ["disabled"];
+const _hoisted_8 = /*#__PURE__*/createElementVNode("div", {
   class: /*#__PURE__*/normalizeClass(['grow'])
 }, null, -1 /* HOISTED */);
 
@@ -288,12 +311,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     class: normalizeClass(_ctx.railStyles),
     disabled: _ctx.disabled
   }, [createElementVNode("div", {
+    ref: "offset",
     class: normalizeClass(_ctx.offsetStyles),
     style: normalizeStyle(_ctx.offsetComputedStyles),
     disabled: _ctx.disabled
   }, null, 14 /* CLASS, STYLE, PROPS */, _hoisted_3), createVNode(_component_OrTooltip, {
     class: normalizeClass(['relative', 'z-10']),
-    "is-open": !_ctx.isDragging && _ctx.isHovering || _ctx.isDragging && _ctx.selectedControl === 'from',
+    "is-open": !_ctx.isDragging && (_ctx.isHoveringRail || _ctx.isHoveringThumbFrom) || _ctx.isDragging && _ctx.selectedControl === 'from',
     content: String(_ctx.proxyModelValue[0]),
     placement: _ctx.orientation === 'horizontal' ? 'top' : 'right',
     offset: 24,
@@ -306,12 +330,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 10 /* CLASS, PROPS */, _hoisted_4)]),
     _: 1 /* STABLE */
   }, 8 /* PROPS */, ["is-open", "content", "placement"]), createElementVNode("div", {
+    ref: "track",
     class: normalizeClass(_ctx.trackStyles),
     style: normalizeStyle(_ctx.trackComputedStyles),
     disabled: _ctx.disabled
   }, null, 14 /* CLASS, STYLE, PROPS */, _hoisted_5), createVNode(_component_OrTooltip, {
     class: normalizeClass(['relative', 'z-10']),
-    "is-open": !_ctx.isDragging && _ctx.isHovering || _ctx.isDragging && _ctx.selectedControl === 'to',
+    "is-open": !_ctx.isDragging && (_ctx.isHoveringRail || _ctx.isHoveringThumbTo) || _ctx.isDragging && _ctx.selectedControl === 'to',
     content: String(_ctx.proxyModelValue[1]),
     placement: _ctx.orientation === 'horizontal' ? 'top' : 'right',
     offset: 24,
@@ -323,11 +348,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       disabled: _ctx.disabled
     }, null, 10 /* CLASS, PROPS */, _hoisted_6)]),
     _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["is-open", "content", "placement"])], 10 /* CLASS, PROPS */, _hoisted_2), createElementVNode("div", {
+  }, 8 /* PROPS */, ["is-open", "content", "placement"]), createElementVNode("div", {
+    ref: "filler",
+    class: normalizeClass(['grow', ..._ctx.offsetStyles]),
+    disabled: _ctx.disabled
+  }, null, 10 /* CLASS, PROPS */, _hoisted_7)], 10 /* CLASS, PROPS */, _hoisted_2), createElementVNode("div", {
     class: normalizeClass(_ctx.labelStyles)
   }, [createElementVNode("div", {
     class: normalizeClass(_ctx.labelMarkStyles)
-  }, toDisplayString(_ctx.minValue), 3 /* TEXT, CLASS */), _hoisted_7, createElementVNode("div", {
+  }, toDisplayString(_ctx.minValue), 3 /* TEXT, CLASS */), _hoisted_8, createElementVNode("div", {
     class: normalizeClass(_ctx.labelMarkStyles)
   }, toDisplayString(_ctx.maxValue), 3 /* TEXT, CLASS */)], 2 /* CLASS */)], 10 /* CLASS, PROPS */, _hoisted_1);
 }

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

@@ -76,7 +76,7 @@ export { default as OrRadio } from './OrRadio/OrRadio.js';
 export { default as OrRadioGroup } from './OrRadioGroup/OrRadioGroup.js';
 export { default as OrRadioGroupV3 } from './OrRadioGroupV3/OrRadioGroup.js';
 export { s as OrRadioV3 } from './OrRadioV3-b63608b2.js';
-export { s as OrRangeSliderV3 } from './OrRangeSliderV3-ff251922.js';
+export { s as OrRangeSliderV3 } from './OrRangeSliderV3-b1e08082.js';
 export { s as OrSliderV3, S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from './OrSliderV3-999ec5f5.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from './OrResizeablePanelV3-b91fdff5.js';
 export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditorV3-b9198d0d.js';

package/dist/bundled/v3/index.js

@@ -40,7 +40,7 @@ export { s as OrProgressV3, P as ProgressColor, a as ProgressType } from './comp
 export { default as OrRadio } from './components/OrRadio/OrRadio.js';
 export { default as OrRadioGroup } from './components/OrRadioGroup/OrRadioGroup.js';
 export { default as OrRadioGroupV3 } from './components/OrRadioGroupV3/OrRadioGroup.js';
-export { s as OrRangeSliderV3 } from './components/OrRangeSliderV3-ff251922.js';
+export { s as OrRangeSliderV3 } from './components/OrRangeSliderV3-b1e08082.js';
 export { F as Formats, s as OrRichTextEditorV3 } from './components/OrRichTextEditorV3-b9198d0d.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './components/OrSegmentedControlV3-8a604c3a.js';
 export { s as OrSelect } from './components/OrSelect-5db0c0bf.js';

package/dist/esm/v2/{OrRangeSlider-1bc7cf55.js → OrRangeSlider-d34f950b.js}

@@ -43,8 +43,12 @@ const RangeSliderRailOrientations = {
 };
 const RangeSliderOffset = [];
 const RangeSliderOffsetOrientations = {
-  [SliderOrientation.Horizontal]: [],
-  [SliderOrientation.Vertical]: []
+  [SliderOrientation.Horizontal]: [
+  // Box
+  'h-full'],
+  [SliderOrientation.Vertical]: [
+  // Box
+  'w-full']
 };
 const RangeSliderTrack = [
 // Shape
@@ -151,6 +155,9 @@ var script = defineComponent({
     // Refs
     const root = ref();
     const rail = ref();
+    const offset = ref();
+    const track = ref();
+    const filler = ref();
     const thumbFrom = ref();
     const thumbTo = ref();
     // Styles
@@ -215,7 +222,14 @@ var script = defineComponent({
       }
     }
     // Effects
-    const isHovering = useElementHover(rail);
+    const isHoveringOffset = useElementHover(offset);
+    const isHoveringTrack = useElementHover(track);
+    const isHoveringFiller = useElementHover(filler);
+    const isHoveringRail = computed(() => {
+      return isHoveringOffset.value || isHoveringTrack.value || isHoveringFiller.value;
+    });
+    const isHoveringThumbFrom = useElementHover(thumbFrom);
+    const isHoveringThumbTo = useElementHover(thumbTo);
     const {
       isDragging
     } = useDraggable(rail, {
@@ -253,6 +267,9 @@ var script = defineComponent({
     return {
       root,
       rail,
+      offset,
+      track,
+      filler,
       thumbFrom,
       thumbTo,
       rootStyles,
@@ -266,7 +283,12 @@ var script = defineComponent({
       labelMarkStyles,
       proxyModelValue,
       selectedControl,
-      isHovering,
+      isHoveringOffset,
+      isHoveringTrack,
+      isHoveringFiller,
+      isHoveringRail,
+      isHoveringThumbFrom,
+      isHoveringThumbTo,
       isDragging
     };
   }
@@ -293,6 +315,7 @@ var __vue_render__ = function () {
       "disabled": _vm.disabled
     }
   }, [_c('div', {
+    ref: "offset",
     class: _vm.offsetStyles,
     style: _vm.offsetComputedStyles,
     attrs: {
@@ -301,7 +324,7 @@ var __vue_render__ = function () {
   }), _vm._v(" "), _c('OrTooltip', {
     class: ['relative', 'z-10'],
     attrs: {
-      "is-open": !_vm.isDragging && _vm.isHovering || _vm.isDragging && _vm.selectedControl === 'from',
+      "is-open": !_vm.isDragging && (_vm.isHoveringRail || _vm.isHoveringThumbFrom) || _vm.isDragging && _vm.selectedControl === 'from',
       "content": String(_vm.proxyModelValue[0]),
       "placement": _vm.orientation === 'horizontal' ? 'top' : 'right',
       "offset": 24,
@@ -314,6 +337,7 @@ var __vue_render__ = function () {
       "disabled": _vm.disabled
     }
   })]), _vm._v(" "), _c('div', {
+    ref: "track",
     class: _vm.trackStyles,
     style: _vm.trackComputedStyles,
     attrs: {
@@ -322,7 +346,7 @@ var __vue_render__ = function () {
   }), _vm._v(" "), _c('OrTooltip', {
     class: ['relative', 'z-10'],
     attrs: {
-      "is-open": !_vm.isDragging && _vm.isHovering || _vm.isDragging && _vm.selectedControl === 'to',
+      "is-open": !_vm.isDragging && (_vm.isHoveringRail || _vm.isHoveringThumbTo) || _vm.isDragging && _vm.selectedControl === 'to',
       "content": String(_vm.proxyModelValue[1]),
       "placement": _vm.orientation === 'horizontal' ? 'top' : 'right',
       "offset": 24,
@@ -334,7 +358,13 @@ var __vue_render__ = function () {
     attrs: {
       "disabled": _vm.disabled
     }
-  })])], 1), _vm._v(" "), _c('div', {
+  })]), _vm._v(" "), _c('div', {
+    ref: "filler",
+    class: ['grow'].concat(_vm.offsetStyles),
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  })], 1), _vm._v(" "), _c('div', {
     class: _vm.labelStyles
   }, [_c('div', {
     class: _vm.labelMarkStyles

package/dist/esm/v2/components/index.js

@@ -92,7 +92,7 @@ export { _ as OrRadio } from '../OrRadio-811ad5a4.js';
 export { _ as OrRadioGroup } from '../OrRadioGroup-11424644.js';
 export { _ as OrRadioGroupV3 } from '../OrRadioGroup-c0ad9bf3.js';
 export { _ as OrRadioV3 } from '../OrRadio-81a1263e.js';
-export { _ as OrRangeSliderV3 } from '../OrRangeSlider-1bc7cf55.js';
+export { _ as OrRangeSliderV3 } from '../OrRangeSlider-d34f950b.js';
 export { _ as OrSliderV3 } from '../OrSlider-2217ee40.js';
 export { S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from '../OrSlider.vue_rollup-plugin-vue_script-2e53b6b1.js';
 export { _ as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from '../OrResizeablePanel-2bb20c95.js';

package/dist/esm/v2/components/or-range-slider-v3/OrRangeSlider.vue.d.ts

@@ -3,6 +3,9 @@ import { RangeSliderColor, RangeSliderOrientation } from './props';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rail: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    offset: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    track: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    filler: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     thumbFrom: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     thumbTo: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
@@ -20,7 +23,12 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     labelMarkStyles: import("@vue/composition-api").ComputedRef<string[]>;
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<[number, number]>;
     selectedControl: import("@vue/composition-api").Ref<"from" | "to" | undefined>;
-    isHovering: import("@vue/composition-api").Ref<boolean>;
+    isHoveringOffset: import("@vue/composition-api").Ref<boolean>;
+    isHoveringTrack: import("@vue/composition-api").Ref<boolean>;
+    isHoveringFiller: import("@vue/composition-api").Ref<boolean>;
+    isHoveringRail: import("@vue/composition-api").ComputedRef<boolean>;
+    isHoveringThumbFrom: import("@vue/composition-api").Ref<boolean>;
+    isHoveringThumbTo: import("@vue/composition-api").Ref<boolean>;
     isDragging: import("@vue/composition-api").ComputedRef<boolean>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
@@ -102,6 +110,9 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 }, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rail: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    offset: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    track: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    filler: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     thumbFrom: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     thumbTo: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
@@ -119,7 +130,12 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     labelMarkStyles: import("@vue/composition-api").ComputedRef<string[]>;
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<[number, number]>;
     selectedControl: import("@vue/composition-api").Ref<"from" | "to" | undefined>;
-    isHovering: import("@vue/composition-api").Ref<boolean>;
+    isHoveringOffset: import("@vue/composition-api").Ref<boolean>;
+    isHoveringTrack: import("@vue/composition-api").Ref<boolean>;
+    isHoveringFiller: import("@vue/composition-api").Ref<boolean>;
+    isHoveringRail: import("@vue/composition-api").ComputedRef<boolean>;
+    isHoveringThumbFrom: import("@vue/composition-api").Ref<boolean>;
+    isHoveringThumbTo: import("@vue/composition-api").Ref<boolean>;
     isDragging: import("@vue/composition-api").ComputedRef<boolean>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: [number, number];

package/dist/esm/v2/components/or-range-slider-v3/index.js

@@ -1,4 +1,4 @@
-export { _ as OrRangeSliderV3 } from '../../OrRangeSlider-1bc7cf55.js';
+export { _ as OrRangeSliderV3 } from '../../OrRangeSlider-d34f950b.js';
 export { S as RangeSliderColor, a as RangeSliderOrientation } from '../../OrSlider.vue_rollup-plugin-vue_script-2e53b6b1.js';
 import '@vueuse/core';
 import 'vue-demi';

package/dist/esm/v2/index.js

@@ -92,7 +92,7 @@ export { _ as OrRadio } from './OrRadio-811ad5a4.js';
 export { _ as OrRadioGroup } from './OrRadioGroup-11424644.js';
 export { _ as OrRadioGroupV3 } from './OrRadioGroup-c0ad9bf3.js';
 export { _ as OrRadioV3 } from './OrRadio-81a1263e.js';
-export { _ as OrRangeSliderV3 } from './OrRangeSlider-1bc7cf55.js';
+export { _ as OrRangeSliderV3 } from './OrRangeSlider-d34f950b.js';
 export { _ as OrSliderV3 } from './OrSlider-2217ee40.js';
 export { S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from './OrSlider.vue_rollup-plugin-vue_script-2e53b6b1.js';
 export { _ as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from './OrResizeablePanel-2bb20c95.js';

package/dist/esm/v3/{OrRangeSlider-80d431a9.js → OrRangeSlider-94a100ae.js}

@@ -43,8 +43,12 @@ const RangeSliderRailOrientations = {
 };
 const RangeSliderOffset = [];
 const RangeSliderOffsetOrientations = {
-  [SliderOrientation.Horizontal]: [],
-  [SliderOrientation.Vertical]: []
+  [SliderOrientation.Horizontal]: [
+  // Box
+  'h-full'],
+  [SliderOrientation.Vertical]: [
+  // Box
+  'w-full']
 };
 const RangeSliderTrack = [
 // Shape
@@ -151,6 +155,9 @@ var script = defineComponent({
     // Refs
     const root = ref();
     const rail = ref();
+    const offset = ref();
+    const track = ref();
+    const filler = ref();
     const thumbFrom = ref();
     const thumbTo = ref();
     // Styles
@@ -215,7 +222,14 @@ var script = defineComponent({
       }
     }
     // Effects
-    const isHovering = useElementHover(rail);
+    const isHoveringOffset = useElementHover(offset);
+    const isHoveringTrack = useElementHover(track);
+    const isHoveringFiller = useElementHover(filler);
+    const isHoveringRail = computed(() => {
+      return isHoveringOffset.value || isHoveringTrack.value || isHoveringFiller.value;
+    });
+    const isHoveringThumbFrom = useElementHover(thumbFrom);
+    const isHoveringThumbTo = useElementHover(thumbTo);
     const {
       isDragging
     } = useDraggable(rail, {
@@ -253,6 +267,9 @@ var script = defineComponent({
     return {
       root,
       rail,
+      offset,
+      track,
+      filler,
       thumbFrom,
       thumbTo,
       rootStyles,
@@ -266,7 +283,12 @@ var script = defineComponent({
       labelMarkStyles,
       proxyModelValue,
       selectedControl,
-      isHovering,
+      isHoveringOffset,
+      isHoveringTrack,
+      isHoveringFiller,
+      isHoveringRail,
+      isHoveringThumbFrom,
+      isHoveringThumbTo,
       isDragging
     };
   }
@@ -278,7 +300,8 @@ const _hoisted_3 = ["disabled"];
 const _hoisted_4 = ["disabled"];
 const _hoisted_5 = ["disabled"];
 const _hoisted_6 = ["disabled"];
-const _hoisted_7 = /*#__PURE__*/createElementVNode("div", {
+const _hoisted_7 = ["disabled"];
+const _hoisted_8 = /*#__PURE__*/createElementVNode("div", {
   class: /*#__PURE__*/normalizeClass(['grow'])
 }, null, -1 /* HOISTED */);
 
@@ -293,12 +316,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     class: normalizeClass(_ctx.railStyles),
     disabled: _ctx.disabled
   }, [createElementVNode("div", {
+    ref: "offset",
     class: normalizeClass(_ctx.offsetStyles),
     style: normalizeStyle(_ctx.offsetComputedStyles),
     disabled: _ctx.disabled
   }, null, 14 /* CLASS, STYLE, PROPS */, _hoisted_3), createVNode(_component_OrTooltip, {
     class: normalizeClass(['relative', 'z-10']),
-    "is-open": !_ctx.isDragging && _ctx.isHovering || _ctx.isDragging && _ctx.selectedControl === 'from',
+    "is-open": !_ctx.isDragging && (_ctx.isHoveringRail || _ctx.isHoveringThumbFrom) || _ctx.isDragging && _ctx.selectedControl === 'from',
     content: String(_ctx.proxyModelValue[0]),
     placement: _ctx.orientation === 'horizontal' ? 'top' : 'right',
     offset: 24,
@@ -311,12 +335,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 10 /* CLASS, PROPS */, _hoisted_4)]),
     _: 1 /* STABLE */
   }, 8 /* PROPS */, ["is-open", "content", "placement"]), createElementVNode("div", {
+    ref: "track",
     class: normalizeClass(_ctx.trackStyles),
     style: normalizeStyle(_ctx.trackComputedStyles),
     disabled: _ctx.disabled
   }, null, 14 /* CLASS, STYLE, PROPS */, _hoisted_5), createVNode(_component_OrTooltip, {
     class: normalizeClass(['relative', 'z-10']),
-    "is-open": !_ctx.isDragging && _ctx.isHovering || _ctx.isDragging && _ctx.selectedControl === 'to',
+    "is-open": !_ctx.isDragging && (_ctx.isHoveringRail || _ctx.isHoveringThumbTo) || _ctx.isDragging && _ctx.selectedControl === 'to',
     content: String(_ctx.proxyModelValue[1]),
     placement: _ctx.orientation === 'horizontal' ? 'top' : 'right',
     offset: 24,
@@ -328,11 +353,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       disabled: _ctx.disabled
     }, null, 10 /* CLASS, PROPS */, _hoisted_6)]),
     _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["is-open", "content", "placement"])], 10 /* CLASS, PROPS */, _hoisted_2), createElementVNode("div", {
+  }, 8 /* PROPS */, ["is-open", "content", "placement"]), createElementVNode("div", {
+    ref: "filler",
+    class: normalizeClass(['grow', ..._ctx.offsetStyles]),
+    disabled: _ctx.disabled
+  }, null, 10 /* CLASS, PROPS */, _hoisted_7)], 10 /* CLASS, PROPS */, _hoisted_2), createElementVNode("div", {
     class: normalizeClass(_ctx.labelStyles)
   }, [createElementVNode("div", {
     class: normalizeClass(_ctx.labelMarkStyles)
-  }, toDisplayString(_ctx.minValue), 3 /* TEXT, CLASS */), _hoisted_7, createElementVNode("div", {
+  }, toDisplayString(_ctx.minValue), 3 /* TEXT, CLASS */), _hoisted_8, createElementVNode("div", {
     class: normalizeClass(_ctx.labelMarkStyles)
   }, toDisplayString(_ctx.maxValue), 3 /* TEXT, CLASS */)], 2 /* CLASS */)], 10 /* CLASS, PROPS */, _hoisted_1);
 }

package/dist/esm/v3/components/index.js

@@ -89,7 +89,7 @@ export { s as OrRadio } from '../OrRadio-40bf2c87.js';
 export { s as OrRadioGroup } from '../OrRadioGroup-00785e41.js';
 export { s as OrRadioGroupV3 } from '../OrRadioGroup-b4b6d364.js';
 export { s as OrRadioV3 } from '../OrRadio-50b0ead5.js';
-export { s as OrRangeSliderV3 } from '../OrRangeSlider-80d431a9.js';
+export { s as OrRangeSliderV3 } from '../OrRangeSlider-94a100ae.js';
 export { s as OrSliderV3, S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from '../OrSlider-2c39e9a2.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from '../OrResizeablePanel-8f76dfa6.js';
 export { F as Formats, s as OrRichTextEditorV3 } from '../OrRichTextEditor-1cb33557.js';

package/dist/esm/v3/components/or-range-slider-v3/OrRangeSlider.vue.d.ts

@@ -36,6 +36,9 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     root: import("vue-demi").Ref<HTMLElement | undefined>;
     rail: import("vue-demi").Ref<HTMLElement | undefined>;
+    offset: import("vue-demi").Ref<HTMLElement | undefined>;
+    track: import("vue-demi").Ref<HTMLElement | undefined>;
+    filler: import("vue-demi").Ref<HTMLElement | undefined>;
     thumbFrom: import("vue-demi").Ref<HTMLElement | undefined>;
     thumbTo: import("vue-demi").Ref<HTMLElement | undefined>;
     rootStyles: import("vue-demi").ComputedRef<string[]>;
@@ -53,7 +56,12 @@ declare const _default: import("vue-demi").DefineComponent<{
     labelMarkStyles: import("vue-demi").ComputedRef<string[]>;
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<[number, number]>;
     selectedControl: import("vue-demi").Ref<"from" | "to" | undefined>;
-    isHovering: import("vue-demi").Ref<boolean>;
+    isHoveringOffset: import("vue-demi").Ref<boolean>;
+    isHoveringTrack: import("vue-demi").Ref<boolean>;
+    isHoveringFiller: import("vue-demi").Ref<boolean>;
+    isHoveringRail: import("vue-demi").ComputedRef<boolean>;
+    isHoveringThumbFrom: import("vue-demi").Ref<boolean>;
+    isHoveringThumbTo: import("vue-demi").Ref<boolean>;
     isDragging: import("vue-demi").ComputedRef<boolean>;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {

package/dist/esm/v3/components/or-range-slider-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrRangeSliderV3 } from '../../OrRangeSlider-80d431a9.js';
+export { s as OrRangeSliderV3 } from '../../OrRangeSlider-94a100ae.js';
 export { S as RangeSliderColor, a as RangeSliderOrientation } from '../../OrSlider-2c39e9a2.js';
 import '@vueuse/core';
 import 'vue-demi';

package/dist/esm/v3/index.js

@@ -89,7 +89,7 @@ export { s as OrRadio } from './OrRadio-40bf2c87.js';
 export { s as OrRadioGroup } from './OrRadioGroup-00785e41.js';
 export { s as OrRadioGroupV3 } from './OrRadioGroup-b4b6d364.js';
 export { s as OrRadioV3 } from './OrRadio-50b0ead5.js';
-export { s as OrRangeSliderV3 } from './OrRangeSlider-80d431a9.js';
+export { s as OrRangeSliderV3 } from './OrRangeSlider-94a100ae.js';
 export { s as OrSliderV3, S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from './OrSlider-2c39e9a2.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from './OrResizeablePanel-8f76dfa6.js';
 export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-1cb33557.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "8.8.4-beta.3740.0",
+  "version": "8.8.4-beta.3743.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -40,7 +40,7 @@
     "@codemirror/lang-json": "6.0.1",
     "@codemirror/lang-markdown": "6.1.1",
     "@floating-ui/dom": "1.4.2",
-    "@onereach/styles": "^6.4.1-beta.3740.0",
+    "@onereach/styles": "^6.4.1-beta.3743.0",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",

package/src/components/or-range-slider-v3/OrRangeSlider.vue

@@ -10,6 +10,7 @@
       :disabled="disabled"
     >
       <div
+        ref="offset"
         :class="offsetStyles"
         :style="offsetComputedStyles"
         :disabled="disabled"
@@ -17,7 +18,7 @@
 
       <OrTooltip
         :class="['relative', 'z-10']"
-        :is-open="(!isDragging && isHovering) || (isDragging && selectedControl === 'from')"
+        :is-open="(!isDragging && (isHoveringRail || isHoveringThumbFrom)) || (isDragging && selectedControl === 'from')"
         :content="String(proxyModelValue[0])"
         :placement="orientation === 'horizontal' ? 'top' : 'right'"
         :offset="24"
@@ -31,6 +32,7 @@
       </OrTooltip>
 
       <div
+        ref="track"
         :class="trackStyles"
         :style="trackComputedStyles"
         :disabled="disabled"
@@ -38,7 +40,7 @@
 
       <OrTooltip
         :class="['relative', 'z-10']"
-        :is-open="(!isDragging && isHovering) || (isDragging && selectedControl === 'to')"
+        :is-open="(!isDragging && (isHoveringRail || isHoveringThumbTo)) || (isDragging && selectedControl === 'to')"
         :content="String(proxyModelValue[1])"
         :placement="orientation === 'horizontal' ? 'top' : 'right'"
         :offset="24"
@@ -50,6 +52,12 @@
           :disabled="disabled"
         />
       </OrTooltip>
+
+      <div
+        ref="filler"
+        :class="['grow', ...offsetStyles]"
+        :disabled="disabled"
+      />
     </div>
 
     <div :class="labelStyles">
@@ -138,6 +146,9 @@ export default defineComponent({
     // Refs
     const root = ref<HTMLElement>();
     const rail = ref<HTMLElement>();
+    const offset = ref<HTMLElement>();
+    const track = ref<HTMLElement>();
+    const filler = ref<HTMLElement>();
     const thumbFrom = ref<HTMLElement>();
     const thumbTo = ref<HTMLElement>();
 
@@ -263,7 +274,16 @@ export default defineComponent({
     }
 
     // Effects
-    const isHovering = useElementHover(rail);
+    const isHoveringOffset = useElementHover(offset);
+    const isHoveringTrack = useElementHover(track);
+    const isHoveringFiller = useElementHover(filler);
+
+    const isHoveringRail = computed(() => {
+      return isHoveringOffset.value || isHoveringTrack.value || isHoveringFiller.value;
+    });
+
+    const isHoveringThumbFrom = useElementHover(thumbFrom);
+    const isHoveringThumbTo = useElementHover(thumbTo);
 
     const { isDragging } = useDraggable(rail, {
       onStart: (position, event) => {
@@ -303,6 +323,9 @@ export default defineComponent({
     return {
       root,
       rail,
+      offset,
+      track,
+      filler,
       thumbFrom,
       thumbTo,
       rootStyles,
@@ -318,7 +341,12 @@ export default defineComponent({
       proxyModelValue,
       selectedControl,
 
-      isHovering,
+      isHoveringOffset,
+      isHoveringTrack,
+      isHoveringFiller,
+      isHoveringRail,
+      isHoveringThumbFrom,
+      isHoveringThumbTo,
       isDragging,
     };
   },

package/src/components/or-range-slider-v3/styles.ts

@@ -63,8 +63,15 @@ export const RangeSliderRailOrientations: Record<RangeSliderOrientation, string[
 export const RangeSliderOffset: string[] = [];
 
 export const RangeSliderOffsetOrientations: Record<RangeSliderOrientation, string[]> = {
-  [RangeSliderOrientation.Horizontal]: [],
-  [RangeSliderOrientation.Vertical]: [],
+  [RangeSliderOrientation.Horizontal]: [
+    // Box
+    'h-full',
+  ],
+
+  [RangeSliderOrientation.Vertical]: [
+    // Box
+    'w-full',
+  ],
 };
 
 export const RangeSliderTrack: string[] = [