180 lines
7.1 KiB
HTML
180 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title></title>
|
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="css/app.css" rel="stylesheet">
|
|
<link href="css/roundslider.min.css" rel="stylesheet">
|
|
<script src="js/jquery-3.7.1.js"></script>
|
|
<script src="js/roundslider.min.js"></script>
|
|
</head>
|
|
|
|
<body class="h-100 text-center text-bg-dark content-warp">
|
|
<div class="d-flex w-100 h-100 mx-auto flex-column">
|
|
<header class="mb-auto pb-5">
|
|
<div class="dotblock d-flex justify-content-between px-5 py-4">
|
|
<div class="fs-3">GEAZAN</div>
|
|
<div></div>
|
|
</div>
|
|
<div class="d-flex justify-content-center fw-bold border-black nav">
|
|
<div>INPUT</div>
|
|
<div>EQ</div>
|
|
<div>VOLUME</div>
|
|
<div>RS232</div>
|
|
<div class="active"><a href="network.html">NETWORK</a></div>
|
|
<div class="">
|
|
<a href="password.html">PASSWORD</a>
|
|
</div>
|
|
<div class="last">SYSTEM</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="px-3 d-flex justify-content-center">
|
|
<div class="form">
|
|
<div class="border border-black m-6 password-form">
|
|
<div class=" m-5 mx-auto form" style="width: 500px;">
|
|
<div>
|
|
<div class="container">
|
|
|
|
<div class="range-slider" data-slider-value="50">
|
|
<input type="range" orient="vertical" min="0" max="100" value="50">
|
|
<div class="range-slider__bar" style="height: calc(45% + 15px);"></div>
|
|
<div class="range-slider__thumb" style="bottom: 45%;">50%</div>
|
|
</div>
|
|
|
|
<div class="range-slider" data-slider-value="50">
|
|
<input type="range" orient="vertical" min="0" max="100" value="50">
|
|
<div class="range-slider__bar theme1" style="height: calc(45% + 15px);"></div>
|
|
<div class="range-slider__thumb" style="bottom: 45%;">50%</div>
|
|
</div>
|
|
|
|
<div class="range-slider" data-slider-value="50">
|
|
<input type="range" orient="vertical" min="0" max="100" value="50">
|
|
<div class="range-slider__bar theme2" style="height: calc(45% + 15px);"></div>
|
|
<div class="range-slider__thumb" style="bottom: 45%;">50%</div>
|
|
</div>
|
|
|
|
<div class="range-slider" data-slider-value="50">
|
|
<input type="range" orient="vertical" min="0" max="100" value="50">
|
|
<div class="range-slider__bar theme3" style="height: calc(45% + 15px);"></div>
|
|
<div class="range-slider__thumb" style="bottom: 45%;">50%</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="ruleraxisy">
|
|
<ul class="scaley">
|
|
<li></li>
|
|
<li>50</li>
|
|
<li>100</li>
|
|
<li>150</li>
|
|
<li>200</li>
|
|
<li>250</li>
|
|
<li>300</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="progress-4"></div>
|
|
</div>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
|
|
<div class="box-inner">
|
|
<div>
|
|
<div class="row _slider_customizations cus_handle">
|
|
<div class="block">
|
|
<div class="cell">
|
|
<div id="handle1"></div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-5 pb-5">
|
|
<button type="button" class="btn btn-dark border border-black px-5">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="mt-auto text-white-50">
|
|
<div class="dotblock d-flex justify-content-between px-5 py-4">
|
|
<div class="">Geazan</div>
|
|
<div>www.geazan.com</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
|
|
<script>
|
|
|
|
let app = (() => {
|
|
|
|
function updateSlider(element) {
|
|
if (element) {
|
|
let parent = element.parentElement,
|
|
lastValue = parent.getAttribute('data-slider-value');
|
|
|
|
if (lastValue === element.value) {
|
|
return; // No value change, no need to update then
|
|
}
|
|
|
|
parent.setAttribute('data-slider-value', element.value);
|
|
let $thumb = parent.querySelector('.range-slider__thumb'),
|
|
$bar = parent.querySelector('.range-slider__bar'),
|
|
pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);
|
|
|
|
$thumb.style.bottom = `${pct}%`;
|
|
$bar.style.height = `calc(${pct}% + ${$thumb.clientHeight / 2}px)`;
|
|
$thumb.textContent = `${element.value}%`;
|
|
}
|
|
}
|
|
return {
|
|
updateSlider: updateSlider
|
|
};
|
|
|
|
})();
|
|
|
|
(function initAndSetupTheSliders() {
|
|
const inputs = [].slice.call(document.querySelectorAll('.range-slider input'));
|
|
inputs.forEach(input => input.setAttribute('value', '50'));
|
|
inputs.forEach(input => app.updateSlider(input));
|
|
// Cross-browser support where value changes instantly as you drag the handle, therefore two event types.
|
|
inputs.forEach(input => input.addEventListener('input', element => app.updateSlider(input)));
|
|
inputs.forEach(input => input.addEventListener('change', element => app.updateSlider(input)));
|
|
})();
|
|
|
|
$("#handle1").roundSlider({
|
|
sliderType: "min-range",
|
|
editableTooltip: false,
|
|
radius: 105,
|
|
width: 16,
|
|
value: 38,
|
|
handleSize: 0,
|
|
handleShape: "square",
|
|
circleShape: "custom-half",
|
|
startAngle:0,
|
|
endAgle:359.9
|
|
// startAngle: 315,
|
|
// tooltipFormat: "changeTooltip"
|
|
});
|
|
|
|
function changeTooltip(e) {
|
|
var val = e.value, speed;
|
|
if (val < 20) speed = "Slow";
|
|
else if (val < 40) speed = "Normal";
|
|
else if (val < 70) speed = "Speed";
|
|
else speed = "Very Speed";
|
|
|
|
return val + " km/h" + "<div>" + speed + "<div>";
|
|
}
|
|
</script>
|
|
|
|
</html> |