12+ JavaScript Range Slider Examples

This post contains a total of 12+ Hand-Picked JavaScript Range Slider Examples with Source Code. All these Range Sliders are made using JavaScript and Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript Range Slider Examples

1. By François St-Germain

Made by François St-Germain. Simple Range slider with Number scroll animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
  background: #664aff;
  font-family: Helvetica;
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

#app {
  background: #FFF;
  border-radius: 8px;
  padding: 20px;
  width: 16em;
  margin: auto;
  box-shadow: 0 5px 10px 3px rgba(67, 43, 165, 0.2);
}

.slider {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #664aff;
}
.slider input[type=range] {
  outline: none;
  height: 3px;
  flex: 1 1 auto;
  color: inherit;
  margin-right: 1em;
  background-color: #E3E3E3;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 100%;
  background-repeat: no-repeat;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
}
.slider ::-webkit-slider-runnable-track {
  border: none;
  background: transparent;
  -webkit-appearance: none;
          appearance: none;
}
.slider ::-moz-range-track {
  border: none;
  background: transparent;
  -moz-appearance: none;
       appearance: none;
}
.slider ::-moz-focus-outer {
  border: 0;
}
.slider ::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  background: currentColor;
  border-radius: 50% 50%;
  -webkit-appearance: none;
          appearance: none;
}
.slider ::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  background: currentColor;
  border-radius: 50% 50%;
  -moz-appearance: none;
       appearance: none;
}

.slider-value {
  display: inline-block;
  position: relative;
  height: 1.5em;
}
.slider-value:before, .slider-value:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0.25em;
}
.slider-value:before {
  top: 0;
  background: linear-gradient(#FFF, rgba(255, 255, 255, 0));
}
.slider-value:after {
  bottom: 0;
  background: linear-gradient(rgba(255, 255, 255, 0), #FFF);
}

.slider-value-number {
  height: 1em;
  overflow: hidden;
  display: inline-block;
  padding: 0.25em 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  font-weight: 600;
}
.slider-value-number ul {
  margin-top: -0.25em;
  padding: 0;
  list-style-type: none;
  transition: transform 0.75s ease, opacity 0.5s ease;
}
.slider-value-number ul li {
  height: 1em;
  display: block;
  margin: 0;
  padding: 0.25em 0;
}

.credit {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  padding: 1em 0;
}
.credit a {
  color: #FFF;
  text-decoration: none;
}
</style>
</head>
<body>
<div id="app"></div>
<p class="credit">Inspired by this <a href="https://dribbble.com/shots/5436968-Slider-UI-micro-Interaction-for-Mobikul">shot</a> by <a href="https://dribbble.com/nitishkmrk">Nitish Khagwal</a></p>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js'></script>
      <script>
class Slider extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      value: props.value || props.min };

  }

  handleChange(e) {
    this.setState({
      value: e.target.value });

  }

  percent() {
    const { min, max } = this.props;
    return (this.state.value - min) * 100 / (max - min);
  }

  renderNumber(index) {
    const value = this.state.value.toString();
    const { max } = this.props;
    const length = max.toString().length;
    const visible = index + 1 > length - value.length;
    const position = visible ? "-" + value[index - (length - value.length)] * 10 + '%' : '10%';

    let style = {
      transform: "translateY(" + position + ")",
      opacity: visible ? "1" : "0" };


    return /*#__PURE__*/(
      React.createElement("div", { className: "slider-value-number", key: index }, /*#__PURE__*/
      React.createElement("ul", { style: style },
      Array.from({ length: 10 }, (_, i) => /*#__PURE__*/
      React.createElement("li", { key: i }, i)))));
  }

  render() {
    const { min, max, step } = this.props;
    const length = max.toString().length;
    let numbers = [];

    for (let i = 0; i < length; i++) {if (window.CP.shouldStopExecution(0)) break;
      numbers.push(this.renderNumber(i));
    }window.CP.exitedLoop(0);

    return /*#__PURE__*/(
      React.createElement("div", { className: "slider" }, /*#__PURE__*/
      React.createElement("input", {
        type: "range",
        min: min,
        max: max,
        defaultValue: this.state.value,
        step: step,
        onInput: this.handleChange,
        style: {
          backgroundSize: this.percent() + '% 100%' } }), /*#__PURE__*/


      React.createElement("div", { className: "slider-value" }, numbers)));


  }}


ReactDOM.render( /*#__PURE__*/React.createElement(Slider, { min: 0, max: 200, value: 50 }), document.querySelector("#app"));
//# sourceURL=pen.js
    </script>
</body>
</html>

2. By Marine Piette

Made by Marine Piette. JavaScript Weight Range Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  background-color: #000;
  font-family: "Roboto", sans-serif;
  background: linear-gradient(180deg, #DB302A 0%, #62186B 100%) no-repeat;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.box-minmax {
  margin-top: 30px;
  width: 608px;
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  color: #FFFFFF;
}
.box-minmax span:first-child {
  margin-left: 10px;
}

.range-slider {
  margin-top: 30vh;
}

.rs-range {
  margin-top: 29px;
  width: 600px;
  -webkit-appearance: none;
}
.rs-range:focus {
  outline: none;
}
.rs-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  box-shadow: none;
  background: #ffffff;
  border-radius: 0px;
  border: 0px solid #010101;
}
.rs-range::-moz-range-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  box-shadow: none;
  background: #ffffff;
  border-radius: 0px;
  border: 0px solid #010101;
}
.rs-range::-webkit-slider-thumb {
  box-shadow: none;
  border: 0px solid #ffffff;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25);
  height: 42px;
  width: 22px;
  border-radius: 22px;
  background: white;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -20px;
}
.rs-range::-moz-range-thumb {
  box-shadow: none;
  border: 0px solid #ffffff;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25);
  height: 42px;
  width: 22px;
  border-radius: 22px;
  background: white;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -20px;
}
.rs-range::-moz-focus-outer {
  border: 0;
}

.rs-label {
  position: relative;
  transform-origin: center center;
  display: block;
  width: 98px;
  height: 98px;
  background: transparent;
  border-radius: 50%;
  line-height: 30px;
  text-align: center;
  font-weight: bold;
  padding-top: 22px;
  box-sizing: border-box;
  border: 2px solid #fff;
  margin-top: 20px;
  margin-left: -38px;
  left: attr(value);
  color: #fff;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  font-size: 36px;
}
.rs-label::after {
  content: "kg";
  display: block;
  font-size: 20px;
  letter-spacing: 0.07em;
  margin-top: -2px;
}
</style>
</head>
<body>
  <div class="container">
  
  <div class="range-slider">
    <span id="rs-bullet" class="rs-label">0</span>
    <input id="rs-range-line" class="rs-range" type="range" value="0" min="0" max="200">
    
  </div>
  
  <div class="box-minmax">
    <span>0</span><span>200</span>
  </div> 
</div>
      <script>
var rangeSlider = document.getElementById("rs-range-line");
var rangeBullet = document.getElementById("rs-bullet");

rangeSlider.addEventListener("input", showSliderValue, false);

function showSliderValue() {
  rangeBullet.innerHTML = rangeSlider.value;
  var bulletPosition = rangeSlider.value / rangeSlider.max;
  rangeBullet.style.left = bulletPosition * 578 + "px";
}
    </script>
</body>
</html>

3. By Jon Kantner

Made by Jon Kantner. Cool Unicycle Range Slider with Animation made using JavaScript. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<style>
* {
	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;
	}
}
</style>
</head>
<body>
  <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>
</body>
</html>

4. By Ethan

Made by Ethan. Yukari’s Eyes Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900&amp;text=BIU'>
<style>
body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  color: #000;
  background: #fff;
  font-family: sans-serif;
  user-select: none;
}
* {
  box-sizing: border-box;
}
.yukari-container {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.yukari-block {
  position: relative;
  height: 291px;
  width: 291px;
}
.yukari-block .yukari-eye-container {
  position: absolute;
  z-index: 1;
  top: 65px;
  width: 91%;
  text-align: center;
  font-family: "Raleway", sans-serif;
}
.yukari-block .yukari-eye-container .yukari-eyes {
  height: 90px;
  line-height: 90px;
  font-size: 78px;
}
.yukari-block .yukari-eye-container .yukari-eyes div {
  display: inline-block;
  -webkit-transform: scaleX(2);
  margin-left: 16px;
  margin-right: 16px;
}
.yukari-block img {
  position: absolute;
}
.yukari-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  height: 100px;
  width: 500px;
  max-width: 100%;
  font-family: serif;
}
.yukari-control .yukari-control--range {
  display: flex;
  align-items: center;
}
.yukari-control .yukari-control--range span {
  margin: 10px;
  font-size: 40px;
}
.yukari-control .yukari-control--range span.normal {
  font-weight: 400;
}
.yukari-control .yukari-control--range span.bold {
  font-weight: 700;
}
.yukari-control .yukari-control--range input.slider {
  width: 250px;
}
.yukari-control .yukari-control--buttons .button {
  display: inline-block;
  background: #ddd;
  font-family: serif;
  height: 40px;
  width: 40px;
  font-size: 25px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}
