index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Three.js Cylinder with Sliders</title>
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
	<div id="sliderContainer">
		Radius: <input type="range" id="radiusSlider" min="1" max="5" value="2" step="0.1"><br>
		Height: <input type="range" id="heightSlider" min="1" max="10" value="5" step="0.1"><br>
		Segments: <input type="range" id="segmentsSlider" min="3" max="64" value="8"><br>
		<label><input type="checkbox" id="rotateCheckbox"> Rotate</label><br>
		<label><input type="checkbox" id="wireframeCheckbox"> Wireframe</label>
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
	<script src="cylinder.js"></script>
</body>
</html>