lexgui 0.7.0 → 0.7.2

package/build/extensions/videoeditor.js

@@ -4,6 +4,7 @@ if(!LX) {
     throw("lexgui.js missing!");
 }
 
+LX.extensions.push( 'TimeBar' );
 LX.extensions.push( 'VideoEditor' );
 
 /**
@@ -304,6 +305,8 @@ class TimeBar {
         this._draw();
     }
 }
+LX.TimeBar = TimeBar;
+
 
 /**
  * @class VideoEditor
@@ -795,4 +798,4 @@ class VideoEditor {
 
 LX.VideoEditor = VideoEditor;
 
-export { VideoEditor }
+export { VideoEditor, TimeBar }

package/build/lexgui.css

@@ -354,6 +354,7 @@ body.noevents * {
 
 .orange { color: orange }
 .gray { color: gray }
+.pipelineblue { color: #007acc }
 .dodgerblue { color: dodgerblue }
 .munsellblue { color: #0093af }
 .pictonblue { color: #45B1E8 }
@@ -361,6 +362,7 @@ body.noevents * {
 .goldenrod { color: goldenrod }
 .metallicyellow { color: #FDCC0D }
 .heliotrope { color: #d460ff }
+.blueviolet { color: blueviolet }
 
 svg.xxs { width: var(--svg-size-xxs); height: var(--svg-size-xxs); }
 svg.xs { width: var(--svg-size-xs); height: var(--svg-size-xs); }
@@ -925,6 +927,8 @@ a svg, svg path {
 	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
 	will-change: transform, opacity;
     animation-name: slideUpAndFade;
+    z-index: 150;
+    pointer-events: none;
 }
 
 .lextooltip[data-closed] {
@@ -2478,7 +2482,7 @@ input[type=number] {
     --range-thumb-size: 1rem;
     --range-progress: currentColor;
     --range-fill: 1;
-    --range-thumb-padding: 0.15rem;
+    --range-thumb-padding: 0.2rem;
     --range-bg: color-mix(in oklab,currentColor 20%,#0000);
     --range-dir: 1;
     --radius-selector: 0.5rem;
@@ -2521,7 +2525,19 @@ input[type=number] {
 
 .lexrangeslider.no-fill {
     --range-fill: 0;
-    --range-bg: currentColor;
+    --in-range-color: color-mix(in oklab,currentColor 30%,#0000);
+    --range-bg: linear-gradient(to right,
+    var(--in-range-color) 0%,
+    var(--in-range-color) calc(var(--range-min-value) + var(--range-fix-min-offset)),
+    currentColor calc(var(--range-min-value) + var(--range-fix-min-offset)),
+    currentColor calc( var(--range-max-value) - var(--range-fix-max-offset)),
+    var(--in-range-color) calc( var(--range-max-value) - var(--range-fix-max-offset)),
+    var(--in-range-color) 100%);
+    background: var(--range-bg);
+}
+
+.lexrangeslider.overlap {
+    --range-bg: transparent;
 }
 
 .lexrangeslider:hover {
@@ -2560,6 +2576,7 @@ input[type=number] {
     background-color: currentColor;
     position: relative;
     top: 50%;
+    pointer-events: all !important;
     transform: translateY(-50%);
 }
 
@@ -2574,6 +2591,7 @@ input[type=number] {
     background-color: currentColor;
     position: relative;
     top: 50%;
+    pointer-events: all !important;
 }
 
 /* OTP Component */
@@ -4994,10 +5012,6 @@ ul.lexassetscontent {
     padding-inline: 1rem;
 }
 
