ダイヤルノブ

HTML

<div><button type="button" id="dial-knob"></button></div>

CSS

#dial-knob {
	position:relative;
	border:10px solid #69c0cc;
	border-radius:50%;
	padding:0;
	width:200px;
	height:200px;
	background:#7fd8e4;
	cursor:pointer;
}

	#dial-knob::-moz-focus-inner {
		border:none;
		padding:0;
	}

	#dial-knob::before {
		position:absolute;
		top:calc(50% - 10px);
		right:10px;
		border-radius:50%;
		width:20px;
		height:20px;
		background-color:rgba(255, 255, 255, 0.6);
		content:"";
	}

JavaScript

var dialElem = document.getElementById('dial-knob');

if (!dialElem) return;

var isDragging = false;

/**
 * 更新
 * @param {Object} evt イベントオブジェクト
 */
var updateDraw = function(evt) {
	var bounds      = dialElem.parentNode.getBoundingClientRect(),
	    dialCenterX = bounds.left + (dialElem.offsetWidth / 2),
	    dialCenterY = bounds.top + (dialElem.offsetHeight / 2),
	    radian      = Math.atan2(evt.clientY - dialCenterY, evt.clientX - dialCenterX);

	dialElem.style.transform = 'rotate(' + (radian * (180 / Math.PI)) + 'deg)';
};

dialElem.addEventListener('mousedown', function(ev) {
	isDragging = true;
	updateDraw(ev || event);
});

window.addEventListener('mousemove', function(ev) {
	if (!isDragging) return;
	updateDraw(ev || event);
});

window.addEventListener('mouseup', function() {
	isDragging = false;
});