.yukari-control .yukari-control--buttons .button:hover {
  background: #bbb;
}
.yukari-control .yukari-control--buttons .button.selected {
  background: #7c548f;
  color: #fff;
}
.yukari-control .yukari-control--buttons .button.selected:hover {
  background: #9c74af;
}
.hidden-block {
  display: none;
}
.italic,
.button-italic {
  font-style: italic;
}
.underline,
.button-underline {
  text-decoration: underline;
}
input[type=range].slider {
  -webkit-appearance: none;
  width: 100%;
  margin: 13.85px 0;
}
input[type=range].slider:focus {
  outline: none;
}
input[type=range].slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 4.3px;
  cursor: pointer;
  box-shadow: 0px 0px 0px rgba(0,0,0,0.06), 0px 0px 0px rgba(13,13,13,0.06);
  background: #7c548f;
  border-radius: 0px;
  border: 0px solid rgba(1,1,1,0);
}
input[type=range].slider::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000, 0px 0px 0px #0d0d0d;
  border: 5.2px solid #7c548f;
  height: 32px;
  width: 32px;
  border-radius: 50px;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -13.85px;
}
input[type=range].slider:focus::-webkit-slider-runnable-track {
  background: #7c548f;
}
input[type=range].slider::-moz-range-track {
  width: 100%;
  height: 4.3px;
  cursor: pointer;
  box-shadow: 0px 0px 0px rgba(0,0,0,0.06), 0px 0px 0px rgba(13,13,13,0.06);
  background: #7c548f;
  border-radius: 0px;
  border: 0px solid rgba(1,1,1,0);
}
input[type=range].slider::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000, 0px 0px 0px #0d0d0d;
  border: 5.2px solid #7c548f;
  height: 32px;
  width: 32px;
  border-radius: 50px;
  background: #fff;
  cursor: pointer;
}
input[type=range].slider::-ms-track {
  width: 100%;
  height: 4.3px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range].slider::-ms-fill-lower {
  background: #7c548f;
  border: 0px solid rgba(1,1,1,0);
  border-radius: 0px;
  box-shadow: 0px 0px 0px rgba(0,0,0,0.06), 0px 0px 0px rgba(13,13,13,0.06);
}
input[type=range].slider::-ms-fill-upper {
  background: #7c548f;
  border: 0px solid rgba(1,1,1,0);
  border-radius: 0px;
  box-shadow: 0px 0px 0px rgba(0,0,0,0.06), 0px 0px 0px rgba(13,13,13,0.06);
}
input[type=range].slider::-ms-thumb {
  box-shadow: 0px 0px 0px #000, 0px 0px 0px #0d0d0d;
  border: 5.2px solid #7c548f;
  height: 32px;
  width: 32px;
  border-radius: 50px;
  background: #fff;
  cursor: pointer;
  height: 4.3px;
}
input[type=range].slider:focus::-ms-fill-lower {
  background: #7c548f;
}
input[type=range].slider:focus::-ms-fill-upper {
  background: #7c548f;
}
@media screen and (max-width: 450px), screen and (max-device-width: 450px) {
  .yukari-control {
    flex-direction: column;
  }
}
</style>
</head>
<body>
  <div class="yukari-container">
  <div class="yukari-block">
    <div class="yukari-eye-container">
      <div class="yukari-eyes">
        <div class="yukari-left-eye">I</div>
        <div class="yukari-right-eye">I</div>
      </div>
    </div><img class="yukari-without-eyes" src="https://i.ibb.co/8z5kK0t/download.png"/>
  </div>
  <div class="yukari-control">
    <div class="yukari-control--range"><span class="normal">B</span>
      <input class="slider" type="range" min="1" max="9"/><span class="bold">B</span>
    </div>
    <div class="yukari-control--buttons">
      <div class="button button-italic">I</div>
      <div class="button button-underline">U</div>
    </div>
  </div>
  <div class="text-block">
    <p>
      Inspired by a <a href="https://twitter.com/0Kp4r/status/922764617188753409" target="_blank">tweet</a>
      from <a href="https://twitter.com/0Kp4r" target="_blank">@0Kp4r</a>
    </p>
  </div>
</div>
<div class="hidden-block"><span style="font-weight: 100">BIU</span><span style="font-weight: 200">BIU</span><span style="font-weight: 300">BIU</span><span style="font-weight: 400">BIU</span><span style="font-weight: 500">BIU</span><span style="font-weight: 600">BIU</span><span style="font-weight: 700">BIU</span><span style="font-weight: 800">BIU</span><span style="font-weight: 900">BIU</span>
</div>
      <script>
var $ = function (e) {return document.querySelector(e);};
var slider = $("input.slider");
var eyes = $(".yukari-eyes");
var leftEye = $(".yukari-eyes .yukari-left-eye");
var rightEye = $(".yukari-eyes .yukari-right-eye");
var underlineButton = $(".yukari-control--buttons .button-underline");
var italicButton = $(".yukari-control--buttons .button-italic");

function buttonSelection(button, type) {

  if (button.classList.contains("selected")) {
    // Remove underline and selected class
    leftEye.classList.remove(type);
    rightEye.classList.remove(type);
    button.classList.remove("selected");
  } else {
    // Add underline and selected class
    leftEye.classList.add(type);
    rightEye.classList.add(type);
    button.classList.add("selected");
  }
}

slider.addEventListener("input", function (ev) {
  // console.log(ev.target.value)
  eyes.removeAttribute("style");
  eyes.setAttribute("style", "font-weight: " + ev.target.value * 100);
});

underlineButton.addEventListener("click", function () {buttonSelection(this, "underline");}, false);
italicButton.addEventListener("click", function () {buttonSelection(this, "italic");}, false);

var counter = 0;
var direction = true;
window.setTimeout(function () {
  var introAnimation = window.setInterval(function () {
    slider.value = counter + 1;
    eyes.removeAttribute("style");
    eyes.setAttribute("style", "font-weight: " + (counter + 1) * 100);
    if (counter == 0 && direction == false) {
      window.clearInterval(introAnimation);
    }
    if (counter == 8) {
      direction = false;
    }
    direction ? counter++ : counter--;
  }, 100);
}, 200);
    </script>
</body>
</html>

5. By Jon Kantner

Made by Jon Kantner. Choose Your Floors range Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Hind:400,700&amp;display=swap'>
  
<style>
* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--bg: #e3e4e8;
	--bgT: #e3e4e800;
	--fg: #17181c;
	--fgT: #17181c00;
	--inputBg: #fff;
	--handleBg: #255ff4;
	--handleDownBg: #0b46da;
	--handleTrackBg: #5583f6;
	font-size: calc(16px + (32 - 16)*(100vw - 320px)/(2560 - 320));
	 /* to be controlled by JS */
	--floors: 2;
	--maxFloors: 1;
}
body, input {
	color: var(--fg);
	font: 1em/1.5 "Hind", sans-serif;
}
body {
	background-color: var(--bg);
	display: flex;
	height: 100vh;
}
form, input, .range__input {
	width: 100%;
}
form {
	margin: auto;
	padding: 0 0.75em;
	max-width: 17em;
}
label {
	font-weight: bold;
}

/* Building parts */
.bldg {
	margin: 0 auto 3em auto;
	overflow: hidden;
	position: relative;
	width: 12em;
	height: 12em;
}
.bldg__roof, .bldg__main, .bldg__main:before {
	position: absolute;
}
.bldg__roof, .bldg__main {
	left: 50%;
	transform: translateX(-50%) scale(calc(1 / var(--floors)));
	transition: transform 0.3s cubic-bezier(0,0,0.25,1.25);
}
.bldg__roof, .bldg__main:before {
	width: 11em;
}
.bldg__roof {
	background: currentColor;
	border-radius: 0.5em;
	top: 0;
	transform-origin: 50% 0;
	height: 1.5em;
	z-index: 2;
}
.bldg__main, .bldg__main:before {
	bottom: 0;
}
.bldg__main {
	background:
		linear-gradient(0deg,var(--fg) 0.5em,var(--fgT) 0.5em) 0 0 / 100% 100%,
		linear-gradient(90deg,var(--fg) 5%,var(--fgT) 5% 95%,var(--fg) 95%) 0 0 / 100% 100%,
		linear-gradient(var(--bg) 25%,var(--bgT) 25% 75%,var(--bg) 75%) 0 100% / 4em 12em,
		linear-gradient(90deg,var(--bg) 50%,var(--fg) 50%) 0 100% / 4em 12em;
	border-radius: 0 0 1em 1em;
	transform-origin: 50% 100%;
	width: 10em;
	height: calc(12em * var(--maxFloors));
}
.bldg__main:before {
	background:
		radial-gradient(3em 3em at 1.5em 50%,var(--fg) 48%, var(--fgT) 50%),
		radial-gradient(2em 2em at 3em 2em,var(--fg) 48%, var(--fgT) 50%),
		radial-gradient(1em 1em at 4em 2.5em,var(--fg) 48%, var(--fgT) 50%),
		radial-gradient(1em 1em at 7em 2.5em,var(--fg) 48%, var(--fgT) 50%),
		radial-gradient(2em 2em at 8em 2em,var(--fg) 48%, var(--fgT) 50%),
		radial-gradient(3em 3em at 9.5em 50%,var(--fg) 48%, var(--fgT) 50%);
	content: "";
	display: block;
	left: -0.5em;
	height: 3em;
	z-index: 1;
}

