Я разрабатываю элемент управления масштабированием с использованием html css и javascript, но он не работает должным образом во всех браузерах.
Я использую css, чтобы сделать ввод диапазона в качестве ползунка масштабирования, а div в качестве элемента управления навигацией joystiq., он отлично работает в Google Chrome, но не работает в Mozilla Firefox и Internet Explorer.
$(document).ready(function () {
$('#pan_circle').draggable({
containment: "#parent_pan",
revert: true,
revertDuration: 50
});
});
document.getElementById("plus_zoom").addEventListener("mousedown", magnifyControl);
document.getElementById("plus_zoom").addEventListener("mouseup", normalControl);
document.getElementById("plus_zoom").addEventListener("click", zoomIn);
document.getElementById("minus_zoom").addEventListener("mousedown", magnifyControl);
document.getElementById("minus_zoom").addEventListener("mouseup", normalControl);
document.getElementById("minus_zoom").addEventListener("click", zoomOut);
function magnifyControl(e) {
e.target.style.opacity = "0.25";
}
function normalControl(e) {
e.target.style.opacity = "1";
}
function zoomIn() {
var zoom = document.getElementById("zoom_slider").value;
document.getElementById("zoom_slider").value = zoom - (-25);
}
function zoomOut() {
var zoom = document.getElementById("zoom_slider").value;
document.getElementById("zoom_slider").value = zoom - 25;
}
input[type=range][orient=vertical] {
width: 184px;
transform: rotate(-90deg);
transform-origin: top;
position: relative;
left: -87px;
bottom: -52px;
}
.zoom_slider {
-webkit-appearance: none;
height: 2px;
border-radius: 5px;
background: black;
outline: none;
opacity: 0.5;
transition: opacity .2s;
}
.zoom_slider:hover {
opacity: 0.7;
}
.zoom_slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: black;
cursor: pointer;
}
.zoom_slider::-moz-range-thumb {
width: 12px;
height: 12px;
border-radius: 50%;
background: black;
cursor: pointer;
}
.zoom_slider:hover::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
border-radius: 50%;
background: black;
cursor: pointer;
}
.zoom_slider:hover::-moz-range-thumb {
width: 15px;
height: 15px;
border-radius: 50%;
background: black;
cursor: pointer;
}
.zoom_range {
position: absolute;
top: 140px;
left: 30px;
background-color: #CFD1CE;
height: 225px;
width: 12px;
border-radius: 3px;
}
.zoom_hr1 {
border-color: white;
position: relative;
top: -23px;
}
.zoom_hr2 {
border-color: white;
position: relative;
top: 125px;
}
#zoom_polygon {
position: relative;
top: 50px;
}
.plus_zoom {
position: relative;
left: 2px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
}
.minus_zoom {
position: relative;
left: 3px;
top: 100px;
font-size: 17px;
font-weight: bold;
cursor: pointer;
}
#panning_container {
height: 70px;
width: 70px;
background-color: #CFD1CE;
-webkit-clip-path: polygon(0 35%, 35% 35%, 35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%);
clip-path: polygon(0 37%, 35% 36%, 35% 0, 65% 0, 65% 36%, 100% 36%, 100% 63%, 65% 63%, 65% 100%, 36% 100%, 36% 64%, 0 64%);
}
#top_arrow {
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
height: 6px;
width: 10px;
background-color: #636663;
position: relative;
top: 3px;
left: 30px;
}
#right_arrow {
-webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
clip-path: polygon(0 0, 0% 100%, 100% 50%);
height: 10px;
width: 6px;
background-color: #636663;
position: relative;
top: 23px;
left: 60px;
}
#bottom_arrow {
-webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
clip-path: polygon(0 0, 50% 100%, 100% 0);
height: 6px;
width: 10px;
background-color: #636663;
position: relative;
top: 44px;
left: 30px;
}
#left_arrow {
-webkit-clip-path: polygon(0 50%, 100% 100%, 100% 0);
clip-path: polygon(0 50%, 100% 100%, 100% 0);
height: 10px;
width: 6px;
background-color: #636663;
position: relative;
top: 8.5px;
left: 4px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div>
<div id="zoom_polygon" style="height:70px;width:70px;">
<div id="panning_container">
<div id="top_arrow"></div>
<div id="right_arrow"></div>
<div id="bottom_arrow"></div>
<div id="left_arrow"></div>
<div id="parent_pan" style="background-color:none;height:40px;width:40px;position:relative;top:-17px;left:15px;">
<div id="pan_circle" style="width:18px;height:18px;background-color:#636663;border-radius:9px;position:relative;top:10.3px;left:11.3px;"></div>
</div>
</div>
</div>
<div class="zoom_range">
<span class="plus_zoom" id="plus_zoom">+</span>
<hr class="zoom_hr1" />
<input type="range" name="zoom" value="100" max="1000" min="1" orient="vertical" class="zoom_slider" id="zoom_slider" />
<hr class="zoom_hr2" />
<span class="minus_zoom" id="minus_zoom">-</span>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Я хочу, чтобы он работал корректно во всех браузерах, пожалуйста, всепомогите решить или предложите мне аналогичный ответ.