Sliders

Move element by means of sliders.

by Sasabee

HTML

<body>
	<div class="grid-container">
		<div class="tools-outer">
			<div class="tools-wrap">
				<button class="button">absolute</button>
			</div>
			<div class="tools-wrap">
				<label for="top">Top: 0px</label><!--
				--><input id="top" type="range" value="0" step="1" min="0" max="1000">
			</div>
			<div class="tools-wrap">
				<label for="left">Left: 0px</label><!--
				--><input id="left" type="range" value="0" step="1" min="0" max="1000" label="left">
			</div>
		</div>
		<div class="field">
			<svg class="circle position-absolute" width="50" height="50">
				<circle r="24" cx="25" cy="25" fill="black" stroke="#AAA" stroke-width=".1" />
			</svg>
		</div>
	</div>
</body>

CSS

:root {
	font-size: 16px;
	line-height: 1.6;
}
* {
	box-sizing: boder-box;
}
body {
	margin: 0;
	padding: 0;
}
.grid-container {
	display: grid;
	grid-template-rows: auto 1fr;
	width: 100%;
	height: 500px;
}
.tools-outer {
	padding: 1rem;
	background-color: #334;
}
.tools-wrap:not(:first-child) {
	margin-top: 1rem;
}
.button::before {
	content: "Position: ";
}
.button {
	appearance: none;
	font-size: 16px;
	color: #FFF;
	border: 0;
	border: 1px solid #222;
	border-radius: 4px;
	padding: .6rem 1rem;
	width: 170px;
	height: 40px;
	background-image: linear-gradient(0deg, #333, #555);
	cursor: pointer;
}
.button.on {
	border-color: #000;
	border-width: 2px;
	background-image: linear-gradient(180deg, #333, #555);
}
.tools-wrap > label {
	vertical-align: top;
	color: #FFF;
}
.tools-wrap > input[type="range"] {
	width: 100%;
}
.field {
	position: relative;
	overflow: hidden;
	box-shadow: inset 0px 0px 60px #888;
	background-color: #333;
	cursor: not-allowed;
}
.circle.position-absolute {
	position: absolute;
}

JavaScript

const field = document.querySelector('.field');
const circle = field.firstElementChild;

const callback = (e)=>{
	const input = e.target;
	circle.style[input.id] = input.value + 'px';
	const label = input.previousElementSibling;
	label.innerText = label.innerText.split(' ')[0] + ' ' + input.value + 'px';
};

document.getElementById('top').addEventListener('input', callback);
document.getElementById('left').addEventListener('input', callback);

document.querySelector('button').addEventListener('click', (e)=>{
	const button = e.target;
	button.checked = Boolean(!e.target.checked);
	button.innerText = button.checked ? 'static' : 'absolute';
	button.classList.toggle('on');
	circle.classList.toggle('position-absolute');
});