Javascript Code: Range Slider with Bicycle Rider

A range input option is sometimes needed in HTML forms. You can make it more attractive by adding some effects to it. The following code put a bicycle rider on the range and makes it more attractive!
<!-- this script got from www.javascriptfreecode.com coded by: Kerixa Inc. -->
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=B612+Mono&amp;display=swap&amp;text=0123456789'>
<style>
* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	font-size: calc(32px + (48 - 32)*(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;
	}
}
</style>
<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>

<script>
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;
  }}
    </script><a target='_blank' href='http://www.javascriptfreecode.com/' style='font-size: 8pt; text-decoration: none'>JavaScript Codes</a>
If you don't know how to use this code or need more information Click here!
Javascript Best Codes

Javascript Code: Range Slider with Bicycle Rider

Links
