7+ CSS Range Slider Examples

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

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

Related Posts

CSS Range Slider Examples

1. By S. Shahriar

Made by S. Shahriar. Range Slider Progress with pure CSS. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
html,
body {
	height: 100%;
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	display: grid;
	place-items: center;
}

main {
	display: flex;
	flex-direction: column;
	gap: 2.2em;
	padding: 1em 0;
}

html::before {
	content: "";
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background: radial-gradient(circle at center, #fff, #fafafa);
	display: block;
}

/* === range theme and appearance === */
input[type="range"] {
	font-size: 1.5rem;
	width: 12.5em;
}

input[type="range"] {
	color: #ef233c;
	--thumb-height: 1.125em;
	--track-height: 0.125em;
	--track-color: rgba(0, 0, 0, 0.2);
	--brightness-hover: 180%;
	--brightness-down: 80%;
	--clip-edges: 0.125em;
}

input[type="range"].win10-thumb {
	color: #2b2d42;

	--thumb-height: 1.375em;
	--thumb-width: 0.5em;
	--clip-edges: 0.0125em;
}

@media (prefers-color-scheme: dark) {
	html {
		background-color: #000;
	}

	html::before {
		background: radial-gradient(circle at center, #101112, #000);
	}

	input[type="range"] {
		color: #f07167;
		--track-color: rgba(255, 255, 255, 0.1);
	}

	input[type="range"].win10-thumb {
		color: #3a86ff;
	}
}

/* === range commons === */
input[type="range"] {
	position: relative;
	background: #fff0;
	overflow: hidden;
}

input[type="range"]:active {
	cursor: -webkit-grabbing;
	cursor: grabbing;
}

input[type="range"]:disabled {
	filter: grayscale(1);
	opacity: 0.3;
	cursor: not-allowed;
}

/* === WebKit specific styles === */
input[type="range"],
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	-webkit-transition: all ease 100ms;
	transition: all ease 100ms;
	height: var(--thumb-height);
}

input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
	position: relative;
}

input[type="range"]::-webkit-slider-thumb {
	--thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
	--clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
	--clip-bottom: calc(var(--thumb-height) - var(--clip-top));
	--clip-further: calc(100% + 1px);
	--box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0
		100vmax currentColor;

	width: var(--thumb-width, var(--thumb-height));
	background: linear-gradient(currentColor 0 0) scroll no-repeat left center /
		50% calc(var(--track-height) + 1px);
	background-color: currentColor;
	box-shadow: var(--box-fill);
	border-radius: var(--thumb-width, var(--thumb-height));

	filter: brightness(100%);
	-webkit-clip-path: polygon(
		100% -1px,
		var(--clip-edges) -1px,
		0 var(--clip-top),
		-100vmax var(--clip-top),
		-100vmax var(--clip-bottom),
		0 var(--clip-bottom),
		var(--clip-edges) 100%,
		var(--clip-further) var(--clip-further)
	);
	        clip-path: polygon(
		100% -1px,
		var(--clip-edges) -1px,
		0 var(--clip-top),
		-100vmax var(--clip-top),
		-100vmax var(--clip-bottom),
		0 var(--clip-bottom),
		var(--clip-edges) 100%,
		var(--clip-further) var(--clip-further)
	);
}

input[type="range"]:hover::-webkit-slider-thumb {
	filter: brightness(var(--brightness-hover));
	cursor: -webkit-grab;
	cursor: grab;
}

input[type="range"]:active::-webkit-slider-thumb {
	filter: brightness(var(--brightness-down));
	cursor: -webkit-grabbing;
	cursor: grabbing;
}

input[type="range"]::-webkit-slider-runnable-track {
	background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center /
		100% calc(var(--track-height) + 1px);
}

input[type="range"]:disabled::-webkit-slider-thumb {
	cursor: not-allowed;
}

/* === Firefox specific styles === */
input[type="range"],
input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-thumb {
	-moz-appearance: none;
	     appearance: none;
	-moz-transition: all ease 100ms;
	transition: all ease 100ms;
	height: var(--thumb-height);
}

input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-thumb,
input[type="range"]::-moz-range-progress {
	background: #fff0;
}

input[type="range"]::-moz-range-thumb {
	background: currentColor;
	border: 0;
	width: var(--thumb-width, var(--thumb-height));
	border-radius: var(--thumb-width, var(--thumb-height));
	cursor: grab;
}

input[type="range"]:active::-moz-range-thumb {
	cursor: grabbing;
}

input[type="range"]::-moz-range-track {
	width: 100%;
	background: var(--track-color);
}

input[type="range"]::-moz-range-progress {
	-moz-appearance: none;
	     appearance: none;
	background: currentColor;
	transition-delay: 30ms;
}

input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-progress {
	height: calc(var(--track-height) + 1px);
	border-radius: var(--track-height);
}

input[type="range"]::-moz-range-thumb,
input[type="range"]::-moz-range-progress {
	filter: brightness(100%);
}

input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:hover::-moz-range-progress {
	filter: brightness(var(--brightness-hover));
}

input[type="range"]:active::-moz-range-thumb,
input[type="range"]:active::-moz-range-progress {
	filter: brightness(var(--brightness-down));
}

input[type="range"]:disabled::-moz-range-thumb {
	cursor: not-allowed;
}
</style>
</head>
<body>
  <main>
	<input type="range" class="win10-thumb" />
	<input type="range" class="win10-thumb" min="0" max="100" value="25" step="5" />
	<input type="range" class="win10-thumb" disabled value="64" />
	<input type="range" />
	<input type="range" min="0" max="100" value="40" step="5" />
	<input type="range" disabled value="80" />
