<form>
	<div id="unicycle1" class="unicycle">
		<input type="range" class="unicycle__wheel" name="unicycle" min="0" max="100" value="0">
		<div class="unicycle__marker">
			<div class="unicycle__rider-head"></div>
			<div class="unicycle__rider-body">
				<div class="unicycle__left-arm">
					<div class="unicycle__left-lower-arm"></div>
				</div>
				<div class="unicycle__right-arm">
					<div class="unicycle__right-lower-arm">
						<div class="unicycle__flag-pole">
							<div class="unicycle__flag">0</div>
						</div>
					</div>
				</div>
				<div class="unicycle__left-leg">
					<div class="unicycle__left-lower-leg"></div>
				</div>
				<div class="unicycle__right-leg">
					<div class="unicycle__right-lower-leg"></div>
				</div>
			</div>
			<div class="unicycle__seat"></div>
			<div class="unicycle__bar"></div>
			<div class="unicycle__pedal-arms">
				<div class="unicycle__pedal"></div>
				<div class="unicycle__pedal"></div>
			</div>
		</div>
	</div>
</form>
* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	font-size: calc(24px + (48 - 24)*(100vw - 320px)/(2560 - 320));
	--bg: #f1f1f1;
	--fg: #171717;
}
body, input {
	color: var(--fg);
	font: 1em/1.5 "B612 Mono", monospace;
}
body {
	background: var(--bg);
	display: flex;
	height: 100vh;
	overflow-x: hidden;
}
form {
	margin: auto;
	width: 8.5em;
}
.unicycle,
.unicycle__wheel,
.unicycle__rider-body,
.unicycle__pedal-arms {
	position: relative;
}
.unicycle {
	margin-top: 4.25em;
}
.unicycle__wheel {
	background: transparent;
	border-radius: 0.75em;
	box-shadow: 0 0 0 0.1em inset;
	display: block;
	outline: transparent;
	width: 100%;
	height: 1.5em;
	-webkit-appearance: none;
	appearance: none;
}
.unicycle__wheel::-webkit-slider-thumb {
	background: transparent;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 0.1em inset;
	cursor: pointer;
	width: 1.5em;
	height: 1.5em;
	-webkit-appearance: none;
	appearance: none;
}
.unicycle__wheel::-moz-range-thumb {
	background: transparent;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 0.1em inset;
	cursor: pointer;
	width: 1.5em;
	height: 1.5em;
}
.unicycle__marker,
.unicycle__right-arm,
.unicycle__right-lower-arm,
.unicycle__left-arm,
.unicycle__left-lower-arm,
.unicycle__right-leg,
.unicycle__right-lower-leg,
.unicycle__left-leg,
.unicycle__left-lower-leg,
.unicycle__flag-pole,
.unicycle__flag,
.unicycle__pedal {
	position: absolute;
}
.unicycle__marker {
	/* JS will control the variables */
	--pedalRot: 0deg;
	--rightLegRot: 0deg;
	--rightLowerLegRot: 0deg;
	--leftLegRot: 0deg;
	--leftLowerLegRot: 0deg;
	top: -2.5em;
	left: 0;
	width: 1.5em;
	height: 4em;
	z-index: -1;
}
.unicycle__marker > div {
	margin: auto;
}
.unicycle__marker .unicycle__rider-body {
	height: 1em;
	margin-bottom: 0.1em;
}
.unicycle__rider-head, .unicycle__flag {
	box-shadow: 0 0 0 0.1em inset;
}
.unicycle__rider-head {
	border-radius: 50%;
	width: 1em;
	height: 1em;
}
.unicycle__rider-head ~ div,
.unicycle__right-arm,
.unicycle__right-lower-arm,
.unicycle__left-arm,
.unicycle__left-lower-arm,
.unicycle__right-leg,
.unicycle__right-lower-leg,
.unicycle__left-leg,
.unicycle__left-lower-leg,
.unicycle__flag-pole,
.unicycle__pedal {
	background: currentColor;
}
.unicycle__rider-body,
.unicycle__right-arm,
.unicycle__right-lower-arm,
.unicycle__left-arm,
.unicycle__left-lower-arm,
.unicycle__right-leg,
.unicycle__right-lower-leg,
.unicycle__left-leg,
.unicycle__left-lower-leg,
.unicycle__flag-pole,
.unicycle__bar {
	width: 0.1em;
}
.unicycle__right-lower-arm,
.unicycle__left-lower-arm,
.unicycle__right-leg,
.unicycle__right-lower-leg,
.unicycle__left-leg,
.unicycle__left-lower-leg,
.unicycle__seat,
.unicycle__pedal-arms,
.unicycle__pedal {
	border-radius: 0.05em;
}
.unicycle__right-arm,
.unicycle__right-lower-arm,
.unicycle__left-arm,
.unicycle__left-lower-arm,
.unicycle__right-leg,
.unicycle__right-lower-leg,
.unicycle__left-leg,
.unicycle__left-lower-leg {
	transform-origin: 50% 0.05em;
}
.unicycle__right-lower-arm,
.unicycle__left-lower-arm,
.unicycle__right-leg,
.unicycle__left-leg,
.unicycle__right-lower-leg,
.unicycle__left-lower-leg {
	top: calc(100% - 0.05em);
}
.unicycle__right-arm,
.unicycle__right-lower-arm,
.unicycle__left-arm,
.unicycle__left-lower-arm,
.unicycle__right-leg,
.unicycle__left-leg {
	height: 0.75em;
}
.unicycle__right-lower-leg,
.unicycle__left-lower-leg {
	height: 0.78em;
}
.unicycle__right-arm {
	transform: rotate(-80deg);
}
.unicycle__right-lower-arm {
	transform: rotate(-10deg);
}
.unicycle__left-arm {
	transform: rotate(25deg);
}
.unicycle__left-lower-arm {
	transform: rotate(5deg);
}
.unicycle__right-leg {
	transform: rotate(var(--rightLegRot));
}
.unicycle__right-lower-leg {
	transform: rotate(var(--rightLowerLegRot));
}
.unicycle__left-leg {
	transform: rotate(var(--leftLegRot));
}
.unicycle__left-lower-leg {
	transform: rotate(var(--leftLowerLegRot));
}
.unicycle__flag-pole {
	height: 3em;
	bottom: 0;
	transform: rotate(90deg);
	transform-origin: 50% calc(100% - 0.1em);
}
.unicycle__flag {
	right: 0;
	text-align: center;
	width: 2.25em;
	height: 1.5em;
}
.unicycle__seat,
.unicycle__pedal-arms {
	height: 0.1em;
}
.unicycle__seat {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	width: 0.4em;
}
.unicycle__bar {
	border-radius: 0 0 0.05em 0.05em;
	height: 1.1em;
}
.unicycle__pedal-arms {
	top: -0.1em;
	width: 0.5em;
	transform: rotate(var(--pedalRot));
}
.unicycle__pedal {
	top: 0;
	width: 0.3em;
	height: 0.1em;
	transform: rotate(calc(var(--pedalRot) * -1));
}
.unicycle__pedal:first-child {
	left: -0.15em;
}
.unicycle__pedal:last-child {
	right: -0.15em;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #171717;
		--fg: #f1f1f1;
	}
}
document.addEventListener("DOMContentLoaded",() => {
	let unicycle = new UnicycleRangeSlider("#unicycle1");
});

