Rotary control with value display

Developer
Moses Holmström
Size
3,750 Kb
Views
44,528
  1. Rotary control with value display Previews
  2. Rotary control with value display HTML Codes
  3. Rotary control with value display CSS Codes
  4. Rotary control with value display JS Codes

How do I make an rotary control with value display?

What is a rotary control with value display? How do you make a rotary control with value display? This script and codes were developed by Moses Holmström on 21 August 2022, Sunday.

Rotary control with value display Previews
IQ Test

Rotary control with value display - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Rotary control with value display</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="housing"><div class="rotary" id="rotary"></div> <div class="value hidden" id="rotary_value">-90.00</div></div> <script src="js/index.js"></script>
</body>
</html>

Rotary control with value display - Script Codes CSS Codes

body { font-family: "M+ 1mn", monospace; font-size: 20px; background: #505c5c;
}
.housing { border-radius: 100%; box-shadow: 0 0.5em 0.5em -0.25em rgba(0, 0, 0, 0.75); left: calc(50% - 4em); position: absolute; top: calc(50% - 4em); width: 8em; height: 8em;
}
.housing::before { box-sizing: border-box; border-top: 0.3em solid rgba(230, 230, 230, 0.3); border-left: 0em solid rgba(32, 32, 32, 0); border-right: 0em solid rgba(32, 32, 32, 0); border-bottom: 0.1em solid rgba(32, 32, 32, 0.6); background-origin: border-box; background-image: -webkit-radial-gradient(50% 100% circle, rgba(64, 64, 64, 0) 0%, rgba(64, 64, 64, 0) 50%, rgba(250, 250, 250, 0.5) 100%), -webkit-radial-gradient(50% 0% circle, rgba(64, 64, 64, 0) 0%, rgba(64, 64, 64, 0) 50%, rgba(32, 32, 32, 0.5) 100%); background-image: radial-gradient(circle at 50% 100%, rgba(64, 64, 64, 0) 0%, rgba(64, 64, 64, 0) 50%, rgba(250, 250, 250, 0.5) 100%), radial-gradient(circle at 50% 0%, rgba(64, 64, 64, 0) 0%, rgba(64, 64, 64, 0) 50%, rgba(32, 32, 32, 0.5) 100%); border-radius: 100%; content: ""; display: block; width: 100%; height: 100%; position: absolute; pointer-events: none; z-index: 9001;
}
.value { background-image: -webkit-linear-gradient(bottom, rgba(255, 32, 32, 0.1), rgba(0, 0, 0, 0.67) 40%, rgba(0, 0, 0, 0.67) 60%, rgba(255, 32, 32, 0.1)); background-image: linear-gradient(0deg, rgba(255, 32, 32, 0.1), rgba(0, 0, 0, 0.67) 40%, rgba(0, 0, 0, 0.67) 60%, rgba(255, 32, 32, 0.1)); border-radius: 0.4em; box-sizing: border-box; color: #ff4040; display: block; padding: 0.2em 0.2em; position: relative; pointer-events: none; z-index: 9000; top: 67%; left: 50%; text-align: right; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; width: 4em; height: 1.5em; line-height: 1.33;
}
.value.hidden { opacity: 0; -webkit-transition: opacity 2s ease-in; transition: opacity 2s ease-in;
}
.rotary { width: 100%; height: 100%; position: absolute; border: 1em solid #646464; border-right: 0.1em solid #646464; box-sizing: border-box; background-color: #646464; background-image: -webkit-linear-gradient(left, #646464 45%, rgba(100, 100, 100, 0) 55%), -webkit-linear-gradient(bottom, transparent 48%, black 49%, black 51%, transparent 52%), -webkit-radial-gradient(67% 50% circle, rgba(32, 32, 32, 0.33) 0%, rgba(255, 255, 255, 0) 42%, #406464 100%); background-image: linear-gradient(90deg, #646464 45%, rgba(100, 100, 100, 0) 55%), linear-gradient(0deg, transparent 48%, black 49%, black 51%, transparent 52%), radial-gradient(circle at 67% 50%, rgba(32, 32, 32, 0.33) 0%, rgba(255, 255, 255, 0) 42%, #406464 100%); border-radius: 100%; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: border 0.4s ease-out; transition: border 0.4s ease-out;
}
.rotary:hover, .rotary.active { border: 0.2em solid #806464; border-right: 0.1em solid #646464; background-image: -webkit-linear-gradient(left, #646464 45%, rgba(100, 100, 100, 0) 55%), -webkit-linear-gradient(bottom, transparent 48%, black 49%, black 51%, transparent 52%), -webkit-radial-gradient(67% 50% circle, rgba(255, 32, 32, 0.33) 0%, rgba(100, 100, 100, 0) 55%, #406464 100%); background-image: linear-gradient(90deg, #646464 45%, rgba(100, 100, 100, 0) 55%), linear-gradient(0deg, transparent 48%, black 49%, black 51%, transparent 52%), radial-gradient(circle at 67% 50%, rgba(255, 32, 32, 0.33) 0%, rgba(100, 100, 100, 0) 55%, #406464 100%);
}

Rotary control with value display - Script Codes JS Codes

var rotary = { el: document.getElementById("rotary"), displayEl: document.getElementById("rotary_value"), center: [0,0], clickStart : [0,0], angle: 0
};
rotary.el.addEventListener("mousedown", rotaryInit);
function rotaryInit (event) { event.preventDefault(); rotary.clickStart = [event.clientX, event.clientY]; var bb = rotary.el.getBoundingClientRect(); rotary.center = [bb.left + (bb.width / 2), bb.top + (bb.height / 2)]; document.addEventListener("mousemove", rotaryMove); document.addEventListener("mouseup", rotaryRelease); rotary.el.classList.add("active"); rotary.displayEl.classList.remove("hidden");
}
function rotaryMove (event) { var offsetX = (event.clientX) - rotary.center[0]; var offsetY = (event.clientY) - rotary.center[1]; var radian = Math.atan2(offsetY, offsetX); var angle = radian * (180 / Math.PI); rotary.el.style.transform = "rotate(" + angle + "deg)"; rotary.displayEl.innerHTML = angle.toFixed(2);
}
function rotaryRelease (event) { document.removeEventListener("mousemove", rotaryMove); rotary.el.classList.remove("active"); rotary.displayEl.classList.add("hidden");
}
Rotary control with value display - Script Codes
Rotary control with value display - Script Codes
Home Page Home
Developer Moses Holmström
Username thykka
Uploaded August 21, 2022
Rating 3.5
Size 3,750 Kb
Views 44,528
Do you need developer help for Rotary control with value display?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Moses Holmström (thykka) Script Codes
Name
Loader - Connect the dots
Random word highlight script
Esmes Vice Anim00ted SVG
Three.js Planetoid
HSL color picker
Rotating ASCII Globe
Tripples
Thing
Brainbow Menu
Freaky Shadow Effect
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!