/* Range slider */
.range:not(:last-child) {
	margin-bottom: 1.5em;
}
.range input[type=range],
.range input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none; 
	appearance: none;
}
.range input[type=range], .range__input-fill {
	border-radius: 0.25em;
	height: 0.5em;
}
.range input[type=range] {
	background-color: var(--inputBg);
	display: block;
	margin: 0.5em 0;
	padding: 0;
}
.range input[type=range]:focus {
	outline: transparent;
}
.range input[type=range]::-webkit-slider-thumb {
	background-color: var(--handleBg);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	position: relative;
	transition: background 0.1s linear;
	width: 1.5em;
	height: 1.5em;
	z-index: 1;
}
.range input[type=range]::-moz-range-thumb {
	background-color: var(--handleBg);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	position: relative;
	transform: translateZ(1px);
	transition: background-color 0.1s linear;
	width: 1.5em;
	height: 1.5em;
	z-index: 1;
}
.range input[type=range]::-moz-focus-outer {
	border: 0;
}
.range__input, .range__input-fill {
	display: block;
}
.range__input {
	margin-right: 0.375em;
	position: relative;
}
.range__input:active input[type=range]::-webkit-slider-thumb,
.range input[type=range]:focus::-webkit-slider-thumb,
.range input[type=range]::-webkit-slider-thumb:hover {
	background-color: var(--handleDownBg);
}
.range__input:active input[type=range]::-moz-range-thumb,
.range input[type=range]:focus::-moz-range-thumb,
.range input[type=range]::-moz-range-thumb:hover {
	background-color: var(--handleDownBg);
}
.range__input-fill, .range__counter {
	left: 0;
	pointer-events: none;
	position: absolute;
}
.range__input-fill {
	background-color: var(--handleTrackBg);
	top: calc(50% - 0.25em);
}
.range__counter {
	color: #fff;
	display: block;
	font-size: 0.75em;
	top: -0.375rem;
	text-align: center;
	width: 1.5rem;
	height: 1.5rem;
	z-index: 2;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #2e3138;
		--bgT: #2e313800;
		--fg: #e3e4e8;
		--fgT: #e3e4e800;
		--inputBg: #17181c;
	}
}
</style>
</head>
<body>
  <form>
	<div class="bldg">
		<div class="bldg__roof"></div>
		<div class="bldg__main"></div>
	</div>
	<label for="floors">Floors</label>
	<input id="floors" name="floors" type="range" min="1" max="8" value="2">
</form>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  
      <script id="rendered-js" >
window.addEventListener("DOMContentLoaded", () => {
  let floors = new FloorRange("#floors");
});

class FloorRange {
  constructor(id) {
    this.el = document.querySelector(id);
    this.fill = null;
    this.counter = null;
    this.elWithCSSVar = document.querySelector(":root");

    if (this.el) {
      this.buildSlider();
      this.el.addEventListener("input", this.changeValue.bind(this));
    }
  }
  buildSlider() {
    // create a div to contain the <input>
    let rangeWrap = document.createElement("div");
    rangeWrap.className = "range";
    this.el.parentElement.insertBefore(rangeWrap, this.el);

    // create another div to contain the <input> and fill
    let rangeInput = document.createElement("span");
    rangeInput.className = "range__input";
    rangeWrap.appendChild(rangeInput);

    // range fill, place the <input> and fill inside container <span>
    let rangeFill = document.createElement("span");
    rangeFill.className = "range__input-fill";
    rangeInput.appendChild(this.el);
    rangeInput.appendChild(rangeFill);
    this.fill = rangeFill;

    // create the counter
    let counter = document.createElement("span");
    counter.className = "range__counter";
    counter.textContent = "0";
    rangeInput.appendChild(counter);
    this.counter = counter;

    // initiate
    let maxFloorOvershoot = 3;
    this.elWithCSSVar.style.setProperty("--maxFloors", +this.el.max + maxFloorOvershoot);
    this.changeValue();
  }
  changeValue() {
    // keep the value within range
    if (+this.el.value > this.el.max)
    this.el.value = this.el.max;else

    if (+this.el.value < this.el.min)
    this.el.value = this.el.min;

    // update CSS variable
    this.elWithCSSVar.style.setProperty("--floors", +this.el.value);

    // counter and fill width
    let pct = (this.el.value - this.el.min) / (this.el.max - this.el.min),
    fillWidth = pct * 100;

    if (this.counter) {
      let adjLeftEm = 1.5 * pct;
      this.counter.textContent = this.el.value;
      this.counter.style.left = `calc(${fillWidth}% - ${adjLeftEm}rem)`;
    }
    if (this.fill) {
      let thumbEm = 1 - pct;
      this.fill.style.width = `calc(${fillWidth}% + ${thumbEm}em)`;
    }
  }}
    </script>
</body>
</html>

6. By Krisztian Hadi

Made by Krisztian Hadi. Simple JavaScript Range slider with Bubble. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://andreruffert.github.io/rangeslider.js/assets/rangeslider.js/dist/rangeslider.css'>
  
<style>
@import 'https://fonts.googleapis.com/css?family=Ubuntu+Mono';
body {
  background: #121212;
  color: #fff;
  font-family: "Ubuntu Mono", monospace;
  font-size: 1.6rem;
  font-weight: regular;
  -webkit-font-smoothing: antialiased;
}

wrapper {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 15rem;
}

.rangeslider {
  background-color: #fff;
  border-radius: 0;
  height: 0.2rem;
}

.rangeslider__fill {
  background-color: #F01F14;
  border-radius: 0;
}

.rangeslider__handle {
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  transition: transform 0.3s ease-in-out;
  -moz-transition: transform 0.3s ease-in-out;
  -webkit-transition: transform 0.3s ease-in-out;
}
.rangeslider__handle::after {
  display: none;
}
.rangeslider__handle:hover, .rangeslider__handle:active {
  -ms-transform: scale(1.2, 1.2);
  /* IE 9 */
  -webkit-transform: scale(1.2, 1.2);
  /* Safari */
  transform: scale(1.2, 1.2);
  transition: transform 0.1s ease-in-out;
  -moz-transition: transform 0.1s ease-in-out;
  -webkit-transition: transform 0.1s ease-in-out;
}

.rangeslider__value-bubble {
  position: absolute;
  top: auto;
  left: 50%;
  bottom: 2.5rem;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  text-align: center;
  background-color: #F01F14;
  padding: 1rem;
  color: #fff;
  width: auto;
  margin: 0;
  white-space: nowrap;
}
.rangeslider__value-bubble::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  border-top: 1rem solid #F01F14;
  position: absolute;
  top: auto;
  left: 50%;
  bottom: -1rem;
  transform: translate(-50%, -45%);
  -webkit-transform: translate(-50%, -45%);
  -ms-transform: translate(-50%, -45%);
}
</style>
</head>
<body>
  <!-- made with rangeslider.js-->
<html>
  <body>
    <wrapper>
      <input type="range" min="1" max="30" step="1" value="10" unit="❀"/>
    </wrapper>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://andreruffert.github.io/rangeslider.js/assets/rangeslider.js/dist/rangeslider.min.js'></script>
      <script>
var valueBubble = '<output class="rangeslider__value-bubble" />';

var unit = $('input[type="range"]').attr('unit');

function updateValueBubble(pos, value, context) {
  pos = pos || context.position;
  value = value || context.value;
  var $valueBubble = $('.rangeslider__value-bubble', context.$range);
  var tempPosition = pos + context.grabPos;
  var position = tempPosition <= context.handleDimension ? context.handleDimension : tempPosition >= context.maxHandlePos ? context.maxHandlePos : tempPosition;

  if ($valueBubble.length) {
    $valueBubble[0].style.left = Math.ceil(position) + 'px';
    $valueBubble[0].innerHTML = value + " " + unit;
  }
}

$('input[type="range"]').rangeslider({
  polyfill: false,
  onInit: function () {
    this.$range.append($(valueBubble));
    updateValueBubble(null, null, this);
  },
  onSlide: function (pos, value) {
    updateValueBubble(pos, value, this);
  } });
    </script>
</body>
</html>

7. By Cam O’Connell

Made by Cam O’Connell. JavaScript Range slider with Cool Text Color fill animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
  width: 100%;
  height: 100vh;
	background: #cc2e8b;
}
.content {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30%;
  transform: translate(-50%,-60%);
}