</main>
</body>
</html>

2. By Matthias Martin

Made by Matthias Martin. Simple 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>
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  background: #506172;
  color: #fff;
  font-family: "Open Sans", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.center {
  box-sizing: border-box;
  position: absolute;
  width: 300px;
  height: 40px;
  top: 180px;
  left: 50px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.3);
  padding: 5px 15px;
}

[type=range] {
  -webkit-appearance: none;
  margin: 0;
  width: 270px;
  height: 30px;
}
[type=range]:focus {
  outline: none;
}
[type=range]::-moz-focus-outer {
  border: 0;
}
[type=range]::-webkit-slider-runnable-track {
  width: 270px;
  height: 4px;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  background: #7AD175;
  border: none;
  border-radius: 2px;
  box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.2);
}
[type=range]::-webkit-slider-thumb {
  border: 2px solid #7AD175;
  height: 24px;
  width: 24px;
  border-radius: 24px;
  background: #fff url(https://100dayscss.com/codepen/slider-thumb.png) center center no-repeat;
  background-size: 50% 50%;
  cursor: pointer;
  box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.1);
  -webkit-appearance: none;
  margin-top: -10px;
}
[type=range]::-moz-range-track {
  width: 270px;
  height: 4px;
  cursor: pointer;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease;
  background: #7AD175;
  border: none;
  border-radius: 2px;
  box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.2);
}
[type=range]::-moz-range-thumb {
  border: 2px solid #7AD175;
  height: 24px;
  width: 24px;
  border-radius: 24px;
  background: #fff url(https://100dayscss.com/codepen/slider-thumb.png) center center no-repeat;
  background-size: 50% 50%;
  cursor: pointer;
  box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.1);
}
[type=range]::-ms-track {
  width: 270px;
  height: 4px;
  cursor: pointer;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
  background: transparent;
  border-color: none;
  color: transparent;
}
[type=range]::-ms-fill-lower, [type=range]::-ms-fill-upper {
  background: #7AD175;
  border: none;
  border-radius: 2px;
}
[type=range]::-ms-thumb {
  border: 2px solid #7AD175;
  height: 24px;
  width: 24px;
  border-radius: 24px;
  background: #fff url(https://100dayscss.com/codepen/slider-thumb.png) center center no-repeat;
  background-size: 50% 50%;
  cursor: pointer;
  box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
  <div class="frame">
  <div class="center">
    <input type="range" min="0" max="100" />
  </div>
</div>
</body>
</html>

3. By Adam Kuhn

Made by Adam Kuhn. Emoji 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>
* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  overflow: hidden;
  --number: "0";
  --smile: url("data:image/svg+xml,%3Csvg width='300' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 150 250 150 270 150 '%3E%3C/path%3E%3C/svg%3E")
    50% 50% / 40px 40px no-repeat;
  background: #6500ff;
}

#slider-wrap {
  opacity: 0;
  min-height: 20px;
  max-height: 20px;
  min-width: 20px;
  max-width: 585px;
  z-index: 10;
  width: 20px;
  resize: horizontal;
  overflow: hidden;
  position: absolute;
  cursor: ew-resize;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% - 145px), -50%);
  contain: layout size style;
  --css-contain: layout size style;
}
#slider-wrap:active ~ .number:after {
  transform: rotateX(80deg) scale(1);
}
#slider-wrap:active ~ .number .face {
  transform: translate(0, -10px) scale(1);
}
#slider-wrap:active ~ .number .face:after {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