class UnicycleRangeSlider {
	constructor(el) {
		this.wheel = document.querySelector(`${el} input[type=range]`);
		this.marker = document.querySelector(`${el} .unicycle__marker`);
		this.flag = document.querySelector(`${el} .unicycle__flag`);

		this.updateBodyPos();
		this.wheel.addEventListener("input",() => { this.updateBodyPos(); });
	}
	updateBodyPos() {
		let max = this.wheel.max,
			min = this.wheel.min,
			realValue = this.wheel.value,
			ticks = max - min,
			relValue = realValue - min,
			percent = relValue / ticks,
			revs = 1,
			left = percent * 100,
			emAdjust = percent * 1.5,
			pedalRot = percent * (360 * revs),
			period = (1 / ((ticks / revs) / 2)) * relValue * Math.PI,
			rightLegRot = -22.5 * Math.sin(period + (1.85 * Math.PI)) - 22.5,
			rightLowerLegRot = 45 * Math.sin(period + (0 * Math.PI)) + 45,
			leftLegRot = -22.5 * Math.sin(period + (2.85 * Math.PI)) - 22.5,
			leftLowerLegRot = 45 * Math.sin(period + (1 * Math.PI)) + 45,
			cssVars = {
				"--pedalRot": `${pedalRot}deg`,
				"--rightLegRot": `${rightLegRot}deg`,
				"--rightLowerLegRot": `${rightLowerLegRot}deg`,
				"--leftLegRot": `${leftLegRot}deg`,
				"--leftLowerLegRot": `${leftLowerLegRot}deg`
			};
		// position stick figure and unicycle body
		this.marker.style.left = `calc(${left}% - ${emAdjust}em)`;
		// update the variables in CSS
		for (let v in cssVars)
			this.marker.style.setProperty(v,cssVars[v]);
		// number in the flag
		this.flag.innerHTML = realValue;
	}
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.