.logo-wrap {
    width: 100%;
    position: relative;
}
/* slider */
.range-slider .input-range {
	-webkit-appearance: none;
	width: 300px;
	height: 8px;
	border-radius: 4px;
	background: rgb(181, 40, 123);
	outline: none;
}
.range-slider .input-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #f7f2ec;
	border: 2px solid #cc2e8b;
	cursor: pointer;
}
.range-slider .input-range::-moz-range-thumb {
	width:20px;
	height: 20px;
	border: 0;
	border-radius: 50%;
	background: #353535;
	cursor: pointer;
}
.range-slider .input-range:active::-moz-range-thumb {
	background: #e06161;
}
.range-slider {
	bottom: 30px;
	position: absolute;
	left: 50%;
	margin-left: -150px;
}
::-moz-range-track {
	background: #ccc;
	border: 0;
}
input::-moz-focus-inner {
	border: 0;
}
</style>
</head>
<body>
  <div class="content">
  <div class="logo-wrap">
    <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 230" data-llp-composed="true"><style>.a{fill:none;}</style><path d="M64 38.3c0 0 18-21.3 4-28.7S41.8 18 38.7 51c-3.7 39-27 56.6-33 43.7 -0.9-7.8 8.3-11.3 22.7 1.7 19 16 37.3-13.3 42-19C75 71.7 93.7 60.7 89 57S60.7 82.2 75.3 90.7c6.1 2.9 22-10.7 27-32 0 0-14.7 29.7-7 29.7 11.7 0 27.3-37.7 37.7-36.3 10.3 1.3 15.3 22-10 26.7 9 16.7-7 37.3-14.7 30.3 -7.5-6.8 40-17 57.7-61.7 0 0-15 28.7-4.7 31.7 10.3 3 29.7-30.3 27-34 -2.7-3.7-6.3 1.9-9 16 -2.9 15.1-5 43-23.7 43 -5.3 0 1-7.5 7.2-11.6 7.5-4.9 16.5-8.7 28.2-23.1" data-llp-id="logo-0" data-llp-duration="3000" class="a" stroke-width="100"  /><path d="M242 67.3c0 0 14.7-15.7 6.7-25.3 -8-9.7-27.3-7.7-29.3 17.1 -2 24.9-7.7 67.6-32.3 66.9 -11.3-0.3-4.6-16.1 16.7-1 23 16.3 46.3-18 51.3-36.3 0 0-10.3 33 0 32.7 10.3-0.3 26-38.9 26-38.9s-2.3 27.2-7.3 35.9c8-17 19.3-39.1 27-35.9 7.7 3.2-17.7 28.2-5.7 32.2 0 0 11.7 0.7 21.7-18.3" data-llp-id="logo-1" data-llp-duration="1500" data-llp-delay="3000" class="a"/><path d="M319.7 96.7c0 0 21.3-5.2 19-17 -2.3-12-34.3 17.9-17 30.7 7 5.2 21.7-3.4 23-10.4" data-llp-id="logo-2" data-llp-duration="100" data-llp-delay="4500" class="a"/><path d="M260.2 75.3c-1 0-1.8-0.8-1.8-1.8 0-1 0.8-2.8 1.8-2.8s1.8 0.8 1.8 1.8c0 1-0.8 1.8-1.8 1.8" data-llp-id="logo-3" data-llp-duration="600" data-llp-delay="4500" class="a"/><path d="M77.7 134.7c0 0 5 19.7 1.5 48.4 -2.3 20.6-9.9 40.9-15.5 40.9 -12 0 25.3-102 63.7-92 13.3 3.7 14 49.7-29.7 56.7 -8.3 1.3-7.4-6 0-5.7 0 0 13.7-1.3 28.7 7" data-llp-id="logo-4" data-llp-duration="600" data-llp-delay="5100" class="a"/><path d="M126.7 204.3c0 0 16.3-18.7 27.7-24.7s0.3-6-3.7-2.5c-1.7 1.5-7.1 6.2-10.4 11.6 -4.3 7.2-5.6 15.8 2.7 20.5 14.7 8.3 24.3-27.4 25-32.2 -7.3 21.2-9 38.8 7.7 18.5l15.3-27.3c0 0-11.7 34-1 34 8.7 0 22.7-24 26.3-36" data-llp-id="logo-5" data-llp-duration="600" data-llp-delay="5700" class="a"/><path d="M215.9 167.6c0 0-2.9 21-5.9 31 7-15.7 22.3-37 25-32.3 2.7 4.7-15.7 27.7-2.3 30.3 13.3 2.7 32.7-49 34-59.3 -5.3 23.7-17.4 54.1-4.5 55.7 6.9 0.8 18.7-12.7 21-19.2" data-llp-id="logo-6" data-llp-duration="600" data-llp-delay="6600" class="a"/><path d="M191 154.3c0 0 4 2 6-2.3 2-4.3-3-6.7-6-4.7C188 149.3 191 154.3 191 154.3z" data-llp-id="logo-7" data-llp-duration="600" data-llp-delay="7200" class="a"/><path d="M249.1 162c0 0 13.2-0.7 18.2-2 5-1.3 6.7-1 6.7-1" data-llp-id="logo-8" data-llp-duration="300" data-llp-delay="7800" class="a"/><path d="M283.7 175.7c0 0 16.3-4 20.7-13.7 4.3-9.7-8-7.1-13.3-1 -5.3 6-16 24-2 27.5 15.7 5.5 33-23.1 33-36.9 0-5.6-6.4-4.9-6.4 0.8 0 5.5 3.1 4.3 9.8 4.3 6.7 0 11.3 5.3 6.3 10.7s-10.8 12.5-3.3 16.7c8 4.5 12-9 12-9" data-llp-id="logo-9" data-llp-duration="3000" data-llp-delay="7800" class="a"/><path d="M67 35.3c0 0 18-21.3 4-28.7S44.8 15 41.7 48c-3.7 39-27 56.6-33 43.7 -0.9-7.8 8.3-11.3 22.7 1.7 19 16 37.3-13.3 42-19C78 68.7 96.7 57.7 92 54S63.7 79.2 78.3 87.7c6.1 2.9 22-10.7 27-32 0 0-14.7 29.7-7 29.7 11.7 0 27.3-37.7 37.7-36.3 10.3 1.3 15.3 22-10 26.7 9 16.7-7 37.3-14.7 30.3 -7.5-6.8 40-17 57.7-61.7 0 0-15 28.7-4.7 31.7 10.3 3 29.7-30.3 27-34 -2.7-3.7-6.3 1.9-9 16 -2.9 15.1-5 43-23.7 43 -5.3 0 1-7.5 7.2-11.6 7.5-4.9 16.5-8.7 28.2-23.1" data-llp-stroke-color="#f7f2ec" data-llp-id="logo-10" data-llp-duration="3000" data-llp-delay="1000" class="a"/><path d="M245 64.3c0 0 14.7-15.7 6.7-25.3 -8-9.7-27.3-7.7-29.3 17.1 -2 24.9-7.7 67.6-32.3 66.9 -11.3-0.3-4.6-16.1 16.7-1 23 16.3 46.3-18 51.3-36.3 0 0-10.3 33 0 32.7 10.3-0.3 26-38.9 26-38.9s-2.3 27.2-7.3 35.9c8-17 19.3-39.1 27-35.9 7.7 3.2-17.7 28.2-5.7 32.2 0 0 11.7 0.7 21.7-18.3" data-llp-stroke-color="#f7f2ec" data-llp-id="logo-11" data-llp-duration="1500" data-llp-delay="4000" class="a"/><path d="M322.7 93.7c0 0 21.3-5.2 19-17 -2.3-12-34.3 17.9-17 30.7 7 5.2 21.7-3.4 23-10.4" data-llp-stroke-color="#f7f2ec" data-llp-id="logo-12" data-llp-duration="600" data-llp-delay="5500" class="a"/><path d="M263.2 72.3c-1 0-1.8-0.8-1.8-1.8 0-1 0.8-2.8 1.8-2.8s1.8 0.8 1.8 1.8c0 1-0.8 1.8-1.8 1.8" data-llp-id="logo-13" data-llp-stroke-color="#f7f2ec" data-llp-duration="600" data-llp-delay="5500" class="a"/><path d="M80.7 131.7c0 0 3.4 19.7 0 48.5 -2.3 20.6-10.9 39.9-15 39.9 -12 0 26.3-101 64.7-91 13.3 3.7 14 49.7-29.7 56.7 -8.3 1.3-7.4-6 0-5.7 0 0 13.7-1.3 28.7 7" data-llp-id="logo-14" data-llp-stroke-color="#f7f2ec" data-llp-duration="600" data-llp-delay="6100" class="a"/><path d="M129.7 201.3c0 0 16.3-18.7 27.7-24.7s0.3-6-3.7-2.5c-4 3.5-22.4 23.8-7.7 32.2 14.7 8.3 24.3-27.4 25-32.2 -7.3 21.2-9 38.8 7.7 18.5l15.3-27.3c0 0-11.7 34-1 34 8.7 0 22.7-24 26.3-36" data-llp-id="logo-15" data-llp-stroke-color="#f7f2ec" data-llp-duration="600" data-llp-delay="6700" class="a"/><path d="M218.9 164.6c0 0-2.9 21-5.9 31 7-15.7 22.3-37 25-32.3 2.7 4.7-15.7 27.7-2.3 30.3 13.3 2.7 32.7-49 34-59.3 -5.3 23.7-17.4 54.1-4.5 55.7 6.9 0.8 18.8-13 21.2-19.5" data-llp-id="logo-16" data-llp-stroke-color="#f7f2ec" data-llp-duration="600" data-llp-delay="7300" class="a"/><path d="M194 151.3c0 0 4 2 6-2.3 2-4.3-3-6.7-6-4.7C191 146.3 194 151.3 194 151.3z" data-llp-id="logo-17" data-llp-stroke-color="#f7f2ec" data-llp-duration="600" data-llp-delay="7900" class="a"/><path d="M252.1 159c0 0 13.2-0.7 18.2-2 5-1.3 6.7-1 6.7-1" data-llp-id="logo-18" data-llp-duration="300" data-llp-stroke-color="#f7f2ec" data-llp-delay="8500" class="a"/><path d="M286.7 172.7c0 0 16.3-4 20.7-13.7 4.3-9.7-8-7.1-13.3-1 -5.3 6-16 24-2 27.5 15.7 5.5 33-23.1 33-36.9 0-5.6-6.4-4.9-6.4 0.8 0 5.5 3.1 4.3 9.8 4.3 6.7 0 11.3 5.3 6.3 10.7s-10.8 12.5-3.3 16.7c8 4.5 12-9 12-9" data-llp-stroke-color="#f7f2ec" data-llp-id="logo-19" data-llp-duration="600" data-llp-delay="8800" class="a"/><path d="M27 96.5c-1.8-2.1-5.1-5.3-10.1-6.3" data-llp-id="logo-20" data-llp-stroke-width="2.3" data-llp-stroke-color="#b5287b" data-llp-duration="400" data-llp-delay="2000" style="fill:none;stroke-width:2"/><path d="M34.9 89.6c0 0-7.4-5.8-10.1-7.2" data-llp-id="logo-21" data-llp-stroke-color="#cc2e8b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="2400" class="a"/><path d="M71.1 69.2c-1.8 4.2-3.3 11-1 16.8" data-llp-id="logo-22" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="2800" class="a"/><path d="M78.8 76.9c0 0 1.5-13.6 10.2-18.9" data-llp-id="logo-23" data-llp-stroke-color="#cc2e8b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="3200" class="a"/><path d="M93.3 80c-1.1 3.5-1.1 8 1.9 9.7" data-llp-id="logo-24" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="3600" class="a"/><path d="M123 82.2c0 0 5.8 13.8-8.5 21.8" data-llp-id="logo-25" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="4000" class="a"/><path d="M159 62.7c0 0-5.5 8-0.7 15" data-llp-id="logo-26" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="4400" class="a"/><path d="M175.9 70c0 0-0.1 18.8-15.1 27.8" data-llp-id="logo-27" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="4800" class="a"/><path d="M189.5 44.5l-1.5 5.2c-1.3 6.2-3.2 16-3.2 16S184 78.5 181 87.1" data-llp-id="logo-28" data-llp-stroke-color="#cc2e8b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="5200" class="a"/><path d="M189.5 119.8c0 0 3.7-0.2 6.5 1 2.6 1.1 6.5 4.5 6.5 4.5" data-llp-id="logo-29" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="5400" class="a"/><path d="M200.5 112.8c3.4 1.3 8 4.5 10.9 6.3" data-llp-id="logo-30" data-llp-stroke-color="#cc2e8b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="5600" class="a"/><path d="M249.5 102c-0.8 4.2-1.8 10-0.3 14.4" data-llp-id="logo-31" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="5800" class="a"/><path d="M276.1 99.3c0 0-0.8 9.4-5.3 18.3" data-llp-id="logo-32" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="6000" class="a"/><path d="M283.8 92.1c0 0 2.9-7.2 7.5-11.9" data-llp-id="logo-33" data-llp-stroke-color="#cc2e8b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="6200" class="a"/><path d="M315.8 96.5c0 0-0.8 7.3 2.5 11.9" data-llp-id="logo-34" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="6400" class="a"/><path d="M331.2 84.7c0 0-7.7 6-6.5 14.4" data-llp-id="logo-35" data-llp-stroke-color="#cc2e8b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="6600" class="a"/><path d="M74.9 167.6c3.8-6.2 13.2-20.1 14.9-22.3" data-llp-id="logo-36" data-llp-stroke-color="#cc2e8b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="6800" class="a"/><path d="M89.6 162.9c-5.9 8.7-15.5 24.2-22.1 50" data-llp-id="logo-37" data-llp-stroke-color="#cc2e8b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="7000" class="a"/><path d="M115.5 186.7c0 0-6.5-2.6-13.6-2.5" data-llp-id="logo-38" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="7200" class="a"/><path d="M113.9 176.1c0 0 9.5 2.7 12.5 3.9" data-llp-id="logo-39" data-llp-stroke-color="#cc2e8b" data-llp-stroke-width="2.3" data-llp-duration="400" data-llp-delay="7600" class="a"/><path d="M139.2 184.6c-2.8 5.2-4.2 12.7-2.7 18.6" data-llp-id="logo-40" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="300" data-llp-delay="7800" class="a"/><path d="M145.5 196.2c0.8-8 3.9-13.2 10-18.2" data-llp-id="logo-41" data-llp-stroke-color="#cc2e8b" data-llp-stroke-width="2.3" data-llp-duration="300" data-llp-delay="8000" class="a"/><path d="M166.7 206.5c-2-0.4-6.3-3.5-4.7-9" data-llp-id="logo-42" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="300" data-llp-delay="8200" class="a"/><path d="M186 184.1c0 0-3 7.7-1.7 13" data-llp-id="logo-43" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="300" data-llp-delay="8400" class="a"/><path d="M211.1 181c0.4 2.5-0.3 8.2-2.3 12" data-llp-id="logo-44" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="300" data-llp-delay="8500" class="a"/><path d="M219.3 177.2c0 0 7.3-13 11.8-17.2" data-llp-id="logo-45" data-llp-stroke-color="#cc2e8b" data-llp-stroke-width="2.3" data-llp-duration="300" data-llp-delay="8600" class="a"/><path d="M257.3 153.7c4.2-0.1 9.3-1.1 13.5-1.8" data-llp-id="logo-46" data-llp-stroke-color="#cc2e8b" data-llp-stroke-width="2.3" data-llp-duration="300" data-llp-delay="8700" class="a"/><path d="M255.4 174.2c0 0-1.4 11.1 1.3 15.8" data-llp-id="logo-47" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="300" data-llp-delay="8800" class="a"/><path d="M254.5 163.8c0 0 5.2-0.2 12.8-1.2" data-llp-id="logo-48" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="300" data-llp-delay="8900" class="a"/><path d="M281.5 175.2c0 0-1 8.7 2 11" data-llp-id="logo-49" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="300" data-llp-delay="9000" class="a"/><path d="M290.2 178c0 0-0.6-8.2 5.8-14.8" data-llp-id="logo-50" data-llp-stroke-color="#cc2e8b" data-llp-stroke-width="2.3" data-llp-duration="300" data-llp-delay="9100" class="a"/><path d="M318 157.8c0 0 4.1 1.1 9.8 0.8" data-llp-id="logo-51" data-llp-stroke-color="#b5287b" data-llp-stroke-width="2.3" data-llp-duration="300" data-llp-delay="9200" class="a"/><path d="M322 146c0 0 1.1 2.8 8.8 2.8" data-llp-id="logo-52" data-llp-stroke-color="#cc2e8b" data-llp-stroke-width="2.3" data-llp-duration="300" data-llp-delay="9300" class="a"/></svg>
  </div>