.number {
  width: 300px;
  height: 10px;
  left: calc(50% - 150px);
  position: absolute;
  top: calc(50% - 5px);
  background: #ccc;
  border-radius: 50px;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px #6500ff, inset 0 0 5px -2.5px rgba(0, 0, 0, 0.5);
  transform-style: preserve-3d;
  overflow: visible;
}
.number .face {
  width: 75px;
  height: 75px;
  top: -100px;
  left: -27.5px;
  z-index: 2;
  transform-style: preserve-3d;
  background: var(--smile);
  background-color: red;
  position: absolute;
  border-radius: 100%;
  -webkit-animation: colorshift 0s linear 1 forwards;
          animation: colorshift 0s linear 1 forwards;
  -webkit-animation-iteration-count: calc(var(--left) / 50);
          animation-iteration-count: calc(var(--left) / 50);
  transition: transform 0.5s ease-in-out;
  left: calc((var(--left) * 5.75px) - 27.5px);
  transform: translate(0, 10px) scale(0.5);
  box-shadow: inset calc(-25px + (var(--left) * 0.75px)) -20px 20px -10px rgba(0, 0, 0, 0.25);
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
@-webkit-keyframes burst {
  0% {
    transform: translateZ(-1px) scale(1);
  }
  25% {
    transform: translateZ(-1px) scale(1.75);
    -webkit-mask-position: 50% 50%;
            mask-position: 50% 50%;
  }
  100% {
    transform: translateZ(-1px) scale(1.75);
    -webkit-mask-position: 50% -50px, 50% 50px, -50px 50%, 50px 50%, 50px 50px, 50px -50px, -50px 50px, -50px -50px;
            mask-position: 50% -50px, 50% 50px, -50px 50%, 50px 50%, 50px 50px, 50px -50px, -50px 50px, -50px -50px;
  }
}
@keyframes burst {
  0% {
    transform: translateZ(-1px) scale(1);
  }
  25% {
    transform: translateZ(-1px) scale(1.75);
    -webkit-mask-position: 50% 50%;
            mask-position: 50% 50%;
  }
  100% {
    transform: translateZ(-1px) scale(1.75);
    -webkit-mask-position: 50% -50px, 50% 50px, -50px 50%, 50px 50%, 50px 50px, 50px -50px, -50px 50px, -50px -50px;
            mask-position: 50% -50px, 50% 50px, -50px 50%, 50px 50%, 50px 50px, 50px -50px, -50px 50px, -50px -50px;
  }
}
@-webkit-keyframes colorshift {
  to {
    background-color: yellow;
  }
}
@keyframes colorshift {
  to {
    background-color: yellow;
  }
}
.number .face:before {
  content: "";
  position: absolute;
  left: -12.5px;
  top: -15px;
  width: 100%;
  height: 100%;
  background: var(--brows);
  z-index: 9;
  transform: scale(0.35) scaleY(-1);
  -webkit-box-reflect: right;
}
.number .face:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 100%;
  transform: translateZ(-1px) scale(1);
  -webkit-animation: var(--animation);
          animation: var(--animation);
  z-index: -3;
  background: radial-gradient(circle at center, #6500ff 25px, rgba(255, 255, 255, 0.0001) 25px), linear-gradient(to right, rgba(255, 255, 255, 0.001) 49%, yellow 49%, yellow 51%, rgba(255, 255, 255, 0.001) 51%), linear-gradient(to bottom, rgba(255, 255, 255, 0.001) 49%, yellow 49%, yellow 51%, rgba(255, 255, 255, 0.001) 51%), linear-gradient(45deg, rgba(255, 255, 255, 0.001) 49%, yellow 49%, yellow 51%, rgba(255, 255, 255, 0.001) 51%), linear-gradient(-45deg, rgba(255, 255, 255, 0.001) 49%, yellow 49%, yellow 51%, rgba(255, 255, 255, 0.001) 51%);
  -webkit-mask: radial-gradient(circle at center, #000 10px, transparent 10px), radial-gradient(circle at center, #000 10px, transparent 10px), radial-gradient(circle at center, #000 10px, transparent 10px), radial-gradient(circle at center, #000 10px, transparent 10px), radial-gradient(circle at center, #000 10px, transparent 10px), radial-gradient(circle at center, #000 10px, transparent 10px), radial-gradient(circle at center, #000 10px, transparent 10px), radial-gradient(circle at center, #000 10px, transparent 10px);
          mask: radial-gradient(circle at center, #000 10px, transparent 10px), radial-gradient(circle at center, #000 10px, transparent 10px), radial-gradient(circle at center, #000 10px, transparent 10px), radial-gradient(circle at center, #000 10px, transparent 10px), radial-gradient(circle at center, #000 10px, transparent 10px), radial-gradient(circle at center, #000 10px, transparent 10px), radial-gradient(circle at center, #000 10px, transparent 10px), radial-gradient(circle at center, #000 10px, transparent 10px);
  -webkit-mask-position: 50% 50%;
          mask-position: 50% 50%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.number:after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  transform-style: preserve-3d;
  border-radius: 100%;
  background: rgba(0, 0, 0, 0.35);
  filter: blur(20px);
  z-index: -1;
  top: -70px;
  left: calc(-25px + (var(--left) * 0.75px) + (var(--left) * 5.75px));
  transform-origin: bottom;
  transition: transform 0.5s ease-in-out;
  transform: translate3d(0, 0, -50px) rotateX(80deg) scale(0.5);
}
.number:before {
  content: var(--number);
  position: absolute;
  color: #fff;
  width: 30px;
  height: 30px;
  left: -5px;
  top: -10px;
  background: #000;
  box-shadow: inset 0 0 0 2px #6500ff;
  font-family: "Futura";
  font-size: 10px;
  display: flex;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  transform: translate(calc(var(--left) * 5.75px), 0);
}

@media --css-container and (min-width: 11.5px) {
  #slider-wrap ~ .number {
    --number: "1";
    --left: 0;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 6 250 6 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 34.75px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 6 250 6 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.025px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 23px) {
  #slider-wrap ~ .number {
    --number: "2";
    --left: 1;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 12 250 12 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 34.5px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 12 250 12 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.05px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 34.5px) {
  #slider-wrap ~ .number {
    --number: "3";
    --left: 2;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 18 250 18 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 34.25px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 18 250 18 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.075px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 46px) {
  #slider-wrap ~ .number {
    --number: "4";
    --left: 3;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 24 250 24 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 34px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 24 250 24 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.1px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 57.5px) {
  #slider-wrap ~ .number {
    --number: "5";
    --left: 4;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 30 250 30 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 33.75px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 30 250 30 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.125px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 69px) {
  #slider-wrap ~ .number {
    --number: "6";
    --left: 5;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 36 250 36 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 33.5px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 36 250 36 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.15px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 80.5px) {
  #slider-wrap ~ .number {
    --number: "7";
    --left: 6;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 42 250 42 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 33.25px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 42 250 42 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.175px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 92px) {
  #slider-wrap ~ .number {
    --number: "8";
    --left: 7;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 48 250 48 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 33px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 48 250 48 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.2px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 103.5px) {
  #slider-wrap ~ .number {
    --number: "9";
    --left: 8;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 54 250 54 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 32.75px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 54 250 54 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.225px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 115px) {
  #slider-wrap ~ .number {
    --number: "10";
    --left: 9;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 60 250 60 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 32.5px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 60 250 60 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.25px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 126.5px) {
  #slider-wrap ~ .number {
    --number: "11";
    --left: 10;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 66 250 66 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 32.25px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 66 250 66 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.275px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 138px) {
  #slider-wrap ~ .number {
    --number: "12";
    --left: 11;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 72 250 72 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 32px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 72 250 72 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.3px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 149.5px) {
  #slider-wrap ~ .number {
    --number: "13";
    --left: 12;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 78 250 78 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 31.75px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 78 250 78 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.325px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 161px) {
  #slider-wrap ~ .number {
    --number: "14";
    --left: 13;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 84 250 84 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 31.5px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 84 250 84 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.35px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 172.5px) {
  #slider-wrap ~ .number {
    --number: "15";
    --left: 14;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 90 250 90 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 31.25px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 90 250 90 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.375px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 184px) {
  #slider-wrap ~ .number {
    --number: "16";
    --left: 15;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 96 250 96 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 31px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 96 250 96 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.4px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 195.5px) {
  #slider-wrap ~ .number {
    --number: "17";
    --left: 16;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 102 250 102 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 30.75px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 102 250 102 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.425px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 207px) {
  #slider-wrap ~ .number {
    --number: "18";
    --left: 17;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 108 250 108 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 30.5px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 108 250 108 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.45px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 218.5px) {
  #slider-wrap ~ .number {
    --number: "19";
    --left: 18;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 114 250 114 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 30.25px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 114 250 114 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.475px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 230px) {
  #slider-wrap ~ .number {
    --number: "20";
    --left: 19;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 120 250 120 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 30px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 120 250 120 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.5px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 241.5px) {
  #slider-wrap ~ .number {
    --number: "21";
    --left: 20;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 126 250 126 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 29.75px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 126 250 126 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.525px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 253px) {
  #slider-wrap ~ .number {
    --number: "22";
    --left: 21;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 132 250 132 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 29.5px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 132 250 132 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.55px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 264.5px) {
  #slider-wrap ~ .number {
    --number: "23";
    --left: 22;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 138 250 138 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 29.25px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 138 250 138 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.575px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 276px) {
  #slider-wrap ~ .number {
    --number: "24";
    --left: 23;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 144 250 144 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 29px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 144 250 144 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.6px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 287.5px) {
  #slider-wrap ~ .number {
    --number: "25";
    --left: 24;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 150 250 150 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 28.75px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 150 250 150 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.625px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 299px) {
  #slider-wrap ~ .number {
    --number: "26";
    --left: 25;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 156 250 156 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 28.5px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 156 250 156 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.65px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 310.5px) {
  #slider-wrap ~ .number {
    --number: "27";
    --left: 26;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 162 250 162 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 28.25px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 162 250 162 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.675px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 322px) {
  #slider-wrap ~ .number {
    --number: "28";
    --left: 27;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 168 250 168 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 28px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 168 250 168 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.7px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 333.5px) {
  #slider-wrap ~ .number {
    --number: "29";
    --left: 28;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 174 250 174 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 27.75px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 174 250 174 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.725px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 345px) {
  #slider-wrap ~ .number {
    --number: "30";
    --left: 29;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 180 250 180 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 27.5px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 180 250 180 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.75px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 356.5px) {
  #slider-wrap ~ .number {
    --number: "31";
    --left: 30;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 186 250 186 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 27.25px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 186 250 186 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.775px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 368px) {
  #slider-wrap ~ .number {
    --number: "32";
    --left: 31;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 192 250 192 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 27px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 192 250 192 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.8px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 379.5px) {
  #slider-wrap ~ .number {
    --number: "33";
    --left: 32;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 198 250 198 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 26.75px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 198 250 198 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.825px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 391px) {
  #slider-wrap ~ .number {
    --number: "34";
    --left: 33;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 204 250 204 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 26.5px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 204 250 204 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.85px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 402.5px) {
  #slider-wrap ~ .number {
    --number: "35";
    --left: 34;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 210 250 210 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 26.25px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 210 250 210 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.875px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 414px) {
  #slider-wrap ~ .number {
    --number: "36";
    --left: 35;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 216 250 216 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 26px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 216 250 216 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.9px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 425.5px) {
  #slider-wrap ~ .number {
    --number: "37";
    --left: 36;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 222 250 222 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 25.75px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 222 250 222 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.925px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 437px) {
  #slider-wrap ~ .number {
    --number: "38";
    --left: 37;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 228 250 228 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 25.5px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 228 250 228 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.95px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 448.5px) {
  #slider-wrap ~ .number {
    --number: "39";
    --left: 38;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 234 250 234 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 25.25px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 234 250 234 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 20.975px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 460px) {
  #slider-wrap ~ .number {
    --number: "40";
    --left: 39;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 240 250 240 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 25px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 240 250 240 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 471.5px) {
  #slider-wrap ~ .number {
    --number: "41";
    --left: 40;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 246 250 246 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 24.75px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 246 250 246 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.025px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 483px) {
  #slider-wrap ~ .number {
    --number: "42";
    --left: 41;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 252 250 252 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 24.5px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 252 250 252 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.05px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 494.5px) {
  #slider-wrap ~ .number {
    --number: "43";
    --left: 42;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 258 250 258 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 24.25px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 258 250 258 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.075px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 506px) {
  #slider-wrap ~ .number {
    --number: "44";
    --left: 43;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 264 250 264 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 24px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 264 250 264 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.1px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 517.5px) {
  #slider-wrap ~ .number {
    --number: "45";
    --left: 44;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 270 250 270 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 23.75px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 270 250 270 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.125px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 529px) {
  #slider-wrap ~ .number {
    --number: "46";
    --left: 45;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 276 250 276 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 23.5px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 276 250 276 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.15px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 540.5px) {
  #slider-wrap ~ .number {
    --number: "47";
    --left: 46;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 282 250 282 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 23.25px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 282 250 282 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.175px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 552px) {
  #slider-wrap ~ .number {
    --number: "48";
    --left: 47;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 288 250 288 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 23px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 288 250 288 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.2px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 563.5px) {
  #slider-wrap ~ .number {
    --number: "49";
    --left: 48;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 294 250 294 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 22.75px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 294 250 294 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.225px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 575px) {
  #slider-wrap ~ .number {
    --number: "50";
    --left: 49;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 300 250 300 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 22.5px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 300 250 300 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.25px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 586.5px) {
  #slider-wrap ~ .number {
    --number: "51";
    --left: 50;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 306 250 306 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 22.25px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 306 250 306 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.275px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 598px) {
  #slider-wrap ~ .number {
    --number: "52";
    --left: 51;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 312 250 312 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 22px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 312 250 312 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.3px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 609.5px) {
  #slider-wrap ~ .number {
    --number: "53";
    --left: 52;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 318 250 318 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 21.75px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 318 250 318 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.325px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 621px) {
  #slider-wrap ~ .number {
    --number: "54";
    --left: 53;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 324 250 324 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 21.5px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 324 250 324 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.35px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 632.5px) {
  #slider-wrap ~ .number {
    --number: "55";
    --left: 54;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 330 250 330 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 21.25px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 330 250 330 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.375px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 644px) {
  #slider-wrap ~ .number {
    --number: "56";
    --left: 55;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 336 250 336 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 21px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 336 250 336 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.4px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 655.5px) {
  #slider-wrap ~ .number {
    --number: "57";
    --left: 56;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 342 250 342 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 20.75px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 342 250 342 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.425px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 667px) {
  #slider-wrap ~ .number {
    --number: "58";
    --left: 57;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 348 250 348 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 20.5px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 348 250 348 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.45px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 678.5px) {
  #slider-wrap ~ .number {
    --number: "59";
    --left: 58;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 354 250 354 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 20.25px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 354 250 354 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.475px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 690px) {
  #slider-wrap ~ .number {
    --number: "60";
    --left: 59;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 360 250 360 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 20px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 360 250 360 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.5px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 701.5px) {
  #slider-wrap ~ .number {
    --number: "61";
    --left: 60;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 366 250 366 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 19.75px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 366 250 366 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.525px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 713px) {
  #slider-wrap ~ .number {
    --number: "62";
    --left: 61;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 372 250 372 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 19.5px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 372 250 372 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.55px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 724.5px) {
  #slider-wrap ~ .number {
    --number: "63";
    --left: 62;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 378 250 378 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 19.25px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 378 250 378 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.575px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 736px) {
  #slider-wrap ~ .number {
    --number: "64";
    --left: 63;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 384 250 384 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 19px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 384 250 384 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.6px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 747.5px) {
  #slider-wrap ~ .number {
    --number: "65";
    --left: 64;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 390 250 390 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 18.75px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 390 250 390 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.625px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 759px) {
  #slider-wrap ~ .number {
    --number: "66";
    --left: 65;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 396 250 396 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 18.5px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 396 250 396 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.65px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 770.5px) {
  #slider-wrap ~ .number {
    --number: "67";
    --left: 66;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 402 250 402 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 18.25px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 402 250 402 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.675px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 782px) {
  #slider-wrap ~ .number {
    --number: "68";
    --left: 67;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 408 250 408 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 18px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 408 250 408 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.7px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 793.5px) {
  #slider-wrap ~ .number {
    --number: "69";
    --left: 68;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 414 250 414 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 17.75px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 414 250 414 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.725px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 805px) {
  #slider-wrap ~ .number {
    --number: "70";
    --left: 69;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 420 250 420 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 17.5px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 420 250 420 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.75px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 816.5px) {
  #slider-wrap ~ .number {
    --number: "71";
    --left: 70;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 426 250 426 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 17.25px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 426 250 426 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.775px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 828px) {
  #slider-wrap ~ .number {
    --number: "72";
    --left: 71;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 432 250 432 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 17px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 432 250 432 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.8px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 839.5px) {
  #slider-wrap ~ .number {
    --number: "73";
    --left: 72;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 438 250 438 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 16.75px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 438 250 438 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.825px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 851px) {
  #slider-wrap ~ .number {
    --number: "74";
    --left: 73;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 444 250 444 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 16.5px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 444 250 444 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.85px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 862.5px) {
  #slider-wrap ~ .number {
    --number: "75";
    --left: 74;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 450 250 450 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 16.25px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 450 250 450 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.875px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 874px) {
  #slider-wrap ~ .number {
    --number: "76";
    --left: 75;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 456 250 456 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 16px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 456 250 456 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.9px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 885.5px) {
  #slider-wrap ~ .number {
    --number: "77";
    --left: 76;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 462 250 462 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 15.75px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 462 250 462 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.925px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 897px) {
  #slider-wrap ~ .number {
    --number: "78";
    --left: 77;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 468 250 468 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 15.5px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 468 250 468 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.95px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 908.5px) {
  #slider-wrap ~ .number {
    --number: "79";
    --left: 78;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 474 250 474 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 15.25px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 474 250 474 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 21.975px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 920px) {
  #slider-wrap ~ .number {
    --number: "80";
    --left: 79;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 480 250 480 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 15px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 480 250 480 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 22px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 931.5px) {
  #slider-wrap ~ .number {
    --number: "81";
    --left: 80;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 486 250 486 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 14.75px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 486 250 486 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 22.025px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 943px) {
  #slider-wrap ~ .number {
    --number: "82";
    --left: 81;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 492 250 492 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 14.5px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 492 250 492 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 22.05px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 954.5px) {
  #slider-wrap ~ .number {
    --number: "83";
    --left: 82;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 498 250 498 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 14.25px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 498 250 498 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 22.075px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 966px) {
  #slider-wrap ~ .number {
    --number: "84";
    --left: 83;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 504 250 504 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 14px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 504 250 504 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 22.1px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 977.5px) {
  #slider-wrap ~ .number {
    --number: "85";
    --left: 84;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 510 250 510 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 13.75px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 510 250 510 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 22.125px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 989px) {
  #slider-wrap ~ .number {
    --number: "86";
    --left: 85;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 516 250 516 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 13.5px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 516 250 516 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 22.15px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 1000.5px) {
  #slider-wrap ~ .number {
    --number: "87";
    --left: 86;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 522 250 522 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 13.25px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 522 250 522 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 22.175px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 1012px) {
  #slider-wrap ~ .number {
    --number: "88";
    --left: 87;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 528 250 528 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 13px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 528 250 528 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 22.2px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 1023.5px) {
  #slider-wrap ~ .number {
    --number: "89";
    --left: 88;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 534 250 534 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 12.75px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 534 250 534 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 22.225px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 1035px) {
  #slider-wrap ~ .number {
    --number: "90";
    --left: 89;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 540 250 540 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 12.5px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 540 250 540 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 22.25px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 1046.5px) {
  #slider-wrap ~ .number {
    --number: "91";
    --left: 90;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 546 250 546 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 12.25px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 546 250 546 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 22.275px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 1058px) {
  #slider-wrap ~ .number {
    --number: "92";
    --left: 91;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 552 250 552 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 12px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 552 250 552 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 22.3px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 1069.5px) {
  #slider-wrap ~ .number {
    --number: "93";
    --left: 92;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 558 250 558 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 11.75px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 558 250 558 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 22.325px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 1081px) {
  #slider-wrap ~ .number {
    --number: "94";
    --left: 93;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 564 250 564 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 11.5px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 564 250 564 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 22.35px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 1092.5px) {
  #slider-wrap ~ .number {
    --number: "95";
    --left: 94;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 570 250 570 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 11.25px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 570 250 570 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 22.375px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 1104px) {
  #slider-wrap ~ .number {
    --number: "96";
    --left: 95;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 576 250 576 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 11px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 576 250 576 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 22.4px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 1115.5px) {
  #slider-wrap ~ .number {
    --number: "97";
    --left: 96;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 582 250 582 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 10.75px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 582 250 582 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 22.425px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 1127px) {
  #slider-wrap ~ .number {
    --number: "98";
    --left: 97;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 588 250 588 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 10.5px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 588 250 588 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 22.45px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 1138.5px) {
  #slider-wrap ~ .number {
    --number: "99";
    --left: 98;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 594 250 594 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 10.25px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 594 250 594 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 22.475px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 1150px) {
  #slider-wrap ~ .number {
    --number: "100";
    --left: 99;
    --smile: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:20px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 600 250 600 270 150 '%3E%3C/path%3E%3C/svg%3E")
      18px 10px / 80px 80px no-repeat;
    --brows: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='stroke:%23000;stroke-width:50px;fill:none;stroke-linecap:round;' d='M 30 150 C 50 600 250 600 270 150 '%3E%3C/path%3E%3C/svg%3E")
        18px 22.5px / 90px 90px no-repeat,
      radial-gradient(circle at center, #000 10px, transparent 10px)
        calc(50% + 2px) 10px / 20px 20px no-repeat;
  }
}
@media --css-container and (min-width: 585px) {
  #slider-wrap ~ .number {
    --animation: burst 0.75s ease-in-out 1 forwards 0.25s;
  }
}
@-webkit-keyframes update {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes update {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
</style>
</head>
<body>
  <div id='slider-wrap'></div>
<div class='number'>
  <div class='face'></div>
</div>
  <script src='https://unpkg.com/cqfill'></script>
</body>
</html>

4. By Alex Safayan

Made by Alex Safayan. UI Range Sliders (webkit). Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title> 
<style>
/* Import */
@import url("https://fonts.googleapis.com/css?family=Sniglet|Oswald");

body, html {
  margin: 0px; 
  padding: 0px; 
  background-color: #1abc9c; 
  font-family: Sniglet; 
  text-align: center; 
}

h1 {
  color: #ecf0f1; 
  text-align: center; 
  font-size: 40px; 
  margin: 0px; 
  height: 70px; 
}

input {
  -webkit-appearance: none; 
  width: 160px; 
  height: 20px; 
  margin: 10px 50px; 
  background: linear-gradient(to right, #16a085 0%, #16a085 100%); 
  background-size: 150px 10px; 
  background-position: center; 
  background-repeat: no-repeat; 
  overflow: hidden; 
  outline: none; 
  zoom: 130%; 
  display: block; 
  margin: auto; 
  margin-bottom: 30px; 
}

input::-webkit-slider-thumb {
  -webkit-appearance: none; 
  width: 20px; 
  height: 20px; 
  background: #27ae60; 
  position: relative; 
  z-index: 3; 
}

input::-webkit-slider-thumb:after {
  content: " "; 
  width: 160px; 
  height: 10px; 
  position: absolute; 
  z-index: 1; 
  right: 20px; 
  top: 5px; 
  background: #2ecc71; 
}

.green::-webkit-slider-thumb {
  background: #27ae60; 
}

.green::-webkit-slider-thumb:after {
  background: #2ecc71; 
}

.red::-webkit-slider-thumb {
  background: #c0392b; 
}

.red::-webkit-slider-thumb:after {
  background: #e74c3c; 
}

.blue::-webkit-slider-thumb {
  background: #2980b9; 
}

.blue::-webkit-slider-thumb:after {
  background: #3498db; 
}

.orange::-webkit-slider-thumb {
  background: #d35400; 
}

.orange::-webkit-slider-thumb:after {
  background: #e67e22; 
}

.purple::-webkit-slider-thumb {
  background: #8e44ad; 
}

.purple::-webkit-slider-thumb:after {
  background: #9b59b6; 
}

.gray::-webkit-slider-thumb {
  background: #7f8c8d; 
}

.gray::-webkit-slider-thumb:after {
  background: #95a5a6; 
}

.one {
  width: 0px; 
  height: 0px; 
  background-color: transparent; 
  line-height: 30px; 
  color: #ecf0f1; 
  cursor: pointer; 
  border: 70px solid transparent; 
  border-left: 70px solid #16a085; 
  border-top: 70px solid #16a085; 
  left: 0px; 
  top: 0px; 
  position: absolute; 
}

a {
  text-decoration: none; 
}

.one span {
  margin-left: -60px; 
  position: absolute; 
  margin-top: -40px; 
}

.two {
  width: 0px; 
  height: 0px; 
  background-color: transparent; 
  line-height: 30px; 
  color: #ecf0f1; 
  cursor: pointer; 
  border: 70px solid transparent; 
  border-right: 70px solid #16a085; 
  border-top: 70px solid #16a085; 
  right: 0px; 
  top: 0px; 
  position: absolute; 
}

.two span {
  margin-left: -15px; 
  position: absolute; 
  margin-top: -40px; 
  white-space: nowrap; 
}
</style>
</head>
<body>
  <h1></h1>
<input type="range" value="20" class="green"/>
<input type="range" value="31" class="red"/>
<input type="range" value="42" class="blue"/>
<input type="range" value="53" class="orange"/>
<input type="range" value="64" class="purple"/>
<input type="range" value="75" class="gray"/>

<a href="https://codepen.io/alexsafayan/full/dszKt" target="_blank"><div class="one"><span>Fullscreen</span></div></a>

<a href="https://codepen.io/alexsafayan" target="_blank"><div class="two"><span>Follow me!</span></div></a>
</body>
</html>

5. By GlitchWorker

Made by GlitchWorker. Multi Range Slider CSS3. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, user-scalable=no">
<style>
body {
  background-color: #666;
  margin: 100px 50px;
}

[slider] {
  position: relative;
  height: 14px;
  border-radius: 10px;
  text-align: left;
  margin: 45px 0 10px 0;
}

[slider] > div {
  position: absolute;
  left: 13px;
  right: 15px;
  height: 14px;
}

[slider] > div > [inverse-left] {
  position: absolute;
  left: 0;
  height: 14px;
  border-radius: 10px;
  background-color: #CCC;
  margin: 0 7px;
}

[slider] > div > [inverse-right] {
  position: absolute;
  right: 0;
  height: 14px;
  border-radius: 10px;
  background-color: #CCC;
  margin: 0 7px;
}

[slider] > div > [range] {
  position: absolute;
  left: 0;
  height: 14px;
  border-radius: 14px;
  background-color: #1ABC9C;
}

[slider] > div > [thumb] {
  position: absolute;
  top: -7px;
  z-index: 2;
  height: 28px;
  width: 28px;
  text-align: left;
  margin-left: -11px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  background-color: #FFF;
  border-radius: 50%;
  outline: none;
}

[slider] > input[type=range] {
  position: absolute;
  pointer-events: none;
  -webkit-appearance: none;
  z-index: 3;
  height: 14px;
  top: -2px;
  width: 100%;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
}

div[slider] > input[type=range]::-ms-track {
  -webkit-appearance: none;
  background: transparent;
  color: transparent;
}

div[slider] > input[type=range]::-moz-range-track {
  -moz-appearance: none;
  background: transparent;
  color: transparent;
}

div[slider] > input[type=range]:focus::-webkit-slider-runnable-track {
  background: transparent;
  border: transparent;
}

div[slider] > input[type=range]:focus {
  outline: none;
}

div[slider] > input[type=range]::-ms-thumb {
  pointer-events: all;
  width: 28px;
  height: 28px;
  border-radius: 0px;
  border: 0 none;
  background: red;
}

div[slider] > input[type=range]::-moz-range-thumb {
  pointer-events: all;
  width: 28px;
  height: 28px;
  border-radius: 0px;
  border: 0 none;
  background: red;
}

div[slider] > input[type=range]::-webkit-slider-thumb {
  pointer-events: all;
  width: 28px;
  height: 28px;
  border-radius: 0px;
  border: 0 none;
  background: red;
  -webkit-appearance: none;
}

div[slider] > input[type=range]::-ms-fill-lower {
  background: transparent;
  border: 0 none;
}

div[slider] > input[type=range]::-ms-fill-upper {
  background: transparent;
  border: 0 none;
}

div[slider] > input[type=range]::-ms-tooltip {
  display: none;
}

[slider] > div > [sign] {
  opacity: 0;
  position: absolute;
  margin-left: -11px;
  top: -39px;
  z-index:3;
  background-color: #1ABC9C;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 28px;
  -webkit-border-radius: 28px;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
}

[slider] > div > [sign]:after {
  position: absolute;
  content: '';
  left: 0;
  border-radius: 16px;
  top: 19px;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top-width: 16px;
  border-top-style: solid;
  border-top-color: #1ABC9C;
}

[slider] > div > [sign] > span {
  font-size: 12px;
  font-weight: 700;
  line-height: 28px;
}

[slider]:hover > div > [sign] {
  opacity: 1;
}
</style>
</head>
<body>
  <div slider id="slider-distance">
  <div>
    <div inverse-left style="width:70%;"></div>
    <div inverse-right style="width:70%;"></div>
    <div range style="left:30%;right:40%;"></div>
    <span thumb style="left:30%;"></span>
    <span thumb style="left:60%;"></span>
    <div sign style="left:30%;">
      <span id="value">30</span>
    </div>
    <div sign style="left:60%;">
      <span id="value">60</span>
    </div>
  </div>
  <input type="range" tabindex="0" value="30" max="100" min="0" step="1" oninput="
  this.value=Math.min(this.value,this.parentNode.childNodes[5].value-1);
  var value=(100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.value)-(100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.min);
  var children = this.parentNode.childNodes[1].childNodes;
  children[1].style.width=value+'%';
  children[5].style.left=value+'%';
  children[7].style.left=value+'%';children[11].style.left=value+'%';
  children[11].childNodes[1].innerHTML=this.value;" />

  <input type="range" tabindex="0" value="60" max="100" min="0" step="1" oninput="
  this.value=Math.max(this.value,this.parentNode.childNodes[3].value-(-1));
  var value=(100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.value)-(100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.min);
  var children = this.parentNode.childNodes[1].childNodes;
  children[3].style.width=(100-value)+'%';
  children[5].style.right=(100-value)+'%';
  children[9].style.left=value+'%';children[13].style.left=value+'%';
  children[13].childNodes[1].innerHTML=this.value;" />
</div>
</body>
</html>

6. By Chris Coyier

Made by Chris Coyier. Customized 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>
input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #ac51b5;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #65001c;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3.6px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ac51b5;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #ac51b5;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #65001c;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 39px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #65001c;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #ac51b5;
}
input[type=range]:focus::-ms-fill-upper {
  background: #ac51b5;
}

body {
  padding: 30px;
}
</style>
</head>
<body>
  <input type="range">
</body>
</html>

7. By Abe

Made by Abe. CSS UI 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>
body {
  background-color: #f0f7ef;
}

.container {
  display: flex;
  width: 500px;
  height: 500px;
  margin: auto;
  text-alignt: center;
}

.slider {
  width: 100%;
  margin: 50% auto;
}

input[type="range"] {
  -webkit-appearance: none !important;
  width: 100%;
  height: 15px;
  background-color: #A3CD99;
  border: 1px solid #97c68b;
  border-radius: 10px;
  margin: auto;
  transition: all 0.3s ease;
}
input[type="range"]:hover {
  background-color: #b2d5aa;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 20px;
  height: 20px;
  background-color: #579E81;
  border-radius: 30px;
  box-shadow: 0px 0px 3px #3c6d59;
  transition: all 0.5s ease;
}
input[type="range"]::-webkit-slider-thumb:hover {
  background-color: #457d66;
}
input[type="range"]::-webkit-slider-thumb:active {
  box-shadow: 0px 0px 1px #3c6d59;
}

#rangevalue {
  text-align: center;
  font-family: "Quantico", sans-serif;
  font-size: 18px;
  display: block;
  margin: auto;
  padding: 10px 0px;
  width: 100%;
  color: #579E81;
}
</style>
  </head>
<body>
<div class="container">
  <div class="slider">
  <input type = "range" min="0" max="100" onchange="rangevalue.value=value"/>
	<output id="rangevalue">50</output>
  </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>
</body>
</html>

8. By Alexander Shoup

Made by Alexander Shoup. Image Range Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
  margin: 0;
  background-color: black;
}

section {
  text-align: center;
}
figure {
  margin: 0;
}
h2 {
  position: absolute;
  color: white;
  font-size: 5em;
  font-family: sans-serif;
/*   bottom: 0; */
/*   right: 40%; */
}

section > figure {
  position: absolute;
  height: 90vh;
  display: flex;
  width: 100vw;
  justify-content: center;
}

section > figure > img {
  height: inherit;
}

section > figure {
  opacity: 0;
  transition: opacity 0.5s;
}

input {
  width: 20vw;
}
</style>
</head>
<body>
  <section class="timemachine">
<form action="">
  <input type="range" />
</form>
</section>
<script>
var images;
function jsonFlickrApi(data) {
  console.log(data);
  images = data.photos.photo.map(function(photo){return photo.url_z});
  image_elements = images.map(function(mg, i) {
    var img = document.createElement('img');
    img.src = mg;
    var numb = document.createElement('h2');
    numb.textContent = i+1;
    var fig = document.createElement('figure');
    fig.appendChild(img);
    fig.appendChild(numb);
    document.querySelector('section').appendChild(fig); 
    return fig;
  });
   var slider = document.querySelector('input');
  slider.min = 0;
  slider.max = slider.value = images.length - 1;
  image_elements[slider.max].style.opacity = 1;
  // slider.step = 0.01;
  slider.addEventListener('input', function(e) {
  // console.log(Math.floor(e.target.value));
    image_elements.forEach(function(e){e.style.opacity=0;
                                       // e.style.zIndex=-100;
                                      });
    image_elements[Math.floor(e.target.value)].style.opacity = 1;
    // image_elements[Math.floor(e.target.value)].style.zIndex=100;
   
}); 
}
 
</script>
<script src="https://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=603db98e0031fb25a3e3a6fc44502683&[email protected]&per_page=50&format=json&extras=description,license,date_upload,date_taken,owner_name,icon_server,original_format,last_update,geo,tags,machine_tags,o_dims,views,media,path_alias,url_sq,url_t,url_s,url_q,url_m,url_n,url_z,url_c,url_l,url_o">
</script>
</body>
</html>