For does that need a vanilla multi-range slider, I implemented one with 4 handles.
It’s ugly and primitive, but it works
style.css
body {
text-align:center;
outline: none;
background: #999
}
textarea{
background-color: #363636;
border: 1px #ff0000;
border-radius:none;
height:20px;
color: #bbb;
font-family:Arial;
font-size: 6px;
text-align: center;
vertical-align: middle;
padding: 1px 0px 0px 0px;
text-align:center;
outline: none;
}
.BIButton2A {
background: linear-gradient(to right, #000 0%, #fff 100%);
border-radius: 0px;
border: 1px solid #fff;
display: inline-block;
padding: 0px 2px 0px 2px;
padding-bottom: 1px;
color: #e6e6e6;
font-family: Arial;
font-size: 11px;
}
.invisible_B {
min-width: 0;
position: absolute;
background: transparent;
border-radius: none;
padding: 0px 0px 0px 0px;
color: #e6e6e6;
font-family: Arial;
font-size: 11px;
text-align: left;
font-weight: bold;
height: 20px;
width: 3px;
line-height: 11px;
outline: none;
}
.invisible_C {
min-width: 0;
position: absolute;
background: #00F;
height: 26.5px;
width: 3px;
top: -5px;
outline: none;
padding: 0px 0px 0px 0px;
color: #e6e6e6;
font-family: Arial;
font-size: 11px;
text-align: left;
font-weight: bold;
line-height: 11px;
}
.invisible_C:hover {
position: relative -5px;
border: 2px solid rgba(255, 136, 0, 255);
background: #F80;
border-radius: none;
}
.invisible_C:active {
border: 2px solid rgba(255, 136, 0, 255);
background: #F80;
}
.invisible_CA {
min-width: 0;
position: absolute;
background: rgba(255, 0, 0, 128);
height: 26.5px;
width: 3px;
top: -5px;
outline: none;
padding: 0px 0px 0px 0px;
color: #e6e6e6;
font-family: Arial;
font-size: 11px;
text-align: left;
font-weight: bold;
line-height: 11px;
}
.invisible_CA:hover {
position: relative -5px;
border: 2px solid rgba(0, 255, 0, 255);
background: #0F0;
border-radius: none;
}
.invisible_CA:active {
border: 2px solid rgba(0, 255, 0, 255);
background: #0F0;
}
index.html
<!DOCTYPE html>
<!-- Index.html -->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./styles.css">
<script src="./index.js"></script>
</head>
<body>
<div style="position: absolute; left: 0px; top: 0px; background-color:#222; border-top: 2px solid #666; width: 300px; height: 75px;">
<!-- ################## four Range slider Study ##################### -->
<textarea size="S" id="inEL" style="width: 27px; height:20px; background: #000; position: absolute; top: -5px; left: 19px;" ;>0</textarea>
<textarea size="S" id="inML" style="width: 27px; height:20px; background: #000; position: absolute; top: -5px; left: 69px;" ;>3</textarea>
<textarea size="S" id="inMR" style="width: 27px; height:20px; background: #000; position: absolute; top: -5px; right: 69px;" ;>252</textarea>
<textarea size="S" id="inER" style="width: 27px; height:20px; background: #000; position: absolute; top: -5px; right: 19px;" ;>255</textarea>
<p style="font-size: 10px; font-family: Arial; color: #e6e6e6; position: absolute; left: 130px; top: 6px;">TITLE</p>
<div style="position: absolute; left: 21px; top: 17px; background-color: #222; width:256px; height: 5px;">
</div> <!-- To hide feather textarea background -->
<button class="BIButton2A" style="position:absolute; left:16px; top: 17px; height: 20px; width: 255px;"></button>
<div class="spectrum-ActionGroup" id="LocGrp" style="position: absolute; left: 14px; top: 19px; z-index: 1;">
<button class="invisible_B" id="btnBiMiddle_0" style="position:absolute; left:0px;"></button>
<button class="invisible_B" id="btnBiMiddle_1" style="position:absolute; left: 3px;"></button>
<button class="invisible_B" id="btnBiMiddle_2" style="position:absolute; left: 6px;"></button>
<button class="invisible_B" id="btnBiMiddle_3" style="position:absolute; left: 9px;"></button>
<button class="invisible_B" id="btnBiMiddle_4" style="position:absolute; left:12px;"></button>
<button class="invisible_B" id="btnBiMiddle_5" style="position:absolute; left:15px;"></button>
<button class="invisible_B" id="btnBiMiddle_6" style="position:absolute; left:18px;"></button>
<button class="invisible_B" id="btnBiMiddle_7" style="position:absolute; left:21px;"></button>
<button class="invisible_B" id="btnBiMiddle_8" style="position:absolute; left:24px;"></button>
<button class="invisible_B" id="btnBiMiddle_9" style="position:absolute; left:27px;"></button>
<button class="invisible_B" id="btnBiMiddle_10" style="position:absolute; left:30px;"></button>
<button class="invisible_B" id="btnBiMiddle_11" style="position:absolute; left:33px;"></button>
<button class="invisible_B" id="btnBiMiddle_12" style="position:absolute; left:36px;"></button>
<button class="invisible_B" id="btnBiMiddle_13" style="position:absolute; left:39px;"></button>
<button class="invisible_B" id="btnBiMiddle_14" style="position:absolute; left:42px;"></button>
<button class="invisible_B" id="btnBiMiddle_15" style="position:absolute; left:45px;"></button>
<button class="invisible_B" id="btnBiMiddle_16" style="position:absolute; left:48px;"></button>
<button class="invisible_B" id="btnBiMiddle_17" style="position:absolute; left:51px;"></button>
<button class="invisible_B" id="btnBiMiddle_18" style="position:absolute; left:54px;"></button>
<button class="invisible_B" id="btnBiMiddle_19" style="position:absolute; left:57px;"></button>
<button class="invisible_B" id="btnBiMiddle_20" style="position:absolute; left:60px;"></button>
<button class="invisible_B" id="btnBiMiddle_21" style="position:absolute; left:63px;"></button>
<button class="invisible_B" id="btnBiMiddle_22" style="position:absolute; left:66px;"></button>
<button class="invisible_B" id="btnBiMiddle_23" style="position:absolute; left:69px;"></button>
<button class="invisible_B" id="btnBiMiddle_24" style="position:absolute; left:72px;"></button>
<button class="invisible_B" id="btnBiMiddle_25" style="position:absolute; left:75px;"></button>
<button class="invisible_B" id="btnBiMiddle_26" style="position:absolute; left:78px;"></button>
<button class="invisible_B" id="btnBiMiddle_27" style="position:absolute; left:81px;"></button>
<button class="invisible_B" id="btnBiMiddle_28" style="position:absolute; left:84px;"></button>
<button class="invisible_B" id="btnBiMiddle_29" style="position:absolute; left:87px;"></button>
<button class="invisible_B" id="btnBiMiddle_30" style="position:absolute; left:90px;"></button>
<button class="invisible_B" id="btnBiMiddle_31" style="position:absolute; left:93px;"></button>
<button class="invisible_B" id="btnBiMiddle_32" style="position:absolute; left:96px;"></button>
<button class="invisible_B" id="btnBiMiddle_33" style="position:absolute; left:99px;"></button>
<button class="invisible_B" id="btnBiMiddle_34" style="position:absolute; left:102px;"></button>
<button class="invisible_B" id="btnBiMiddle_35" style="position:absolute; left:105px;"></button>
<button class="invisible_B" id="btnBiMiddle_36" style="position:absolute; left:108px;"></button>
<button class="invisible_B" id="btnBiMiddle_37" style="position:absolute; left:111px;"></button>
<button class="invisible_B" id="btnBiMiddle_38" style="position:absolute; left:114px;"></button>
<button class="invisible_B" id="btnBiMiddle_39" style="position:absolute; left:117px;"></button>
<button class="invisible_B" id="btnBiMiddle_40" style="position:absolute; left:120px;"></button>
<button class="invisible_B" id="btnBiMiddle_41" style="position:absolute; left:123px;"></button>
<button class="invisible_B" id="btnBiMiddle_42" style="position:absolute; left:126px;"></button>
<button class="invisible_B" id="btnBiMiddle_43" style="position:absolute; left:129px;"></button>
<button class="invisible_B" id="btnBiMiddle_44" style="position:absolute; left:132px;"></button>
<button class="invisible_B" id="btnBiMiddle_45" style="position:absolute; left:135px;"></button>
<button class="invisible_B" id="btnBiMiddle_46" style="position:absolute; left:138px;"></button>
<button class="invisible_B" id="btnBiMiddle_47" style="position:absolute; left:141px;"></button>
<button class="invisible_B" id="btnBiMiddle_48" style="position:absolute; left:144px;"></button>
<button class="invisible_B" id="btnBiMiddle_49" style="position:absolute; left:147px;"></button>
<button class="invisible_B" id="btnBiMiddle_50" style="position:absolute; left:150px;"></button>
<button class="invisible_B" id="btnBiMiddle_51" style="position:absolute; left:153px;"></button>
<button class="invisible_B" id="btnBiMiddle_52" style="position:absolute; left:156px;"></button>
<button class="invisible_B" id="btnBiMiddle_53" style="position:absolute; left:159px;"></button>
<button class="invisible_B" id="btnBiMiddle_54" style="position:absolute; left:162px;"></button>
<button class="invisible_B" id="btnBiMiddle_55" style="position:absolute; left:165px;"></button>
<button class="invisible_B" id="btnBiMiddle_56" style="position:absolute; left:168px;"></button>
<button class="invisible_B" id="btnBiMiddle_57" style="position:absolute; left:171px;"></button>
<button class="invisible_B" id="btnBiMiddle_58" style="position:absolute; left:174px;"></button>
<button class="invisible_B" id="btnBiMiddle_59" style="position:absolute; left:177px;"></button>
<button class="invisible_B" id="btnBiMiddle_60" style="position:absolute; left:180px;"></button>
<button class="invisible_B" id="btnBiMiddle_61" style="position:absolute; left:183px;"></button>
<button class="invisible_B" id="btnBiMiddle_62" style="position:absolute; left:186px;"></button>
<button class="invisible_B" id="btnBiMiddle_63" style="position:absolute; left:189px;"></button>
<button class="invisible_B" id="btnBiMiddle_64" style="position:absolute; left:192px;"></button>
<button class="invisible_B" id="btnBiMiddle_65" style="position:absolute; left:195px;"></button>
<button class="invisible_B" id="btnBiMiddle_66" style="position:absolute; left:198px;"></button>
<button class="invisible_B" id="btnBiMiddle_67" style="position:absolute; left:201px;"></button>
<button class="invisible_B" id="btnBiMiddle_68" style="position:absolute; left:204px;"></button>
<button class="invisible_B" id="btnBiMiddle_69" style="position:absolute; left:207px;"></button>
<button class="invisible_B" id="btnBiMiddle_70" style="position:absolute; left:210px;"></button>
<button class="invisible_B" id="btnBiMiddle_71" style="position:absolute; left:213px;"></button>
<button class="invisible_B" id="btnBiMiddle_72" style="position:absolute; left:216px;"></button>
<button class="invisible_B" id="btnBiMiddle_73" style="position:absolute; left:219px;"></button>
<button class="invisible_B" id="btnBiMiddle_74" style="position:absolute; left:222px;"></button>
<button class="invisible_B" id="btnBiMiddle_75" style="position:absolute; left:225px;"></button>
<button class="invisible_B" id="btnBiMiddle_76" style="position:absolute; left:228px;"></button>
<button class="invisible_B" id="btnBiMiddle_77" style="position:absolute; left:231px;"></button>
<button class="invisible_B" id="btnBiMiddle_78" style="position:absolute; left:234px;"></button>
<button class="invisible_B" id="btnBiMiddle_79" style="position:absolute; left:237px;"></button>
<button class="invisible_B" id="btnBiMiddle_80" style="position:absolute; left:240px;"></button>
<button class="invisible_B" id="btnBiMiddle_81" style="position:absolute; left:243px;"></button>
<button class="invisible_B" id="btnBiMiddle_82" style="position:absolute; left:246px;"></button>
<button class="invisible_B" id="btnBiMiddle_83" style="position:absolute; left:249px;"></button>
<button class="invisible_B" id="btnBiMiddle_84" style="position:absolute; left:252px;"></button>
<button class="invisible_B" id="btnBiMiddle_85" style="position:absoleft; left:254px;"></button>
</div>
<button class="invisible_CA" id="btnEL" disabled onmousedown="checkBiELMouse()"; style="position:absolute; left:16px; top: 14px; z-index: 1;"></button>
<button class="invisible_C" id="btnML" disabled onmousedown="checkBiMLMouse()"; style="position:absolute; left:19px; top: 14px; z-index: 1;"></button>
<button class="invisible_C" id="btnMR" disabled onmousedown="checkBiMRMouse()"; style="position:absolute; left:265px; top: 14px; z-index: 1;"></button>
<button class="invisible_CA" id="btnER" disabled onmousedown="checkBiERMouse()"; style="position:absolute; left:268px; top: 14px; z-index: 1;"></button>
</div>
</body>
</html>
index.js
// index.js
var EndLeftLoc = 0
var MidLeftLoc = 3
var MidRightLoc = 253
var EndRightLoc = 255
var LastEndLeftLoc = 0
var LastMidLeftLoc = 3
var LastMidRightLoc = 253
var LastEndRightLoc = 255
var offsetL = 16
var offsetR = 13
var colorChannel = "gray"
var Loc
// ################## Four Range slider #####################
var aaa = document.querySelector("#btnEL").disabled
var bbb = document.querySelector("#btnML").disabled
var ccc = document.querySelector("#btnMR").disabled
var ddd = document.querySelector("#btnER").disabled
var handle
const moveHandlesTo = async () => {
await document.getElementById("LocGrp").addEventListener("mousemove", evt => {
if(handle == "EL"){
EndLeftLoc = Loc
document.querySelector("#btnEL").style.left = EndLeftLoc + offsetL;
document.querySelector("#inEL").value = EndLeftLoc;
}
if(handle == "ML"){
MidLeftLoc = Loc
document.querySelector("#btnML").style.left = MidLeftLoc + offsetL;
document.querySelector("#inML").value = MidLeftLoc;
}
if(handle == "MR"){
MidRightLoc = Loc
document.querySelector("#btnMR").style.left = MidRightLoc + offsetR;
document.querySelector("#inMR").value = MidRightLoc;
}
if(handle == "ER"){
EndRightLoc = Loc
document.querySelector("#btnER").style.left = EndRightLoc + offsetR;
document.querySelector("#inER").value = EndRightLoc;
}
});
document.addEventListener("mouseup", async function () {
document.getElementById("LocGrp").style.zIndex = -1;
document.getElementById("btnEL").disabled = true;
document.getElementById("btnML").disabled = true;
document.getElementById("btnMR").disabled = true;
document.getElementById("btnER").disabled = true;
// function to execute goes here
})
}
//##################################################
const checkBiELMouse = async () => {
document.getElementById("LocGrp").style.zIndex = 1
handle = "EL"
document.getElementById("btnEL").disabled = false;
await document.getElementById("btnEL").addEventListener("mousedown", moveHandlesTo)
await document.addEventListener('mouseover', () => document.removeEventListener('mousemove', moveHandlesTo))
};
//##################################################
const checkBiMLMouse = async () => {
document.getElementById("LocGrp").style.zIndex = 1
handle = "ML"
document.getElementById("btnML").disabled = false;
await document.getElementById("btnML").addEventListener("mousedown", moveHandlesTo)
await document.addEventListener('mouseover', () => document.removeEventListener('mousemove', moveHandlesTo))
};
//##################################################
const checkBiMRMouse = async () => {
document.getElementById("LocGrp").style.zIndex = 1
handle = "MR"
document.getElementById("btnMR").disabled = false;
await document.getElementById("btnMR").addEventListener("mousedown", moveHandlesTo)
await document.addEventListener('mouseover', () => document.removeEventListener('mousemove', moveHandlesTo))
};
// #################################################
const checkBiERMouse = async () => {
document.getElementById("LocGrp").style.zIndex = 1
handle = "ER"
document.getElementById("btnER").disabled = false;
await document.getElementById("btnER").addEventListener("mousedown", moveHandlesTo)
await document.addEventListener('mouseover', () => document.removeEventListener('mousemove', moveHandlesTo))
};
// #################################################
document.getElementById("btnBiMiddle_0").addEventListener ("mouseover", async function () {Loc = 0; })
document.getElementById("btnBiMiddle_1").addEventListener ("mouseover", async function () {Loc = 3; })
document.getElementById("btnBiMiddle_2").addEventListener ("mouseover", async function () {Loc = 6; })
document.getElementById("btnBiMiddle_3").addEventListener ("mouseover", async function () {Loc = 9; })
document.getElementById("btnBiMiddle_4").addEventListener ("mouseover", async function () {Loc = 12; })
document.getElementById("btnBiMiddle_5").addEventListener ("mouseover", async function () {Loc = 15; })
document.getElementById("btnBiMiddle_6").addEventListener ("mouseover", async function () {Loc = 18; })
document.getElementById("btnBiMiddle_7").addEventListener ("mouseover", async function () {Loc = 21; })
document.getElementById("btnBiMiddle_8").addEventListener ("mouseover", async function () {Loc = 24; })
document.getElementById("btnBiMiddle_9").addEventListener ("mouseover", async function () {Loc = 27; })
document.getElementById("btnBiMiddle_10").addEventListener ("mouseover", async function () {Loc = 30; })
document.getElementById("btnBiMiddle_11").addEventListener ("mouseover", async function () {Loc = 33; })
document.getElementById("btnBiMiddle_12").addEventListener ("mouseover", async function () {Loc = 36; })
document.getElementById("btnBiMiddle_13").addEventListener ("mouseover", async function () {Loc = 39; })
document.getElementById("btnBiMiddle_14").addEventListener ("mouseover", async function () {Loc = 42; })
document.getElementById("btnBiMiddle_15").addEventListener ("mouseover", async function () {Loc = 45; })
document.getElementById("btnBiMiddle_16").addEventListener ("mouseover", async function () {Loc = 48; })
document.getElementById("btnBiMiddle_17").addEventListener ("mouseover", async function () {Loc = 51; })
document.getElementById("btnBiMiddle_18").addEventListener ("mouseover", async function () {Loc = 54; })
document.getElementById("btnBiMiddle_19").addEventListener ("mouseover", async function () {Loc = 57; })
document.getElementById("btnBiMiddle_20").addEventListener ("mouseover", async function () {Loc = 60; })
document.getElementById("btnBiMiddle_21").addEventListener ("mouseover", async function () {Loc = 63; })
document.getElementById("btnBiMiddle_22").addEventListener ("mouseover", async function () {Loc = 66; })
document.getElementById("btnBiMiddle_23").addEventListener ("mouseover", async function () {Loc = 69; })
document.getElementById("btnBiMiddle_24").addEventListener ("mouseover", async function () {Loc = 72; })
document.getElementById("btnBiMiddle_25").addEventListener ("mouseover", async function () {Loc = 75; })
document.getElementById("btnBiMiddle_26").addEventListener ("mouseover", async function () {Loc = 78; })
document.getElementById("btnBiMiddle_27").addEventListener ("mouseover", async function () {Loc = 81; })
document.getElementById("btnBiMiddle_28").addEventListener ("mouseover", async function () {Loc = 84; })
document.getElementById("btnBiMiddle_29").addEventListener ("mouseover", async function () {Loc = 87; })
document.getElementById("btnBiMiddle_30").addEventListener ("mouseover", async function () {Loc = 90; })
document.getElementById("btnBiMiddle_31").addEventListener ("mouseover", async function () {Loc = 93; })
document.getElementById("btnBiMiddle_32").addEventListener ("mouseover", async function () {Loc = 96; })
document.getElementById("btnBiMiddle_33").addEventListener ("mouseover", async function () {Loc = 99; })
document.getElementById("btnBiMiddle_34").addEventListener ("mouseover", async function () {Loc = 102; })
document.getElementById("btnBiMiddle_35").addEventListener ("mouseover", async function () {Loc = 105; })
document.getElementById("btnBiMiddle_36").addEventListener ("mouseover", async function () {Loc = 108; })
document.getElementById("btnBiMiddle_37").addEventListener ("mouseover", async function () {Loc = 111; })
document.getElementById("btnBiMiddle_38").addEventListener ("mouseover", async function () {Loc = 114; })
document.getElementById("btnBiMiddle_39").addEventListener ("mouseover", async function () {Loc = 117; })
document.getElementById("btnBiMiddle_40").addEventListener ("mouseover", async function () {Loc = 120; })
document.getElementById("btnBiMiddle_41").addEventListener ("mouseover", async function () {Loc = 123; })
document.getElementById("btnBiMiddle_42").addEventListener ("mouseover", async function () {Loc = 126; })
document.getElementById("btnBiMiddle_43").addEventListener ("mouseover", async function () {Loc = 129; })
document.getElementById("btnBiMiddle_44").addEventListener ("mouseover", async function () {Loc = 132; })
document.getElementById("btnBiMiddle_45").addEventListener ("mouseover", async function () {Loc = 135; })
document.getElementById("btnBiMiddle_46").addEventListener ("mouseover", async function () {Loc = 138; })
document.getElementById("btnBiMiddle_47").addEventListener ("mouseover", async function () {Loc = 141; })
document.getElementById("btnBiMiddle_48").addEventListener ("mouseover", async function () {Loc = 144; })
document.getElementById("btnBiMiddle_49").addEventListener ("mouseover", async function () {Loc = 147; })
document.getElementById("btnBiMiddle_50").addEventListener ("mouseover", async function () {Loc = 150;})
document.getElementById("btnBiMiddle_51").addEventListener ("mouseover", async function () {Loc = 153;})
document.getElementById("btnBiMiddle_52").addEventListener ("mouseover", async function () {Loc = 156;})
document.getElementById("btnBiMiddle_53").addEventListener ("mouseover", async function () {Loc = 159;})
document.getElementById("btnBiMiddle_54").addEventListener ("mouseover", async function () {Loc = 162;})
document.getElementById("btnBiMiddle_55").addEventListener ("mouseover", async function () {Loc = 165;})
document.getElementById("btnBiMiddle_56").addEventListener ("mouseover", async function () {Loc = 168;})
document.getElementById("btnBiMiddle_57").addEventListener ("mouseover", async function () {Loc = 171;})
document.getElementById("btnBiMiddle_58").addEventListener ("mouseover", async function () {Loc = 174;})
document.getElementById("btnBiMiddle_59").addEventListener ("mouseover", async function () {Loc = 177;})
document.getElementById("btnBiMiddle_60").addEventListener ("mouseover", async function () {Loc = 180;})
document.getElementById("btnBiMiddle_61").addEventListener ("mouseover", async function () {Loc = 183;})
document.getElementById("btnBiMiddle_62").addEventListener ("mouseover", async function () {Loc = 186;})
document.getElementById("btnBiMiddle_63").addEventListener ("mouseover", async function () {Loc = 189;})
document.getElementById("btnBiMiddle_64").addEventListener ("mouseover", async function () {Loc = 192;})
document.getElementById("btnBiMiddle_65").addEventListener ("mouseover", async function () {Loc = 195;})
document.getElementById("btnBiMiddle_66").addEventListener ("mouseover", async function () {Loc = 198;})
document.getElementById("btnBiMiddle_67").addEventListener ("mouseover", async function () {Loc = 201;})
document.getElementById("btnBiMiddle_68").addEventListener ("mouseover", async function () {Loc = 204;})
document.getElementById("btnBiMiddle_69").addEventListener ("mouseover", async function () {Loc = 207;})
document.getElementById("btnBiMiddle_70").addEventListener ("mouseover", async function () {Loc = 210;})
document.getElementById("btnBiMiddle_71").addEventListener ("mouseover", async function () {Loc = 213;})
document.getElementById("btnBiMiddle_72").addEventListener ("mouseover", async function () {Loc = 216;})
document.getElementById("btnBiMiddle_73").addEventListener ("mouseover", async function () {Loc = 219;})
document.getElementById("btnBiMiddle_74").addEventListener ("mouseover", async function () {Loc = 222;})
document.getElementById("btnBiMiddle_75").addEventListener ("mouseover", async function () {Loc = 225;})
document.getElementById("btnBiMiddle_76").addEventListener ("mouseover", async function () {Loc = 228;})
document.getElementById("btnBiMiddle_77").addEventListener ("mouseover", async function () {Loc = 231;})
document.getElementById("btnBiMiddle_78").addEventListener ("mouseover", async function () {Loc = 234;})
document.getElementById("btnBiMiddle_79").addEventListener ("mouseover", async function () {Loc = 237;})
document.getElementById("btnBiMiddle_80").addEventListener ("mouseover", async function () {Loc = 240;})
document.getElementById("btnBiMiddle_81").addEventListener ("mouseover", async function () {Loc = 243;})
document.getElementById("btnBiMiddle_82").addEventListener ("mouseover", async function () {Loc = 246;})
document.getElementById("btnBiMiddle_83").addEventListener ("mouseover", async function () {Loc = 249;})
document.getElementById("btnBiMiddle_84").addEventListener ("mouseover", async function () {Loc = 252;})
document.getElementById("btnBiMiddle_85").addEventListener ("mouseover", async function () {Loc = 255;})