</div>

<div id="range-slider" class="range-slider">
		    <input id="input-range" class="input-range" type="range" value="0.5" min="0" max="1" step="0.00001">
		</div>
  <script src='https://cdn.jsdelivr.net/npm/[email protected]/lib/lazy-line-painter-1.9.3.min.js'></script>
      <script>
document.onreadystatechange = () => {

  if (document.readyState === 'complete') {

    let range = document.getElementById('input-range');
    let target = 0.5;
    let position = 0.5;
    let friction = 0.05;

    let el = document.querySelector('#logo');
    let myAnimation = new LazyLinePainter(el, {
      strokeWidth: 7,
      strokeCap: 'round',
      strokeColor: '#b5287b' });


    range.addEventListener("input", function () {
      target = this.value;
    });

    function step() {
      window.requestAnimationFrame(step);
      position += (target - position) * friction;
      myAnimation.set('progress', position);
    }

    window.requestAnimationFrame(step);
  }
};

    </script>
</body>
</html>

8. By Guil H

Made by Guil H. Emoji Range Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.container {
  width: 300px;
  margin: 2rem auto 0;
}
.moji {
  font-size: 8em;
  text-align: center;
}
input {
  width: 100%;
  margin: 0 10px;
}
.slider {
  display: flex;
  justify-content: space-between;
}
span {
  font-weight: bold;
  color: #5fcf80;
}
span:last-child {
  color: tomato;
}
</style>
</head>
<body>
  <div class="container">
  <div class="moji">πŸ˜„</div>
  <div class="slider">
    <span>Yay!</span>
    <input type="range" value="0" min="0" max="10" step="1">
    <span>GTFO!!</span>
  </div>
</div>
      <script>
const range = document.querySelector('input');
const div = document.querySelector('.moji');
const mojis = ['πŸ˜„', 'πŸ™‚', '😐', 'πŸ˜‘', '☹️', '😩', '😠', '😑', '🀒', '😀', 'πŸ’©'];

range.addEventListener('input', e => {
  let rangeValue = e.target.value;
  div.textContent = mojis[rangeValue];
});
    </script>
</body>
</html>

9. By Kunuk Nykjær

Made by Kunuk Nykjær. Music Equalizer UI made with Range Sliders. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  outline: none;
}

*, *:before, *:after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 10px;
  min-height: 400px;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font: 16px sans-serif;
  background: radial-gradient(#B3B1CB, #E1DEFE);
}
@media (min-height: 500px) {
  body {
    align-items: center;
  }
}