-.lexcodetabinfo .lexinlinecomponents {
-    justify-content: end;
-}
-
 .lexcodegutter {
     width: 48px;
     height: calc(100% - 65px);
@@ -5366,61 +5380,52 @@ ul.lexassetscontent {
 .cm-std { color: #d181d1; }   /* statements & declarations */
 .cm-kwd { color: #2194ce; }   /* keyword */
 .cm-com { color: #5cab5a; }   /* comment */
+.cm-typ { color: #36c0b0; }   /* type */
+.cm-dec { color: #b1ce9b; }   /* decimal */
 
-.cm-typ.javascript { color: #36c0b0; }  /* type */
-.cm-dec.javascript { color: #b1ce9b; }  /* decimal */
+.cm-bln.javascript { color: #d2d6f5; }   /* builtin */
 .cm-sym.javascript { color: #e7ded2; }  /* symbol */
-.cm-mtd.javascript { color: #e0cc68 }   /* method */
+.cm-mtd.javascript { color: #e9d98a }   /* method */
+
+.cm-mtd.typescript { color: #e9d98a }   /* method */
+.cm-enu.typescript { color: #4cacff }   /* enums */
 
-.cm-typ.c { color: #36c0b0; }   /* type */
 .cm-bln.c { color: #d44141; }   /* builtin */
 .cm-dec.c { color: #2ddf53; }   /* decimal */
 .cm-sym.c { color: #e7ded2; }   /* symbol */
 .cm-mtd.c { color: #7a9ae0 }    /* method */
 .cm-ppc.c { color: #969696 }    /* preprocessor */
 
-.cm-typ.cpp { color: #36c0b0; }   /* type */
 .cm-bln.cpp { color: #d44141; }   /* builtin */
 .cm-dec.cpp { color: #2ddf53; }   /* decimal */
 .cm-sym.cpp { color: #e7ded2; }   /* symbol */
 .cm-mtd.cpp { color: #7a9ae0 }    /* method */
 .cm-ppc.cpp { color: #969696 }    /* preprocessor */
+.cm-enu.cpp { color: #b1ce9b }    /* enums */
 
 .cm-sym.cmake { color: #cf6dcf; }  /* symbol */
 
 .cm-kwd.css { color: #e8be53; }   /* keyword */
 .cm-typ.css { color: #b7c3ec; }   /* type */
 .cm-bln.css { color: #2194ce; }   /* builtin */
-.cm-dec.css { color: #b1ce9b; }   /* decimal */
 .cm-sym.css { color: #f9d620; }   /* symbol */
 .cm-mtd.css { color: #e0cc68; }   /* method */
 
-.cm-dec.json { color: #b1ce9b; }  /* decimal */
 .cm-sym.json { color: #cf6dcf; }  /* symbol */
 
-.cm-typ.glsl { color: #36c0b0; }  /* type */
-.cm-dec.glsl { color: #b1ce9b; }  /* decimal */
 .cm-sym.glsl { color: #f9cb20; }  /* symbol */
 .cm-mtd.glsl { color: #e0cc68; }  /* method */
 
-.cm-typ.wgsl { color: #36c0b0; }  /* type */
-.cm-dec.wgsl { color: #b1ce9b; }  /* decimal */
 .cm-mtd.wgsl { color: #dfe093; }  /* method */
 .cm-sym.wgsl { color: #f9cb20; }  /* symbol */
 .cm-ppc.wgsl { color: #99caf1; }  /* preprocessor */
 
-.cm-typ.rust { color: #36c0b0; }  /* type */
-.cm-dec.rust { color: #b1ce9b; }  /* decimal */
 .cm-sym.rust { color: #e7ded2; }  /* symbol */
 .cm-mtd.rust { color: #e0cc68 }   /* method */
 
-.cm-typ.python { color: #36c0b0; }  /* type */
-.cm-dec.python { color: #b1ce9b; }  /* decimal */
 .cm-sym.python { color: #e7ded2; }  /* symbol */
 .cm-mtd.python { color: #e0cc68 }   /* method */
 
-.cm-typ.batch { color: #36c0b0; }   /* type */
-.cm-dec.batch { color: #b1ce9b; }   /* decimal */
 .cm-sym.batch { color: #dfd85e; }   /* symbol */
 
 .cm-bln.html { color: #a1d2f0; }    /* builtin */
@@ -5431,6 +5436,10 @@ ul.lexassetscontent {
 
 .cm-bln.markdown { color: #a1d2f0; }  /* builtin */
 
+.cm-sym.php { color: #cf6dcf; }  /* symbol */
+.cm-mtd.php { color: #e0cc68 }   /* method */
+.cm-bln.php { color: #e0cc68; }  /* builtin */
+
 :root[data-theme="light"] .lexcodeeditor pre.active-line {
     background-color: #e4e0e0ab;
 }

package/build/lexgui.js

@@ -14,7 +14,7 @@ console.warn( 'Script _build/lexgui.js_ is depracated and will be removed soon.
 */
 
 const LX = {
-    version: "0.7.0",
+    version: "0.7.2",
     ready: false,
     extensions: [], // Store extensions used
     signals: {}, // Events and triggers
@@ -769,7 +769,8 @@ class Popover {
         this.root.tabIndex = "1";
         this.root.className = "lexpopover";
 
-        const nestedDialog = trigger.closest( "dialog" );
+        const refElement = trigger ?? this.reference;
+        const nestedDialog = refElement.closest( "dialog" );
         if( nestedDialog && nestedDialog.dataset[ "modal" ] == 'true' )
         {
             this._parent = nestedDialog;
@@ -4602,6 +4603,7 @@ const RAW_ICONS = {
     "Discord": [640, 512, [], "solid", "M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"],
     "Google": [488, 512, [], "solid", "M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"],
     "Js": [32, 32, [], "solid", "M18.774 19.7a3.73 3.73 0 0 0 3.376 2.078c1.418 0 2.324-.709 2.324-1.688c0-1.173-.931-1.589-2.491-2.272l-.856-.367c-2.469-1.052-4.11-2.37-4.11-5.156c0-2.567 1.956-4.52 5.012-4.52A5.06 5.06 0 0 1 26.9 10.52l-2.665 1.711a2.33 2.33 0 0 0-2.2-1.467a1.49 1.49 0 0 0-1.638 1.467c0 1.027.636 1.442 2.1 2.078l.856.366c2.908 1.247 4.549 2.518 4.549 5.376c0 3.081-2.42 4.769-5.671 4.769a6.58 6.58 0 0 1-6.236-3.5ZM6.686 20c.538.954 1.027 1.76 2.2 1.76c1.124 0 1.834-.44 1.834-2.15V7.975h3.422v11.683c0 3.543-2.078 5.156-5.11 5.156A5.31 5.31 0 0 1 3.9 21.688Z"],
+    "Ts": [32, 32, [], "solid", "M23.827 8.243a4.4 4.4 0 0 1 2.223 1.281a6 6 0 0 1 .852 1.143c.011.045-1.534 1.083-2.471 1.662c-.034.023-.169-.124-.322-.35a2.01 2.01 0 0 0-1.67-1c-1.077-.074-1.771.49-1.766 1.433a1.3 1.3 0 0 0 .153.666c.237.49.677.784 2.059 1.383c2.544 1.095 3.636 1.817 4.31 2.843a5.16 5.16 0 0 1 .416 4.333a4.76 4.76 0 0 1-3.932 2.815a11 11 0 0 1-2.708-.028a6.53 6.53 0 0 1-3.616-1.884a6.3 6.3 0 0 1-.926-1.371a3 3 0 0 1 .327-.208c.158-.09.756-.434 1.32-.761l1.024-.6l.214.312a4.8 4.8 0 0 0 1.35 1.292a3.3 3.3 0 0 0 3.458-.175a1.545 1.545 0 0 0 .2-1.974c-.276-.395-.84-.727-2.443-1.422a8.8 8.8 0 0 1-3.349-2.055a4.7 4.7 0 0 1-.976-1.777a7.1 7.1 0 0 1-.062-2.268a4.33 4.33 0 0 1 3.644-3.374a9 9 0 0 1 2.691.084m-8.343 1.483l.011 1.454h-4.63v13.148H7.6V11.183H2.97V9.755a14 14 0 0 1 .04-1.466c.017-.023 2.832-.034 6.245-.028l6.211.017Z"],
     "Linux": [448, 512, [], "regular", "M220.8 123.3c1 .5 1.8 1.7 3 1.7 1.1 0 2.8-.4 2.9-1.5.2-1.4-1.9-2.3-3.2-2.9-1.7-.7-3.9-1-5.5-.1-.4.2-.8.7-.6 1.1.3 1.3 2.3 1.1 3.4 1.7zm-21.9 1.7c1.2 0 2-1.2 3-1.7 1.1-.6 3.1-.4 3.5-1.6.2-.4-.2-.9-.6-1.1-1.6-.9-3.8-.6-5.5.1-1.3.6-3.4 1.5-3.2 2.9.1 1 1.8 1.5 2.8 1.4zM420 403.8c-3.6-4-5.3-11.6-7.2-19.7-1.8-8.1-3.9-16.8-10.5-22.4-1.3-1.1-2.6-2.1-4-2.9-1.3-.8-2.7-1.5-4.1-2 9.2-27.3 5.6-54.5-3.7-79.1-11.4-30.1-31.3-56.4-46.5-74.4-17.1-21.5-33.7-41.9-33.4-72C311.1 85.4 315.7.1 234.8 0 132.4-.2 158 103.4 156.9 135.2c-1.7 23.4-6.4 41.8-22.5 64.7-18.9 22.5-45.5 58.8-58.1 96.7-6 17.9-8.8 36.1-6.2 53.3-6.5 5.8-11.4 14.7-16.6 20.2-4.2 4.3-10.3 5.9-17 8.3s-14 6-18.5 14.5c-2.1 3.9-2.8 8.1-2.8 12.4 0 3.9.6 7.9 1.2 11.8 1.2 8.1 2.5 15.7.8 20.8-5.2 14.4-5.9 24.4-2.2 31.7 3.8 7.3 11.4 10.5 20.1 12.3 17.3 3.6 40.8 2.7 59.3 12.5 19.8 10.4 39.9 14.1 55.9 10.4 11.6-2.6 21.1-9.6 25.9-20.2 12.5-.1 26.3-5.4 48.3-6.6 14.9-1.2 33.6 5.3 55.1 4.1.6 2.3 1.4 4.6 2.5 6.7v.1c8.3 16.7 23.8 24.3 40.3 23 16.6-1.3 34.1-11 48.3-27.9 13.6-16.4 36-23.2 50.9-32.2 7.4-4.5 13.4-10.1 13.9-18.3.4-8.2-4.4-17.3-15.5-29.7zM223.7 87.3c9.8-22.2 34.2-21.8 44-.4 6.5 14.2 3.6 30.9-4.3 40.4-1.6-.8-5.9-2.6-12.6-4.9 1.1-1.2 3.1-2.7 3.9-4.6 4.8-11.8-.2-27-9.1-27.3-7.3-.5-13.9 10.8-11.8 23-4.1-2-9.4-3.5-13-4.4-1-6.9-.3-14.6 2.9-21.8zM183 75.8c10.1 0 20.8 14.2 19.1 33.5-3.5 1-7.1 2.5-10.2 4.6 1.2-8.9-3.3-20.1-9.6-19.6-8.4.7-9.8 21.2-1.8 28.1 1 .8 1.9-.2-5.9 5.5-15.6-14.6-10.5-52.1 8.4-52.1zm-13.6 60.7c6.2-4.6 13.6-10 14.1-10.5 4.7-4.4 13.5-14.2 27.9-14.2 7.1 0 15.6 2.3 25.9 8.9 6.3 4.1 11.3 4.4 22.6 9.3 8.4 3.5 13.7 9.7 10.5 18.2-2.6 7.1-11 14.4-22.7 18.1-11.1 3.6-19.8 16-38.2 14.9-3.9-.2-7-1-9.6-2.1-8-3.5-12.2-10.4-20-15-8.6-4.8-13.2-10.4-14.7-15.3-1.4-4.9 0-9 4.2-12.3zm3.3 334c-2.7 35.1-43.9 34.4-75.3 18-29.9-15.8-68.6-6.5-76.5-21.9-2.4-4.7-2.4-12.7 2.6-26.4v-.2c2.4-7.6.6-16-.6-23.9-1.2-7.8-1.8-15 .9-20 3.5-6.7 8.5-9.1 14.8-11.3 10.3-3.7 11.8-3.4 19.6-9.9 5.5-5.7 9.5-12.9 14.3-18 5.1-5.5 10-8.1 17.7-6.9 8.1 1.2 15.1 6.8 21.9 16l19.6 35.6c9.5 19.9 43.1 48.4 41 68.9zm-1.4-25.9c-4.1-6.6-9.6-13.6-14.4-19.6 7.1 0 14.2-2.2 16.7-8.9 2.3-6.2 0-14.9-7.4-24.9-13.5-18.2-38.3-32.5-38.3-32.5-13.5-8.4-21.1-18.7-24.6-29.9s-3-23.3-.3-35.2c5.2-22.9 18.6-45.2 27.2-59.2 2.3-1.7.8 3.2-8.7 20.8-8.5 16.1-24.4 53.3-2.6 82.4.6-20.7 5.5-41.8 13.8-61.5 12-27.4 37.3-74.9 39.3-112.7 1.1.8 4.6 3.2 6.2 4.1 4.6 2.7 8.1 6.7 12.6 10.3 12.4 10 28.5 9.2 42.4 1.2 6.2-3.5 11.2-7.5 15.9-9 9.9-3.1 17.8-8.6 22.3-15 7.7 30.4 25.7 74.3 37.2 95.7 6.1 11.4 18.3 35.5 23.6 64.6 3.3-.1 7 .4 10.9 1.4 13.8-35.7-11.7-74.2-23.3-84.9-4.7-4.6-4.9-6.6-2.6-6.5 12.6 11.2 29.2 33.7 35.2 59 2.8 11.6 3.3 23.7.4 35.7 16.4 6.8 35.9 17.9 30.7 34.8-2.2-.1-3.2 0-4.2 0 3.2-10.1-3.9-17.6-22.8-26.1-19.6-8.6-36-8.6-38.3 12.5-12.1 4.2-18.3 14.7-21.4 27.3-2.8 11.2-3.6 24.7-4.4 39.9-.5 7.7-3.6 18-6.8 29-32.1 22.9-76.7 32.9-114.3 7.2zm257.4-11.5c-.9 16.8-41.2 19.9-63.2 46.5-13.2 15.7-29.4 24.4-43.6 25.5s-26.5-4.8-33.7-19.3c-4.7-11.1-2.4-23.1 1.1-36.3 3.7-14.2 9.2-28.8 9.9-40.6.8-15.2 1.7-28.5 4.2-38.7 2.6-10.3 6.6-17.2 13.7-21.1.3-.2.7-.3 1-.5.8 13.2 7.3 26.6 18.8 29.5 12.6 3.3 30.7-7.5 38.4-16.3 9-.3 15.7-.9 22.6 5.1 9.9 8.5 7.1 30.3 17.1 41.6 10.6 11.6 14 19.5 13.7 24.6zM173.3 148.7c2 1.9 4.7 4.5 8 7.1 6.6 5.2 15.8 10.6 27.3 10.6 11.6 0 22.5-5.9 31.8-10.8 4.9-2.6 10.9-7 14.8-10.4s5.9-6.3 3.1-6.6-2.6 2.6-6 5.1c-4.4 3.2-9.7 7.4-13.9 9.8-7.4 4.2-19.5 10.2-29.9 10.2s-18.7-4.8-24.9-9.7c-3.1-2.5-5.7-5-7.7-6.9-1.5-1.4-1.9-4.6-4.3-4.9-1.4-.1-1.8 3.7 1.7 6.5z"],
     "SquareJs": [448, 512, [], "solid", "M448 96c0-35.3-28.7-64-64-64H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96zM180.9 444.9c-33.7 0-53.2-17.4-63.2-38.5L152 385.7c6.6 11.7 12.6 21.6 27.1 21.6c13.8 0 22.6-5.4 22.6-26.5V237.7h42.1V381.4c0 43.6-25.6 63.5-62.9 63.5zm85.8-43L301 382.1c9 14.7 20.8 25.6 41.5 25.6c17.4 0 28.6-8.7 28.6-20.8c0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5c0-31.6 24.1-55.6 61.6-55.6c26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18c-12.3 0-20.1 7.8-20.1 18c0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2c0 37.8-29.8 58.6-69.7 58.6c-39.1 0-64.4-18.6-76.7-43z"],
     "Safari": [512, 512, [], "solid", "M274.69,274.69l-37.38-37.38L166,346ZM256,8C119,8,8,119,8,256S119,504,256,504,504,393,504,256,393,8,256,8ZM411.85,182.79l14.78-6.13A8,8,0,0,1,437.08,181h0a8,8,0,0,1-4.33,10.46L418,197.57a8,8,0,0,1-10.45-4.33h0A8,8,0,0,1,411.85,182.79ZM314.43,94l6.12-14.78A8,8,0,0,1,331,74.92h0a8,8,0,0,1,4.33,10.45l-6.13,14.78a8,8,0,0,1-10.45,4.33h0A8,8,0,0,1,314.43,94ZM256,60h0a8,8,0,0,1,8,8V84a8,8,0,0,1-8,8h0a8,8,0,0,1-8-8V68A8,8,0,0,1,256,60ZM181,74.92a8,8,0,0,1,10.46,4.33L197.57,94a8,8,0,1,1-14.78,6.12l-6.13-14.78A8,8,0,0,1,181,74.92Zm-63.58,42.49h0a8,8,0,0,1,11.31,0L140,128.72A8,8,0,0,1,140,140h0a8,8,0,0,1-11.31,0l-11.31-11.31A8,8,0,0,1,117.41,117.41ZM60,256h0a8,8,0,0,1,8-8H84a8,8,0,0,1,8,8h0a8,8,0,0,1-8,8H68A8,8,0,0,1,60,256Zm40.15,73.21-14.78,6.13A8,8,0,0,1,74.92,331h0a8,8,0,0,1,4.33-10.46L94,314.43a8,8,0,0,1,10.45,4.33h0A8,8,0,0,1,100.15,329.21Zm4.33-136h0A8,8,0,0,1,94,197.57l-14.78-6.12A8,8,0,0,1,74.92,181h0a8,8,0,0,1,10.45-4.33l14.78,6.13A8,8,0,0,1,104.48,193.24ZM197.57,418l-6.12,14.78a8,8,0,0,1-14.79-6.12l6.13-14.78A8,8,0,1,1,197.57,418ZM264,444a8,8,0,0,1-8,8h0a8,8,0,0,1-8-8V428a8,8,0,0,1,8-8h0a8,8,0,0,1,8,8Zm67-6.92h0a8,8,0,0,1-10.46-4.33L314.43,418a8,8,0,0,1,4.33-10.45h0a8,8,0,0,1,10.45,4.33l6.13,14.78A8,8,0,0,1,331,437.08Zm63.58-42.49h0a8,8,0,0,1-11.31,0L372,383.28A8,8,0,0,1,372,372h0a8,8,0,0,1,11.31,0l11.31,11.31A8,8,0,0,1,394.59,394.59ZM286.25,286.25,110.34,401.66,225.75,225.75,401.66,110.34ZM437.08,331h0a8,8,0,0,1-10.45,4.33l-14.78-6.13a8,8,0,0,1-4.33-10.45h0A8,8,0,0,1,418,314.43l14.78,6.12A8,8,0,0,1,437.08,331ZM444,264H428a8,8,0,0,1-8-8h0a8,8,0,0,1,8-8h16a8,8,0,0,1,8,8h0A8,8,0,0,1,444,264Z"],
@@ -4615,6 +4617,7 @@ const RAW_ICONS = {
     "Windows": [448, 512, [], "solid", "M0 93.7l183.6-25.3v177.4H0V93.7zm0 324.6l183.6 25.3V268.4H0v149.9zm203.8 28L448 480V268.4H203.8v177.9zm0-380.6v180.1H448V32L203.8 65.7z"],
     "Whatsapp": [448, 512, [], "regular", "M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"],
     "X-Twitter": [512, 512, [], "regular", "M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"],
+    "Php": [512, 512, [], "solid", "M170.322 349.808c-2.4-15.66-9-28.38-25.02-34.531c-6.27-2.4-11.7-6.78-17.88-9.54c-7.02-3.15-14.16-6.15-21.57-8.1c-5.61-1.5-10.83 1.02-14.16 5.94c-3.15 4.62-.87 8.97 1.77 12.84c2.97 4.35 6.27 8.49 9.6 12.57c5.52 6.78 11.37 13.29 16.74 20.161c5.13 6.57 9.51 13.86 8.76 22.56c-1.65 19.08-10.29 34.891-24.21 47.76c-1.53 1.38-4.23 2.37-6.21 2.19c-8.88-.96-16.95-4.32-23.46-10.53c-7.47-7.11-6.33-15.48 2.61-20.67c2.13-1.23 4.35-2.37 6.3-3.87c5.46-4.11 7.29-11.13 4.32-17.22c-1.41-2.94-3-6.12-5.34-8.25c-11.43-10.41-22.651-21.151-34.891-30.63C18.01 307.447 2.771 276.968.43 240.067c-2.64-40.981 6.87-79.231 28.5-114.242c8.19-13.29 17.73-25.951 32.37-32.52c9.96-4.47 20.88-6.99 31.531-9.78c29.311-7.71 58.89-13.5 89.401-8.34c26.28 4.41 45.511 17.94 54.331 43.77c5.79 16.89 7.17 34.35 5.37 52.231c-3.54 35.131-29.49 66.541-63.331 75.841c-14.67 4.02-22.68 1.77-31.5-10.44c-6.33-8.79-11.58-18.36-17.25-27.631c-.84-1.38-1.44-2.97-2.16-4.44c-.69-1.47-1.44-2.88-2.16-4.35c2.13 15.24 5.67 29.911 13.98 42.99c4.5 7.11 10.5 12.36 19.29 13.14c32.34 2.91 59.641-7.71 79.021-33.721c21.69-29.101 26.461-62.581 20.19-97.831c-1.23-6.96-3.3-13.77-4.77-20.7c-.99-4.47.78-7.77 5.19-9.33c2.04-.69 4.14-1.26 6.18-1.68c26.461-5.7 53.221-7.59 80.191-4.86c30.601 3.06 59.551 11.46 85.441 28.471c40.531 26.67 65.641 64.621 79.291 110.522c1.98 6.66 2.28 13.95 2.46 20.971c.12 4.68-2.88 5.91-6.45 2.97c-3.93-3.21-7.53-6.87-10.92-10.65c-3.15-3.57-5.67-7.65-8.73-11.4c-2.37-2.94-4.44-2.49-5.58 1.17c-.72 2.22-1.35 4.41-1.98 6.63c-7.08 25.26-18.24 48.3-36.33 67.711c-2.52 2.73-4.77 6.78-5.07 10.38c-.78 9.96-1.35 20.13-.39 30.06c1.98 21.331 5.07 42.57 7.47 63.871c1.35 12.03-2.52 19.11-13.83 23.281c-7.95 2.91-16.47 5.04-24.87 5.64c-13.38.93-26.88.27-40.32.27c-.36-15 .93-29.731-13.17-37.771c2.73-11.13 5.88-21.69 7.77-32.49c1.56-8.97.24-17.79-6.06-25.14c-5.91-6.93-13.32-8.82-20.101-4.86c-20.43 11.91-41.671 11.97-63.301 4.17c-9.93-3.6-16.86-1.56-22.351 7.5c-5.91 9.75-8.4 20.7-7.74 31.771c.84 13.95 3.27 27.75 5.13 41.64c1.02 7.77.15 9.78-7.56 11.76c-17.13 4.35-34.56 4.83-52.081 3.42c-.93-.09-1.86-.48-2.46-.63c-.87-14.55.66-29.671-16.68-37.411c7.68-16.29 6.63-33.18 3.99-50.07l-.06-.15zm-103.561-57.09c2.55-2.4 4.59-6.15 5.31-9.6c1.8-8.64-4.68-20.22-12.18-23.43c-3.99-1.74-7.47-1.11-10.29 2.07c-6.87 7.77-13.65 15.63-20.401 23.521c-1.14 1.35-2.16 2.94-2.97 4.53c-2.7 5.19-1.11 8.97 4.65 10.38c3.48.87 7.08 1.05 10.65 1.56c9.3-.9 18.3-2.46 25.23-9zm.78-86.371c-.03-6.18-5.19-11.34-11.28-11.37c-6.27-.03-11.67 5.58-11.46 11.76c.27 6.21 5.43 11.19 11.61 11.07c6.24-.09 11.22-5.19 11.16-11.43z"],
     // Internals Override
     "Keyboard": [576, 512, [], "regular", "M64 112c-8.8 0-16 7.2-16 16l0 256c0 8.8 7.2 16 16 16l448 0c8.8 0 16-7.2 16-16l0-256c0-8.8-7.2-16-16-16L64 112zM0 128C0 92.7 28.7 64 64 64l448 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 448c-35.3 0-64-28.7-64-64L0 128zM176 320l224 0c8.8 0 16 7.2 16 16l0 16c0 8.8-7.2 16-16 16l-224 0c-8.8 0-16-7.2-16-16l0-16c0-8.8 7.2-16 16-16zm-72-72c0-8.8 7.2-16 16-16l16 0c8.8 0 16 7.2 16 16l0 16c0 8.8-7.2 16-16 16l-16 0c-8.8 0-16-7.2-16-16l0-16zm16-96l16 0c8.8 0 16 7.2 16 16l0 16c0 8.8-7.2 16-16 16l-16 0c-8.8 0-16-7.2-16-16l0-16c0-8.8 7.2-16 16-16zm64 96c0-8.8 7.2-16 16-16l16 0c8.8 0 16 7.2 16 16l0 16c0 8.8-7.2 16-16 16l-16 0c-8.8 0-16-7.2-16-16l0-16zm16-96l16 0c8.8 0 16 7.2 16 16l0 16c0 8.8-7.2 16-16 16l-16 0c-8.8 0-16-7.2-16-16l0-16c0-8.8 7.2-16 16-16zm64 96c0-8.8 7.2-16 16-16l16 0c8.8 0 16 7.2 16 16l0 16c0 8.8-7.2 16-16 16l-16 0c-8.8 0-16-7.2-16-16l0-16zm16-96l16 0c8.8 0 16 7.2 16 16l0 16c0 8.8-7.2 16-16 16l-16 0c-8.8 0-16-7.2-16-16l0-16c0-8.8 7.2-16 16-16zm64 96c0-8.8 7.2-16 16-16l16 0c8.8 0 16 7.2 16 16l0 16c0 8.8-7.2 16-16 16l-16 0c-8.8 0-16-7.2-16-16l0-16zm16-96l16 0c8.8 0 16 7.2 16 16l0 16c0 8.8-7.2 16-16 16l-16 0c-8.8 0-16-7.2-16-16l0-16c0-8.8 7.2-16 16-16zm64 96c0-8.8 7.2-16 16-16l16 0c8.8 0 16 7.2 16 16l0 16c0 8.8-7.2 16-16 16l-16 0c-8.8 0-16-7.2-16-16l0-16zm16-96l16 0c8.8 0 16 7.2 16 16l0 16c0 8.8-7.2 16-16 16l-16 0c-8.8 0-16-7.2-16-16l0-16c0-8.8 7.2-16 16-16z"],
     "IdCard": [576, 512, [], "regular", "M528 160l0 256c0 8.8-7.2 16-16 16l-192 0c0-44.2-35.8-80-80-80l-64 0c-44.2 0-80 35.8-80 80l-32 0c-8.8 0-16-7.2-16-16l0-256 480 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l448 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zM272 256a64 64 0 1 0 -128 0 64 64 0 1 0 128 0zm104-48c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-80 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-80 0z"],
@@ -4795,7 +4798,7 @@ LX.flushCss = flushCss;
  */
 function deleteElement( element )
 {
-    if( element !== undefined ) element.remove();
+    if( element ) element.remove();
 }
 
 LX.deleteElement = deleteElement;
@@ -6209,7 +6212,10 @@ LX.makeContainer = makeContainer;
  * @param {Object} options
  * side: Side of the tooltip
  * offset: Tooltip margin offset
+ * offsetX: Tooltip margin horizontal offset
+ * offsetY: Tooltip margin vertical offset
  * active: Tooltip active by default [true]
+ * callback: Callback function to execute when the tooltip is shown
  */
 
 function asTooltip( trigger, content, options = {} )
@@ -6219,7 +6225,10 @@ function asTooltip( trigger, content, options = {} )
     trigger.dataset[ "disableTooltip" ] = !( options.active ?? true );
 
     let tooltipDom = null;
-    let tooltipParent = LX.root;
+
+    const _offset = options.offset;
+    const _offsetX = options.offsetX ?? ( _offset ?? 0 );
+    const _offsetY = options.offsetY ?? ( _offset ?? 6 );
 
     trigger.addEventListener( "mouseenter", function(e) {
 
@@ -6230,13 +6239,10 @@ function asTooltip( trigger, content, options = {} )
 
         tooltipDom = document.createElement( "div" );
         tooltipDom.className = "lextooltip";
-        tooltipDom.innerHTML = content;
+        tooltipDom.innerHTML = trigger.dataset[ "tooltipContent" ] ?? content;
 
         const nestedDialog = trigger.closest( "dialog" );
-        if( nestedDialog && nestedDialog.dataset[ "modal" ] == 'true' )
-        {
-            tooltipParent = nestedDialog;
-        }
+        const tooltipParent = nestedDialog ?? LX.root;
 
         // Remove other first
         LX.root.querySelectorAll( ".lextooltip" ).forEach( e => e.remove() );
@@ -6247,38 +6253,39 @@ function asTooltip( trigger, content, options = {} )
         LX.doAsync( () => {
 
             const position = [ 0, 0 ];
+            const offsetX = parseFloat( trigger.dataset[ "tooltipOffsetX" ] ?? _offsetX );
+            const offsetY = parseFloat( trigger.dataset[ "tooltipOffsetY" ] ?? _offsetY );
             const rect = this.getBoundingClientRect();
-            const offset = options.offset ?? 6;
             let alignWidth = true;
 
             switch( options.side ?? "top" )
             {
                 case "left":
-                    position[ 0 ] += ( rect.x - tooltipDom.offsetWidth - offset );
+                    position[ 0 ] += ( rect.x - tooltipDom.offsetWidth - offsetX );
                     alignWidth = false;
                     break;
                 case "right":
-                    position[ 0 ] += ( rect.x + rect.width + offset );
+                    position[ 0 ] += ( rect.x + rect.width + offsetX );
                     alignWidth = false;
                     break;
                 case "top":
-                    position[ 1 ] += ( rect.y - tooltipDom.offsetHeight - offset );
+                    position[ 1 ] += ( rect.y - tooltipDom.offsetHeight - offsetY );
                     alignWidth = true;
                     break;
                 case "bottom":
-                    position[ 1 ] += ( rect.y + rect.height + offset );
+                    position[ 1 ] += ( rect.y + rect.height + offsetY );
                     alignWidth = true;
                     break;
             }
 
-            if( alignWidth ) { position[ 0 ] += ( rect.x + rect.width * 0.5 ) - tooltipDom.offsetWidth * 0.5; }
-            else { position[ 1 ] += ( rect.y + rect.height * 0.5 ) - tooltipDom.offsetHeight * 0.5; }
+            if( alignWidth ) { position[ 0 ] += ( rect.x + rect.width * 0.5 ) - tooltipDom.offsetWidth * 0.5 + offsetX; }
+            else { position[ 1 ] += ( rect.y + rect.height * 0.5 ) - tooltipDom.offsetHeight * 0.5 + offsetY; }
 
             // Avoid collisions
             position[ 0 ] = LX.clamp( position[ 0 ], 0, window.innerWidth - tooltipDom.offsetWidth - 4 );
             position[ 1 ] = LX.clamp( position[ 1 ], 0, window.innerHeight - tooltipDom.offsetHeight - 4 );
 
-            if( tooltipParent instanceof HTMLDialogElement )
+            if( nestedDialog )
             {
                 let parentRect = tooltipParent.getBoundingClientRect();
                 position[ 0 ] -= parentRect.x;
@@ -6287,6 +6294,11 @@ function asTooltip( trigger, content, options = {} )
 
             tooltipDom.style.left = `${ position[ 0 ] }px`;
             tooltipDom.style.top = `${ position[ 1 ] }px`;
+
+            if( options.callback )
+            {
+                options.callback( tooltipDom, trigger );
+            }
         } );
     } );
 
@@ -11022,38 +11034,110 @@ class RangeInput extends BaseComponent {
 
     constructor( name, value, callback, options = {} ) {
 
-        super( BaseComponent.RANGE, name, value, options );
+        const ogValue = LX.deepCopy( value );
+
+        super( BaseComponent.RANGE, name, LX.deepCopy( ogValue ), options );
+
+        const isRangeValue = ( value.constructor == Array && value.length == 2 );
+        if( isRangeValue )
+        {
+            value = ogValue[ 0 ];
+            options.fill = false; // Range inputs do not fill by default
+        }
 
         this.onGetValue = () => {
-            return value;
+            let finalValue = value;
+            if( isRangeValue )
+            {
+                finalValue = [ value, ogValue[ 1 ] ];
+            }
+            else if( options.left )
+            {
+                finalValue = ( ( +slider.max ) - value + ( +slider.min ) );
+            }
+            return finalValue;
         };
 
         this.onSetValue = ( newValue, skipCallback, event ) => {
 
-            if( isNaN( newValue ) )
+            let newTpContent = "";
+
+            const diff = ( options.max - options.min );
+
+            if( isRangeValue )
             {
-                return;
+                slider.value = value = LX.clamp( +newValue[ 0 ], +slider.min, +slider.max );
+                this._maxSlider.value = ogValue[ 1 ] = LX.clamp( +newValue[ 1 ], +slider.min, +slider.max );
+
+                // Update the range slider
+                const diffOffset = ( value / diff ) - 0.5;
+                const diffMaxOffset = ( ogValue[ 1 ] / diff ) - 0.5;
+                const remappedMin = LX.remapRange( value, options.min, options.max, 0, 1 );
+                const remappedMax = LX.remapRange( ogValue[ 1 ], options.min, options.max, 0, 1 );
+                slider.style.setProperty("--range-min-value", `${ remappedMin * 100 }%`);
+                slider.style.setProperty("--range-max-value", `${ remappedMax * 100 }%`);
+                slider.style.setProperty("--range-fix-min-offset", `${ -diffOffset }rem`);
+                slider.style.setProperty("--range-fix-max-offset", `${ diffMaxOffset }rem`);
+
+                container.dataset[ "tooltipOffsetX" ] = container.offsetWidth * remappedMin + container.offsetWidth * ( remappedMax - remappedMin ) * 0.5 - ( container.offsetWidth * 0.5 );
+                newTpContent = `${ value } - ${ ogValue[ 1 ] }`;
             }
+            else
+            {
+                if( isNaN( newValue ) )
+                {
+                    return;
+                }
 
-            slider.value = value = LX.clamp( +newValue, +slider.min, +slider.max );
+                slider.value = value = LX.clamp( +newValue, +slider.min, +slider.max );
+                const remapped = LX.remapRange( value, options.min, options.max, 0, 1 ) * 0.5;
+                container.dataset[ "tooltipOffsetX" ] = container.offsetWidth * remapped - ( container.offsetWidth * 0.5 );
+                newTpContent = `${ value }`;
+            }
+
+            container.dataset[ "tooltipContent" ] = newTpContent;
+            if( this._labelTooltip )
+            {
+                this._labelTooltip.innerHTML = newTpContent;
+            }
 
             if( !skipCallback )
             {
-                this._trigger( new LX.IEvent( name, options.left ? ( ( +slider.max ) - value + ( +slider.min ) ) : value, event ), callback );
+                let finalValue = value;
+                if( isRangeValue )
+                {
+                    finalValue = [ value, ogValue[ 1 ] ];
+                }
+                else if( options.left )
+                {
+                    finalValue = ( ( +slider.max ) - value + ( +slider.min ) );
+                }
+
+                this._trigger( new LX.IEvent( name, finalValue, event ), callback );
             }
         };
 
         this.onResize = ( rect ) => {
             const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
             container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth })`;
+            if( isRangeValue )
+            {
+                const diff = ( options.max - options.min );
+                const diffOffset = ( value / diff ) - 0.5;
+                const diffMaxOffset = ( ogValue[ 1 ] / diff ) - 0.5;
+                slider.style.setProperty("--range-min-value", `${ LX.remapRange( value, options.min, options.max, 0, 1 ) * 100 }%`);
+                slider.style.setProperty("--range-max-value", `${ LX.remapRange( ogValue[ 1 ], options.min, options.max, 0, 1 ) * 100 }%`);
+                slider.style.setProperty("--range-fix-min-offset", `${ -diffOffset }rem`);
+                slider.style.setProperty("--range-fix-max-offset", `${ diffMaxOffset }rem`);
+            }
         };
 
         const container = document.createElement( 'div' );
-        container.className = "lexrange";
+        container.className = "lexrange relative";
         this.root.appendChild( container );
 
         let slider = document.createElement( 'input' );
-        slider.className = "lexrangeslider " + ( options.className ?? "" );
+        slider.className = "lexrangeslider " + ( isRangeValue ? "pointer-events-none " : "" ) + ( options.className ?? "" );
         slider.min = options.min ?? 0;
         slider.max = options.max ?? 100;
         slider.step = options.step ?? 1;
@@ -11065,16 +11149,9 @@ class RangeInput extends BaseComponent {
             value = LX.clamp( value, +slider.min, +slider.max );
         }
 
-        if( options.left )
-        {
-            value = ( ( +slider.max ) - value + ( +slider.min ) );
-        }
-
-        slider.value = value;
-        container.appendChild( slider );
-
         if( options.left ?? false )
         {
+            value = ( ( +slider.max ) - value + ( +slider.min ) );
             slider.classList.add( "left" );
         }
 
@@ -11083,23 +11160,30 @@ class RangeInput extends BaseComponent {
             slider.classList.add( "no-fill" );
         }
 
+        slider.value = value;
+        container.appendChild( slider );
+
         slider.addEventListener( "input", e => {
-            this.set( e.target.valueAsNumber, false, e );
+            this.set( isRangeValue ? [ e.target.valueAsNumber, ogValue[ 1 ] ] : e.target.valueAsNumber, false, e );
         }, { passive: false });
 
-        slider.addEventListener( "mousedown", function( e ) {
-            if( options.onPress )
-            {
-                options.onPress.bind( slider )( e, slider );
-            }
-        }, false );
+        // If its a range value, we need to update the slider using the thumbs
+        if( !isRangeValue )
+        {
+            slider.addEventListener( "mousedown", function( e ) {
+                if( options.onPress )
+                {
+                    options.onPress.bind( slider )( e, slider );
+                }
+            }, false );
 
-        slider.addEventListener( "mouseup", function( e ) {
-            if( options.onRelease )
-            {
-                options.onRelease.bind( slider )( e, slider );
-            }
-        }, false );
+            slider.addEventListener( "mouseup", function( e ) {
+                if( options.onRelease )
+                {
+                    options.onRelease.bind( slider )( e, slider );
+                }
+            }, false );
+        }
 
         // Method to change min, max, step parameters
         this.setLimits = ( newMin, newMax, newStep ) => {
@@ -11109,7 +11193,47 @@ class RangeInput extends BaseComponent {
             BaseComponent._dispatchEvent( slider, "input", true );
         };
 
-        LX.doAsync( this.onResize.bind( this ) );
+        LX.doAsync( () => {
+
+            this.onResize();
+
+            let offsetX = 0;
+            if( isRangeValue )
+            {
+                const remappedMin = LX.remapRange( value, options.min, options.max, 0, 1 );
+                const remappedMax = LX.remapRange( ogValue[ 1 ], options.min, options.max, 0, 1 );
+                offsetX = container.offsetWidth * remappedMin + container.offsetWidth * ( remappedMax - remappedMin ) * 0.5 - ( container.offsetWidth * 0.5 );
+            }
+            else
+            {
+                const remapped = LX.remapRange( value, options.min, options.max, 0, 1 ) * 0.5;
+                offsetX = container.offsetWidth * remapped - ( container.offsetWidth * 0.5 );
+            }
+            LX.asTooltip( container, `${ value }${ isRangeValue ? `- ${ ogValue[ 1 ] }` : `` }`, { offsetX, callback: ( tpDom ) => {
+                this._labelTooltip = tpDom;
+            } } );
+        } );
+
+        if( ogValue.constructor == Array ) // Its a range value
+        {
+            let maxSlider = document.createElement( 'input' );
+            maxSlider.className = "lexrangeslider no-fill pointer-events-none overlap absolute top-0 left-0 " + ( options.className ?? "" );
+            maxSlider.min = options.min ?? 0;
+            maxSlider.max = options.max ?? 100;
+            maxSlider.step = options.step ?? 1;
+            maxSlider.type = "range";
+            maxSlider.disabled = options.disabled ?? false;
+            this._maxSlider = maxSlider;
+
+            let maxRangeValue = ogValue[ 1 ];
+            maxSlider.value = maxRangeValue = LX.clamp( maxRangeValue, +maxSlider.min, +maxSlider.max );
+            container.appendChild( maxSlider );
+
+            maxSlider.addEventListener( "input", e => {
+                ogValue[ 1 ] = +e.target.valueAsNumber;
+                this.set( [ value, ogValue[ 1 ] ], false, e );
+            }, { passive: false });
+        }
     }
 }
 
@@ -16284,7 +16408,7 @@ class AssetView {
             this.toolsPanel.sameLine();
             this.toolsPanel.addSelect( "Filter", this.allowedTypes, this.filter ?? this.allowedTypes[ 0 ], v => {
                 this._refreshContent( null, v );
-            }, { width: "30%", minWidth: "128px" } );
+            }, { width: "30%", minWidth: "128px", overflowContainer: null } );
             this.toolsPanel.addText( null, this.searchValue ?? "", v => this._refreshContent.call(this, v, null), { placeholder: "Search assets.." } );
             this.toolsPanel.addButton( null, "", _onSort.bind(this), { title: "Sort", tooltip: true, icon: ( this.sortMode === AssetView.CONTENT_SORT_ASC ) ? "SortAsc" : "SortDesc" } );
             this.toolsPanel.addButton( null, "", _onChangeView.bind(this), { title: "View", tooltip: true, icon: ( this.layout === AssetView.LAYOUT_GRID ) ? "LayoutGrid" : "LayoutList" } );