.component {
  position: relative;
  color: white;
  background-color: #3D3D4A;
  border-radius: 10px;
  box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.5), 0px -2px 40px rgba(0, 0, 0, 0.3);
  min-width: 280px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 800px) {
  .component {
    flex-direction: row;
  }
}
.component:before, .component:after {
  content: "";
  background-color: transparent;
  position: absolute;
  z-index: -1;
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.3);
  top: 100%;
  bottom: -5px;
  left: 8%;
  right: 8%;
  border-radius: 50%;
}
.component:after {
  box-shadow: 0 25px 20px rgba(0, 0, 0, 0.6);
  left: 12%;
  right: 12%;
}
.component aside {
  position: relative;
  display: block;
  background: #373641;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
@media (min-width: 800px) {
  .component aside {
    border-top-right-radius: 0;
    border-bottom-left-radius: 10px;
    min-width: 140px;
  }
}
.component aside .preamp {
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 800px) {
  .component aside .preamp {
    height: 100px;
  }
}
.component aside .preamp > label {
  color: #DEDFE4;
  text-transform: uppercase;
  display: block;
  font-weight: 700;
}
.component main {
  position: relative;
  display: block;
  padding-bottom: 50px;
}
@media (min-width: 800px) {
  .component main {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.component main .presets {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  padding-left: calc(40px/2 - .5em);
  height: 100px;
  color: #8e8e9b;
  font-weight: 700;
  border-color: #4F4F62;
  background: transparent;
}
@media (min-width: 800px) {
  .component main .presets {
    padding-left: calc(80px/2 - .5em);
    justify-content: flex-start;
  }
}
.component main .presets > label {
  display: inline-block;
  margin-right: 20px;
}
.component main .presets > select {
  -webkit-appearance: none;
  border-radius: 8px;
  border: 2px solid currentColor;
  max-width: 200px;
  padding: 4px;
  color: inherit;
  background: transparent;
  border-color: inherit;
  height: 30px;
  margin-right: 10px;
}
@media (min-width: 800px) {
  .component main .presets > select {
    min-width: 200px;
    padding-left: 10px;
  }
}
.component main .presets > select option {
  background-color: #3D3D4A;
}
.component main .presets > button {
  height: 30px;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  border: 2px solid currentColor;
  border-color: inherit;
  padding: 4px 10px;
  cursor: pointer;
  outline: none;
}
@media (min-width: 800px) {
  .component main .presets > button {
    min-width: 80px;
  }
}
.component main .sliders {
  position: relative;
  display: inline-block;
}
.component main .sliders .range-slider {
  display: inline-block;
  width: 40px;
  position: relative;
  height: 300px;
  float: left;
}
@media (min-width: 800px) {
  .component main .sliders .range-slider {
    width: 80px;
  }
}
.component main .sliders .range-slider::after {
  position: absolute;
  bottom: -24px;
  left: calc(50% - 2em);
  font-size: 80%;
  color: #8e8e9b;
  content: "32";
  width: 4em;
  text-align: center;
}
.component main .sliders .range-slider:nth-child(2)::after {
  content: "32";
}
.component main .sliders .range-slider:nth-child(3)::after {
  content: "64";
}
.component main .sliders .range-slider:nth-child(4)::after {
  content: "128";
}
.component main .sliders .range-slider:nth-child(5)::after {
  content: "256";
}
.component main .sliders .range-slider:nth-child(6)::after {
  content: "512";
}
.component main .sliders .range-slider:nth-child(7)::after {
  content: "1K";
}
.component main .sliders .range-slider:nth-child(8)::after {
  content: "2K";
}
.component main .sliders .range-slider__thumb {
  opacity: 1;
  position: absolute;
  left: 10px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-color: white;
  color: #8376FF;
  text-align: center;
  font-size: 40%;
  box-shadow: 0 0 2px #373641;
  border-radius: 50%;
  pointer-events: none;
  cursor: pointer;
  z-index: 2;
}
@media (min-width: 800px) {
  .component main .sliders .range-slider__thumb {
    left: 30px;
  }
}
.component main .sliders .range-slider__bar {
  left: 18px;
  bottom: 0;
  position: absolute;
  background: linear-gradient(#9791B8, #8376FF);
  pointer-events: none;
  width: 4px;
  border-radius: 10px;
  opacity: 1;
}
@media (min-width: 800px) {
  .component main .sliders .range-slider__bar {
    left: 38px;
  }
}
.component main .sliders .range-slider input[type=range][orient=vertical] {
  position: relative;
  margin: 0;
  height: 100%;
  width: 100%;
  display: inline-block;
  position: relative;
  -ms-writing-mode: bt-lr;
      writing-mode: bt-lr;
  -webkit-appearance: slider-vertical;
}
.component main .sliders .range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track, .component main .sliders .range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
  -webkit-appearance: none;
}
.component main .sliders .range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track {
  border: none;
  background: #343440;
  width: 4px;
  border-color: #343440;
  border-radius: 10px;
  box-shadow: 0 0 0 2px #3D3D4A;
}
.component main .sliders .range-slider input[type=range][orient=vertical]::-moz-range-track {
  border: none;
  background: #343440;
  width: 4px;
  border-color: #343440;
  border-radius: 10px;
  box-shadow: 0 0 0 2px #3D3D4A;
}
.component main .sliders .range-slider input[type=range][orient=vertical]::-ms-track {
  border: none;
  background: #343440;
  width: 4px;
  border-color: #343440;
  border-radius: 10px;
  box-shadow: 0 0 0 2px #3D3D4A;
  color: transparent;
  height: 100%;
}
.component main .sliders .range-slider input[type=range][orient=vertical]::-ms-fill-lower, .component main .sliders .range-slider input[type=range][orient=vertical]::-ms-fill-upper, .component main .sliders .range-slider input[type=range][orient=vertical]::-ms-tooltip {
  display: none;
}
.component main .sliders .range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
  left: -20px;
  position: relative;
  width: 40px;
  height: 40px;
  opacity: 0;
}
.component main .sliders .range-slider input[type=range][orient=vertical]::-moz-range-thumb {
  position: relative;
  width: 40px;
  height: 40px;
  opacity: 0;
}
.component main .sliders .range-slider input[type=range][orient=vertical]::-ms-thumb {
  position: relative;
  width: 40px;
  height: 40px;
  opacity: 0;
}
.component main .sliders svg {
  z-index: 1;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 1;
}
.component main .sliders svg .line {
  stroke: #F7ED7D;
}
.component main .sliders svg .line-shadow {
  z-index: 1;
  stroke-width: 2;
  stroke: #252525;
  opacity: 0.35;
  display: none;
}
@media (min-width: 800px) {
  .component main .sliders svg .line-shadow {
    display: block;
  }
}

.design-reference {
  position: fixed;
  bottom: 6px;
  right: 6px;
  color: #8e8e9b;
  font-size: 70%;
  display: none;
}
@media (min-height: 600px) {
  .design-reference {
    display: block;
  }
}
</style>
</head>
<body>
  <a class="design-reference" href="//100daysui.com/#cbp=ajax/shot-90" target="_blank">100 Days UI Challenge - Day 90</a>

<div class="component">

  <aside>
    <div class="preamp">
      <label>preamp</label>
    </div>
  </aside>

  <main>
    <div class="presets">
      <label>Presets:</label>
      <select name="Custom" onchange="app.selectPreset(this)">
        <option value="custom">Custom</option>
        <option value="rock">Rock</option>
        <option value="pop">Pop</option>
        <option value="pop">Classical</option>
        <option value="pop">Disco</option>
      </select>
      <button class="reset" onclick="app.reset()">Reset</button>
    </div>

    <div class="sliders">
      
      <svg preserveAspectRatio="none" viewBox="0 0 140 100">
        <path d="" class="line-shadow"></path>
        <path d="" class="line"></path>        
      </svg>

      <div class="range-slider">
        <input type="range" orient="vertical" min="0" max="100" />
        <div class="range-slider__bar"></div>
        <div class="range-slider__thumb"></div>
      </div>

      <div class="range-slider">
        <input type="range" orient="vertical" min="0" max="100" />
        <div class="range-slider__bar"></div>
        <div class="range-slider__thumb"></div>
      </div>

      <div class="range-slider">
        <input type="range" orient="vertical" min="0" max="100" />
        <div class="range-slider__bar"></div>
        <div class="range-slider__thumb"></div>
      </div>

      <div class="range-slider">
        <input type="range" orient="vertical" min="0" max="100" />
        <div class="range-slider__bar"></div>
        <div class="range-slider__thumb"></div>
      </div>

      <div class="range-slider">
        <input type="range" orient="vertical" min="0" max="100" />
        <div class="range-slider__bar"></div>
        <div class="range-slider__thumb"></div>
      </div>

      <div class="range-slider">
        <input type="range" orient="vertical" min="0" max="100" />
        <div class="range-slider__bar"></div>
        <div class="range-slider__thumb"></div>
      </div>

      <div class="range-slider">
        <input type="range" orient="vertical" min="0" max="100" />
        <div class="range-slider__bar"></div>
        <div class="range-slider__thumb"></div>
      </div>

    </div>
  </main>    
</div>
      <script>
// String formatter
if (!String.prototype.format) {
  String.prototype.format = function () {
    var args = arguments;
    return this.replace(/{(\d+)}/g, function (match, number) {
      return typeof args[number] != 'undefined' ? args[number] : match;
    });
  };
}

let app = (() => {

  const $svgLine = document.querySelector('svg .line');
  const $svgLineShadow = document.querySelector('svg .line-shadow');
  const sliderThumbSize = 20;
  const sliderHeight = 300;
  const svgViewBoxHeight = 100;
  const svgViewBoxThumbLimit = sliderThumbSize / 2 * (svgViewBoxHeight / sliderHeight);
  const svgViewBoxGraphMax = svgViewBoxHeight - svgViewBoxThumbLimit;
  const svgViewBoxGraphMin = svgViewBoxThumbLimit;

  let ranges = {
    range1: null,
    range2: null,
    range3: null,
    range4: null,
    range5: null,
    range6: null,
    range7: null };

  // Only the y values changes
  let points = {
    begin: {
      x: 10,
      y: 0 },

    point1: {
      x: 10,
      y: 0 },

    control1: {
      x: 20,
      y: 10 },

    control2: {
      x: 20,
      y: 0 },

    point2: {
      x: 30,
      y: 0 },

    control3: {
      x: 40,
      y: 0 },

    point3: {
      x: 50,
      y: 0 },

    control4: {
      x: 60,
      y: 0 },

    point4: {
      x: 70,
      y: 0 },

    control5: {
      x: 80,
      y: 0 },

    point5: {
      x: 90,
      y: 0 },

    control6: {
      x: 100,
      y: 0 },

    point6: {
      x: 110,
      y: 0 },

    control7: {
      x: 120,
      y: 0 },

    point7: {
      x: 130,
      y: 0 } };



  function mapDataRange(value) {
    // stackoverflow.com/a/929107/5707008
    // return (((OldValue - OldMin) * (NewMax - NewMin)) / (OldMax - OldMin)) + NewMin
    return (value - 0) * (svgViewBoxGraphMax - svgViewBoxGraphMin) / (svgViewBoxHeight - 0) + svgViewBoxGraphMin;
  }

  function updateSlider($element) {
    if ($element) {

      let rangeIndex = $element.getAttribute('data-slider-index'),
      range = ranges[rangeIndex],
      value = $element.value;

      if (range === value) {
        return; // No value change, no need to update then
      }
      // Update state
      ranges[rangeIndex] = value;

      let parent = $element.parentElement,
      $thumb = parent.querySelector('.range-slider__thumb'),
      $bar = parent.querySelector('.range-slider__bar'),
      pct = value * ((sliderHeight - sliderThumbSize) / sliderHeight);

      $thumb.style.bottom = `${pct}%`;
      $bar.style.height = `calc(${pct}% + ${sliderThumbSize / 2}px)`;
      //$thumb.textContent = `${value}%`;

      renderSliderGraph();
    }
  }

  function updatePoints() {
    // Convert from percentage to coordinate values    
    // Calculate and floor the values
    points.point1.y = svgViewBoxHeight - svgViewBoxHeight * ranges.range1 / 100 | 0;
    points.point2.y = svgViewBoxHeight - svgViewBoxHeight * ranges.range2 / 100 | 0;
    points.point3.y = svgViewBoxHeight - svgViewBoxHeight * ranges.range3 / 100 | 0;
    points.point4.y = svgViewBoxHeight - svgViewBoxHeight * ranges.range4 / 100 | 0;
    points.point5.y = svgViewBoxHeight - svgViewBoxHeight * ranges.range5 / 100 | 0;
    points.point6.y = svgViewBoxHeight - svgViewBoxHeight * ranges.range6 / 100 | 0;
    points.point7.y = svgViewBoxHeight - svgViewBoxHeight * ranges.range7 / 100 | 0;

    const max = svgViewBoxGraphMax;
    const min = svgViewBoxGraphMin;

    points.point1.y = mapDataRange(points.point1.y);
    points.point2.y = mapDataRange(points.point2.y);
    points.point3.y = mapDataRange(points.point3.y);
    points.point4.y = mapDataRange(points.point4.y);
    points.point5.y = mapDataRange(points.point5.y);
    points.point6.y = mapDataRange(points.point6.y);
    points.point7.y = mapDataRange(points.point7.y);

    // Update Y for the other points
    points.begin.y = points.point1.y;
    points.control1.y = points.point1.y;
    points.control2.y = points.point2.y;
    points.control3.y = points.point3.y;
    points.control4.y = points.point4.y;
    points.control5.y = points.point5.y;
    points.control6.y = points.point6.y;
    points.control7.y = points.point7.y;
  }

  function getInterpolatedLine(type) {

    let shadowOffset = 0;
    if (type === 'shadow') {
      shadowOffset = 10; // simple simulation, no fancy shadow algorithm
    }

    return 'M {0},{1} L {2},{3} C {4},{5} {6},{7} {8},{9} S {10} {11}, {12} {13} S {14} {15}, {16} {17} S {18} {19}, {20} {21} S {22} {23}, {24} {25} S {26} {27}, {28} {29}'.format(
    // M
    points.begin.x, points.begin.y,
    // L
    points.point1.x, points.point1.y,
    // C
    points.control1.x, points.control1.y,
    points.control2.x, points.control2.y + shadowOffset,
    points.point2.x, points.point2.y + shadowOffset,
    // S
    points.control3.x, points.control3.y,
    points.point3.x, points.point3.y,
    // S
    points.control4.x, points.control4.y + shadowOffset,
    points.point4.x, points.point4.y + shadowOffset,
    // S
    points.control5.x, points.control5.y,
    points.point5.x, points.point5.y,
    // S
    points.control6.x, points.control6.y + shadowOffset,
    points.point6.x, points.point6.y + shadowOffset,
    // S
    points.control7.x, points.control7.y,
    points.point7.x, points.point7.y);

  }

  function reset() {
    const inputs = app.inputs;
    inputs.forEach(input => input.value = 50);
    inputs.forEach(input => app.updateSlider(input));
  }

  function renderSliderGraph() {
    updatePoints();
    $svgLine.setAttribute('d', getInterpolatedLine());
    $svgLineShadow.setAttribute('d', getInterpolatedLine('shadow'));
  }

  function selectPreset(type) {
    // Generate random graph
    const inputs = app.inputs;
    inputs.forEach(input => input.value = Math.random() * 100 | 0);
    inputs.forEach(input => app.updateSlider(input));
  }

  return {
    inputs: [].slice.call(document.querySelectorAll('.sliders input')),
    updateSlider,
    reset,
    selectPreset };


})();

(function initAndSetupTheSliders() {
  const inputs = app.inputs;
  let index = 1;
  inputs.forEach(input => input.setAttribute('data-slider-index', 'range' + index++));
  inputs.forEach(input => input.value = 50);
  inputs.forEach(input => app.updateSlider(input));
  // Cross-browser support where value changes instantly as you drag the handle, therefore two event types.
  inputs.forEach(input => input.addEventListener('input', element => app.updateSlider(input)));
  inputs.forEach(input => input.addEventListener('change', element => app.updateSlider(input)));
  app.selectPreset('custom');
})();
    </script>
</body>
</html>

10. By Gabriel Tomescu

Made by Gabriel Tomescu. Color Range Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
  
<style>
.ui-slider .ui-slider-range, .ui-slider .slider-range-inverse, .ui-slider {
  height: 14px;
  border-radius: 10px;
  border-width: 0;
}

body {
  background: #F0F0F0;
  font-family: Helvetica, Arial;
}

h1 {
  text-align: center;
  color: #444;
  margin-top: 50px;
}

#slider-container {
  width: 80%;
  height: 80px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  top: 50%;
  margin: 0 auto;
  text-align: center;
  background: #FFF;
  border-radius: 5px;
  padding: 35px 40px 30px 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.ui-slider {
  background-color: #1ABC9C;
  background-image: -webkit-linear-gradient(left, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
  background-image: linear-gradient(to right,#1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
}
.ui-slider * {
  outline: none;
}
.ui-slider .slider-range-inverse {
  background: #CCC;
  position: absolute;
  right: 0;
}
.ui-slider .ui-slider-range {
  background: transparent;
}
.ui-slider .ui-slider-handle {
  width: 28px;
  height: 28px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  background: #FFF;
  top: -7px;
  border-radius: 50%;
  border-width: 0;
}
.ui-slider .ui-slider-handle:active {
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.5);
}
.ui-slider .ui-slider-handle .dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  left: 5px;
  background: transparent;
  overflow: hidden;
}
.ui-slider .ui-slider-handle .dot .handle-track {
  display: block;
  height: 18px;
  background-color: #1ABC9C;
  background-image: -webkit-linear-gradient(left, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
  background-image: linear-gradient(to right,#1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
  position: absolute;
  padding-right: 18px;
}
</style>
</head>
<body>
  <h1>Text</h1>

<div id="slider-container">
  <div id="js-slider"></div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
      <script>
(function() {
  // Helper function
  var update_handle_track_pos;

  update_handle_track_pos = function(slider, ui_handle_pos) {
    var handle_track_xoffset, slider_range_inverse_width;
    handle_track_xoffset = -((ui_handle_pos / 100) * slider.clientWidth);
    $(slider).find(".handle-track").css("left", handle_track_xoffset);
    slider_range_inverse_width = (100 - ui_handle_pos) + "%";
    return $(slider).find(".slider-range-inverse").css("width", slider_range_inverse_width);
  };

  // Init slider
  $("#js-slider").slider({
    range: "min",
    max: 100,
    value: 50,
    create: function(event, ui) {
      var slider;
      slider = $(event.target);
      
      // Append the slider handle with a center dot and it's own track
      slider.find('.ui-slider-handle').append('<span class="dot"><span class="handle-track"></span></span>');
      
      // Append the slider with an inverse range
      slider.prepend('<div class="slider-range-inverse"></div>');
      
      // Set initial dimensions
      slider.find(".handle-track").css("width", event.target.clientWidth);
      
      // Set initial position for tracks
      return update_handle_track_pos(event.target, $(this).slider("value"));
    },
    slide: function(event, ui) {
      // Update position of tracks
      return update_handle_track_pos(event.target, ui.value);
    }
  });

}).call(this);
    </script>
</body>
</html>

11. By phil

Made by phil. Basic JavaScript Rolling Penguin Range Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
html,
body {
  margin: 0;
  height: 100%;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #a9cbee;
}
input[type="range"] {
  -webkit-appearance: none;
  background: transparent;
  width: 90%;
  max-width: 500px;
  outline: none;
}
input[type="range"]:focus,
input[type="range"]:active,
input[type="range"]::-moz-focus-inner,
input[type="range"]::-moz-focus-outer {
  border: 0;
  outline: none;
}
input[type="range"]::-moz-range-thumb {
  border: none;
  height: 50px;
  width: 50px;
  background-color: transparent;
  background-image: url("https://storage.googleapis.com/pw-stuff/thumbs-sprite.png");
  background-position: 0 0;
  background-size: cover;
  transform: scale(1.9) rotateZ(var(--thumb-rotate, 10deg));
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb:active {
  background-position: 100% 0px;
  transform: scale(2) rotateZ(var(--thumb-rotate, 10deg));
}
input[type="range"]::-moz-range-track {
  width: 100%;
  height: 20px;
  background: #eee;
  border-radius: 10px;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
  cursor: pointer;
}
input[type="range"]::-moz-range-progress {
  height: 20px;
  background: #4685d7;
  border-radius: 10px;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  border: none;
  height: 50px;
  width: 50px;
  background-color: transparent;
  background-image: url("https://storage.googleapis.com/pw-stuff/thumbs-sprite.png");
  background-position: 0 0;
  background-size: cover;
  transform: scale(1.9) rotateZ(var(--thumb-rotate, 10deg));
  cursor: pointer;
  margin-top: -15px;
  -webkit-appearance: none;
}
input[type="range"]::-webkit-slider-thumb:active {
  background-position: 100% 0px;
  transform: scale(2) rotateZ(var(--thumb-rotate, 10deg));
}
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 20px;
  background: #eee;
  border-radius: 10px;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
  cursor: pointer;
  -webkit-appearance: none;
}
label {
  background: #eee;
  border-radius: 50%;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
  padding: 14px;
  margin-left: 10px;
  font-family: Roboto, 'Helvetica Neue', Arial;
  font-size: 20px;
  width: 25px;
  text-align: center;
  color: #2968bb;
  font-weight: bold;
  content: '';
}
.twitter-link {
  position: absolute;
  bottom: 4px;
  margin: auto;
  font-family: sans-serif;
  font-size: 12px;
  color: rgba(0,0,0,0.6);
}
</style>
</head>
<body>
  <input id="slider" name="slider" type="range" value=0>
<label for="slider">0</label>
<a class="twitter-link" href="https://twitter.com/phil_osophie" target="_blank" >by @phil_osophie</a>
      <script>
const input = document.querySelector("input");
const label = document.querySelector("label");

input.addEventListener("input", event => {
  const value = Number(input.value) / 100;
  input.style.setProperty("--thumb-rotate", `${value * 720}deg`);
  label.innerHTML = Math.round(value * 50);
});
    </script>
</body>
</html>

12. By AndrΓ© Ruffert

Made by AndrΓ© Ruffert. Range Slider with Feedback. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
html,
body {
  font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
  color: #404040;
  height: 100%;
  margin: 0;
}

body {
  padding: 0 20px;
  color: #716894;
}

.main {
  width: 400px;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

label {
  display: block;
  margin-bottom: 2.5em;
  font-size: 13px;
  font-weight: bold;
}

.rangeslider__tooltip {
  display: block;
  margin-top: 2.5em;
  font-size: 12px;
  color: #a59eb5;
}

.rangeslider,
input[type=range] {
  max-width: 400px;
}

.rangeslider__handle {
  border-radius: 22px;
  line-height: 42px;
  text-align: center;
  font-weight: bold;
}
.rangeslider__handle:after {
  background: 0;
}

.rangeslider,
.rangeslider__fill {
  display: block;
  border-radius: 10px;
}

.rangeslider {
  background: #e6e5ea;
  background-image: linear-gradient(to right, #4bc67d 30%, #f1c40f 45%, #b94a48 99%);
  position: relative;
}

.rangeslider--horizontal {
  height: 10px;
  width: 100%;
}

.rangeslider--vertical {
  width: 20px;
  min-height: 150px;
  max-height: 100%;
}

.rangeslider--disabled {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  opacity: 0.4;
}

.rangeslider__fill {
  position: absolute;
}

.rangeslider--horizontal .rangeslider__fill {
  top: 0;
  height: 100%;
}

.rangeslider--vertical .rangeslider__fill {
  bottom: 0;
  width: 100%;
}

.rangeslider__handle {
  background: white;
  border: 6px solid #4bc67d;
  cursor: pointer;
  display: inline-block;
  width: 40px;
  height: 40px;
  position: absolute;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.rangeslider__handle.js-low {
  border-color: #4bc67d;
}
.rangeslider__handle.js-med {
  border-color: #f1c40f;
}
.rangeslider__handle.js-high {
  border-color: #b94a48;
}

.rangeslider__handle:after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.rangeslider--horizontal .rangeslider__handle {
  top: -20px;
  touch-action: pan-y;
  -ms-touch-action: pan-y;
}

.rangeslider--vertical .rangeslider__handle {
  left: -10px;
  touch-action: pan-x;
  -ms-touch-action: pan-x;
}

input[type=range]:focus + .rangeslider .rangeslider__handle {
  -moz-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
  -webkit-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
  box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
}
</style>
</head>
<body>
<div class="main">
  <label for="panel_size">Panel Size</label>
  <input
      type="range"
      name="participants"
      min="5"
      max="51"
      value="20"
  >
  <span class="rangeslider__tooltip" id ="range-tooltip"></span>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://andreruffert.github.io/rangeslider.js/assets/rangeslider.js/dist/rangeslider.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script>
      <script>
const $element = $('input[type="range"]');
const $tooltip = $('#range-tooltip');
const sliderStates = [
{ name: "low", tooltip: "Great, we're confident we can complete your project within <strong>24 hours</strong> of launch.", range: _.range(5, 26) },
{ name: "med", tooltip: "Looks good! We can complete a project of this size within <strong>48 hours</strong> of launch.", range: _.range(26, 51) },
{ name: "high", tooltip: "With a project of this size we'd like to talk with you before setting a completion timeline.", range: [51] }];

var currentState;
var $handle;

$element.
rangeslider({
  polyfill: false,
  onInit: function () {
    $handle = $('.rangeslider__handle', this.$range);
    updateHandle($handle[0], this.value);
    updateState($handle[0], this.value);
  } }).

on('input', function () {
  updateHandle($handle[0], this.value);
  checkState($handle[0], this.value);
});

// Update the value inside the slider handle
function updateHandle(el, val) {
  el.textContent = val;
}

// Check if the slider state has changed
function checkState(el, val) {
  // if the value does not fall in the range of the current state, update that shit.
  if (!_.contains(currentState.range, parseInt(val))) {
    updateState(el, val);
  }
}

// Change the state of the slider
function updateState(el, val) {
  for (var j = 0; j < sliderStates.length; j++) {if (window.CP.shouldStopExecution(0)) break;
    if (_.contains(sliderStates[j].range, parseInt(val))) {
      currentState = sliderStates[j];
      // updateSlider();
    }
  }
  // If the state is high, update the handle count to read 50+
  window.CP.exitedLoop(0);if (currentState.name == "high") {
    updateHandle($handle[0], "50+");
  }
  // Update handle color
  $handle.
  removeClass(function (index, css) {
    return (css.match(/(^|\s)js-\S+/g) || []).join(' ');
  }).
  addClass("js-" + currentState.name);
  // Update tooltip
  $tooltip.html(currentState.tooltip);
}
    </script>
</body>
</html>

13. By MinzCode

Made by MinzCode. Multi Handle Range Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
	margin: 0;
	padding: 0;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #e5e5e5;
}

.middle {
	position: relative;
	width: 50%;
	max-width: 500px;
}

.slider {
	position: relative;
	z-index: 1;
	height: 10px;
	margin: 0 15px;
}
.slider > .track {
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	border-radius: 5px;
	background-color: #c6aee7;
}
.slider > .range {
	position: absolute;
	z-index: 2;
	left: 25%;
	right: 25%;
	top: 0;
	bottom: 0;
	border-radius: 5px;
	background-color: #6200ee;
}
.slider > .thumb {
	position: absolute;
	z-index: 3;
	width: 30px;
	height: 30px;
	background-color: #6200ee;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(98,0,238,.1);
	transition: box-shadow .3s ease-in-out;
}
.slider > .thumb.left {
	left: 25%;
	transform: translate(-15px, -10px);
}
.slider > .thumb.right {
	right: 25%;
	transform: translate(15px, -10px);
}
.slider > .thumb.hover {
	box-shadow: 0 0 0 20px rgba(98,0,238,.1);
}
.slider > .thumb.active {
	box-shadow: 0 0 0 40px rgba(98,0,238,.2);
}

input[type=range] {
	position: absolute;
	pointer-events: none;
	-webkit-appearance: none;
	z-index: 2;
	height: 10px;
	width: 100%;
	opacity: 0;
}
input[type=range]::-webkit-slider-thumb {
	pointer-events: all;
	width: 30px;
	height: 30px;
	border-radius: 0;
	border: 0 none;
	background-color: red;
	-webkit-appearance: none;
}


.youtube-link {
	position: fixed;
	left: 20px;
	bottom: 20px;
	color: #000;
	text-decoration: none;
	font-size: 12px;
}
</style>
</head>
<body>
  <div class="middle">
	<div class="multi-range-slider">
		<input type="range" id="input-left" min="0" max="100" value="25">
		<input type="range" id="input-right" min="0" max="100" value="75">

		<div class="slider">
			<div class="track"></div>
			<div class="range"></div>
			<div class="thumb left"></div>
			<div class="thumb right"></div>
		</div>
	</div>
</div>
      <script>
var inputLeft = document.getElementById("input-left");
var inputRight = document.getElementById("input-right");

var thumbLeft = document.querySelector(".slider > .thumb.left");
var thumbRight = document.querySelector(".slider > .thumb.right");
var range = document.querySelector(".slider > .range");

function setLeftValue() {
  var _this = inputLeft,
  min = parseInt(_this.min),
  max = parseInt(_this.max);

  _this.value = Math.min(parseInt(_this.value), parseInt(inputRight.value) - 1);

  var percent = (_this.value - min) / (max - min) * 100;

  thumbLeft.style.left = percent + "%";
  range.style.left = percent + "%";
}
setLeftValue();

function setRightValue() {
  var _this = inputRight,
  min = parseInt(_this.min),
  max = parseInt(_this.max);

  _this.value = Math.max(parseInt(_this.value), parseInt(inputLeft.value) + 1);

  var percent = (_this.value - min) / (max - min) * 100;

  thumbRight.style.right = 100 - percent + "%";
  range.style.right = 100 - percent + "%";
}
setRightValue();

inputLeft.addEventListener("input", setLeftValue);
inputRight.addEventListener("input", setRightValue);

inputLeft.addEventListener("mouseover", function () {
  thumbLeft.classList.add("hover");
});
inputLeft.addEventListener("mouseout", function () {
  thumbLeft.classList.remove("hover");
});
inputLeft.addEventListener("mousedown", function () {
  thumbLeft.classList.add("active");
});
inputLeft.addEventListener("mouseup", function () {
  thumbLeft.classList.remove("active");
});

inputRight.addEventListener("mouseover", function () {
  thumbRight.classList.add("hover");
});
inputRight.addEventListener("mouseout", function () {
  thumbRight.classList.remove("hover");
});
inputRight.addEventListener("mousedown", function () {
  thumbRight.classList.add("active");
});
inputRight.addEventListener("mouseup", function () {
  thumbRight.classList.remove("active");
});
    </script>
</body>
</html>