Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- ЗАПУСКАТЬ КОД ЛУЧШЕ С КОМЬЮТЕРА -->
<!-- При нажатии на лицо, откроется второй экран -->

<!-- BETTER ON THE DESKTOP VERSION -->

<!-- Mobile container -->
<div class="container">
  <!--  Background waves  -->
  <div class="wave w1"></div>
  <div class="wave w2"></div>
  <div class="wave w3"></div>

  <header class="menu">

    <!-- Page Title -->
    <h1 class="menu__title">Send Money</h1>

    <div class="menu__notification"></div>

  </header>

  <div class="card atvImg">
    <div class="atvImg-layer" data-img="https://images.unsplash.com/photo-1556139930-c23fa4a4f934?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80"></div>
    <div class="atvImg-layer" data-img="http://robindelaporte.fr/codepen/visa.png"></div>
  </div>

  <div class="main">
    <h2 class="main__title">
      Choose historical pal
      <div class="main__search"></div>

    </h2>

    <div class="slider"></div>
    <p class="slider__text">Year</p>

    <div class="faces">
      <a class="faces__face" href="#popup">
        <img src="https://www.biography.com/.image/ar_1:1%2Cc_fill%2Ccs_srgb%2Cfl_progressive%2Cq_auto:good%2Cw_1200/MTYzMDg2NDcyODE4MjA2NDgx/portrait-of-leonardo-da-vinci-1452-1519-getty-promo.jpg" alt="">
        <p class="faces__name">Da Vinci</p>
      </a>
      <a class="faces__face" href="#popup">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Nikolaus_Kopernikus.jpg/274px-Nikolaus_Kopernikus.jpg" alt="">
        <p class="faces__name">Copernicus</p>
      </a>
      <a class="faces__face" href="#popup">
        <img src="https://stuki-druki.com/images2/ivgroz1.jpg" alt="">
        <p class="faces__name">Ivan IV</p>
      </a>
    </div>
    <!--     <div class="notitify">click on the face 🠕</div> -->
  </div>

</div>

<div id="popup" class="popup">
  <div class="popup__block">
    <div class="container">
      <header class="menu">

        <!-- Page Title -->
        <h1 class="menu__title">Send Money</h1>
        <a href="#" class="menu__back"> </a>
      </header>

      <div class="card atvImg ">
        <div class="atvImg-layer" data-img="https://images.unsplash.com/photo-1556139930-c23fa4a4f934?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80"></div>
        <div class="atvImg-layer" data-img="http://robindelaporte.fr/codepen/visa.png"></div>
      </div>
      <div class="card__balance">Your Balance: $9999</div>

      <div class="main">

        <div class="faces">
          <a class="faces__face" href="#popup">
            <img src="https://www.biography.com/.image/ar_1:1%2Cc_fill%2Ccs_srgb%2Cfl_progressive%2Cq_auto:good%2Cw_1200/MTYzMDg2NDcyODE4MjA2NDgx/portrait-of-leonardo-da-vinci-1452-1519-getty-promo.jpg" alt="">
            <p class="faces__name">Da Vinci</p>
          </a>
        </div>

        <form class="form">
          <input type="text" placeholder="Write Amount of $">
          <textarea rows="4" placeholder="Write a message"></textarea>
          <a href="#" class="button">Send</a>
        </form>
      </div>

    </div>
    <a href="#" class="popup__close">close</a>
  </div>
</div>
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");

body {
  font-family: "Montserrat", sans-serif;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  background: linear-gradient(
    45deg,
    rgba(206, 160, 94, 0),
    rgba(206, 160, 94, 0.5)
  );
  background-attachment: fixed;
}

.container {
  position: relative;
  width: 320px;
  height: 620px;
  margin: 0 30px;
  background: #fff;
  border-radius: 30px;
  box-shadow: 0 2px 30px 10px rgba(206, 160, 94, 0.3);
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    rgba(206, 160, 94, 0.95),
    rgba(#eee, 1) 36%,
    rgba(white, 1)
  );
}

.wave {
  position: absolute;
  top: 3%;
  left: 50%;
  width: 500px;
  height: 450px;
  margin-top: -215px;
  margin-left: -250px;
  background: rgba(206, 160, 94, 0.95);
  border-radius: 40%;
  opacity: 0.4;
  animation: shift 5s infinite linear;
  &.w2 {
    background: rgba(206, 160, 94, 0.95);
    opacity: 0.1;
    animation: shift 9s infinite linear;
  }
  &.w3 {
    animation: shift 7s infinite linear;
    background: rgba(206, 160, 94, 0.95);
    opacity: 0.1;
  }
}

.card {
  display: inline-block;
  height: 140px;
  width: 210px;
  margin: 15px 55px 0;
  border-radius: 10%;
  opacity: 0.87;
  cursor: pointer;
  position: relative;

  &:before,
  &:after {
    position: absolute;
    display: block;
    font-family: "FontAwesome";
    color: #fff;
    top: 41%;
    font-size: 24px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  &:before {
    content: "\f104";
    left: -25px;
  }

  &:after {
    content: "\f105";
    right: -25px;
  }
}

.atvImg {
  border-radius: 10%;
  transform-style: preserve-3d;
  -webkit-tap-highlight-color: rgba(#000, 0);
}

.atvImg img {
  border-radius: 10%;
  box-shadow: 0 2px 8px rgba(14, 21, 47, 0.25);
}

.atvImg-container {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10%;
  transition: all 0.2s ease-out;
}

.atvImg-container.over .atvImg-shadow {
  box-shadow: 0 45px 100px rgba(14, 21, 47, 0.4),
    0 16px 40px rgba(14, 21, 47, 0.4);
}

.atvImg-layers {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10%;
  overflow: hidden;
  transform-style: preserve-3d;
}

.atvImg-rendered-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  background-size: cover;
  transition: all 0.1s ease-out;
  overflow: hidden;
  border-radius: 10%;
}

.atvImg-shadow {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  transition: all 0.2s ease-out;
  box-shadow: 0 8px 30px rgba(14, 21, 47, 0.6);
}

.atvImg-shine {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 15px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0) 60%
  );
}

@keyframes shift {
  from {
    transform: rotate(360deg);
  }
}

.menu {
  width: 100%;
  height: 50px;
  margin-top: 25px;
  position: relative;

  &__title {
    position: absolute;
    top: 50%;
    left: 50%;
    // font-weight: 300;
    transform: translate(-50%, -50%);
    font-size: 20px;
    margin: 0 auto;
    color: #fff;
  }

  &__notification {
    top: 9px;
    right: 25px;
    cursor: pointer;
    display: inline-block;
    position: absolute;

    font-size: 13px;
    background: linear-gradient(45deg, rgba(#fff, 0.7), rgba(#fff, 1));
    padding: 9px;
    border-radius: 99px;

    &::before {
      display: block;
      content: "\f0f3";
      font-family: "FontAwesome";
      transform-origin: top center;
      color: rgb(206, 160, 94);
    }
  }

  &__back {
    top: 9px;
    left: 25px;
    cursor: pointer;
    display: inline-block;
    position: absolute;
    text-decoration: none;
    font-size: 13px;
    background: linear-gradient(45deg, rgba(#fff, 0.7), rgba(#fff, 1));
    padding: 7px 11.5px;
    border-radius: 99px;

    &::before {
      display: block;
      content: "\f104";
      font-family: "FontAwesome";
      transform-origin: top center;
      color: rgb(206, 160, 94);
      font-size: 15px;
    }
  }
}

.main {
  margin: 75px 0 0;
  padding: 30px;

  height: 100%;

  &__title {
    position: relative;
    font-weight: 700;
    text-transform: capitalize;
    color: #444;
    // text-align: center;
  }

  &__search {
    cursor: pointer;
    display: inline-block;
    position: absolute;
    top: -10px;
    right: -5px;
    font-size: 13px;
    background: linear-gradient(
      45deg,
      rgba(206, 160, 94, 0.4),
      rgba(206, 160, 94, 0.9)
    );
    padding: 9px;
    border-radius: 99px;

    &::before {
      display: block;
      content: "\f002";
      font-family: "FontAwesome";
      transform-origin: top center;
      color: #fff;
    }
  }
}

.slider {
  --handle: rgba(206, 160, 94, 1);
  --line: #d1d6ee;
  --line-active: rgba(206, 160, 94, 0.8);
  --value-color: #444;
  touch-action: none;
  user-select: none;
  width: 260px;
  margin-top: 50px;
  height: 2px;
  border-radius: 1px;
  position: relative;

  svg {
    display: block;
    height: 83px;
    path {
      fill: none;
      stroke: var(--stroke, var(--line));
      stroke-width: 2;
    }
  }
  .active,
  & > svg {
    position: absolute;
    left: 0;
    top: -41px;
    height: 83px;
  }
  & > svg {
    width: 100%;
  }
  .active {
    position: absolute;
    overflow: hidden;
    width: calc(var(--active-width) * 1px);
    svg {
      --stroke: var(--line-active);
      width: var(--slider-width);
    }
  }
  .noUi-handle {
    --y: 0;
    cursor: grab;
    .point {
      position: relative;
      transform: translateY(calc(var(--y) * 1px));
      &:before {
        content: "";
        display: block;
        width: 32px;
        height: 16px;
        margin-top: 8px;
        border-radius: 10px;
        background: var(--handle);
        transform: scale(var(--handle-scale, 0.75)) translateZ(0);
        transition: transform 0.25s ease;
      }
      .value {
        position: absolute;
        left: 50%;
        bottom: 100%;
        font-size: 12px;
        font-weight: 500;
        color: var(--value-color);
        pointer-events: none;
        opacity: 1;
        transform: translate(-50%, var(--value-y, 0))
          scale(var(--value-scale, 0.8)) translateZ(0);
        transition: transform 0.25s ease, opacity 0.25s linear;
      }
    }
    &.noUi-active {
      --handle-scale: 1;
      --value-o: 1;
      --value-y: -8px;
      --value-scale: 1;
    }
  }
  // Structure
  * {
    touch-action: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  &.noUi-state-tap .noUi-connect,
  &.noUi-state-tap .noUi-origin {
    transition: transform 0.25s;
  }
  .noUi-target {
    position: relative;
  }
  .noUi-base,
  .noUi-connects {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
  }
  .noUi-origin,
  .noUi-connect {
    position: absolute;
    will-change: transform;
    transform-origin: 0 0;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .noUi-connects {
    overflow: hidden;
    z-index: 0;
    border-radius: 1px;
    .noUi-connect {
      width: 100%;
      height: 100%;
    }
  }
  .noUi-handle {
    backface-visibility: hidden;
    position: absolute;
    outline: none;
    cursor: pointer;
    width: 32px;
    height: 32px;
    left: 16px;
    top: -15px;
  }
  .noUi-origin {
    left: auto;
    right: 0;
    height: 0;
    width: 10%;
  }
}

.slider__text {
  font-size: 12px;
  margin-top: 10px;
}

.faces {
  margin-top: 35px;
  display: flex;
  justify-content: space-between;

  &__face {
    cursor: pointer;
    max-width: 70px;
    color: #444;
    text-decoration: none;

    img {
      width: 70px;
      height: 70px;
      border-radius: 99px;
      animation: glow 2s infinite ease-in-out;
      transition: 1s ease;

      &:hover {
        filter: drop-shadow(0 5px 20px #cfa263);
      }
    }
  }

  &__name {
    text-align: center;
    font-size: 11px;
    margin-top: 5px;
  }
}

.notitify {
  color: #ddd;
  margin-top: 25px;
  font-size: 15px;
}

@keyframes glow {
  0% {
    box-shadow: 0 0 10px rgba(206, 160, 94, 0.3);
  }
  33% {
    box-shadow: 0 0 10px rgba(206, 160, 94, 0.95);
  }
  66% {
    box-shadow: 0 0 10px rgba(206, 160, 94, 0.9);
  }
  100% {
    box-shadow: 0 0 10px rgba(206, 160, 94, 0.3);
  }
}

/* popup */

.popup {
  width: 100%;
  height: 100vh;
  display: none;
  z-index: 9999;

  position: fixed;
  top: 0;
  right: 0;
}

#popup:target {
  display: flex;
}

.popup:before {
  content: "";
  box-sizing: border-box;
  width: 100%;
  background-color: #fff;
  background: linear-gradient(45deg, rgba(#fff, 1), rgba(#e7d0af, 1));

  position: fixed;
  left: 0;
  top: 50%;
  will-change: height, top;
  animation: open-animation 0.6s cubic-bezier(0.83, 0.04, 0, 1.16) 0.65s both;
}

@keyframes open-animation {
  0% {
    height: 0;
    top: 50%;
  }

  100% {
    height: 100vh;
    top: 0;
  }
}

.popup__block {
  height: calc(100vh - 40px);
  overflow: hidden;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  display: flex;

  // padding: 5% 15%;
  box-sizing: border-box;
  position: relative;

  margin: auto;
  overflow: auto;
  animation: fade 0.5s ease-out 1.3s both;
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.popup__title {
  font-size: 2.5rem;
  margin: 0 0 1em;
}

.popup__close {
  width: 3.2rem;
  height: 3.2rem;
  text-indent: -9999px;

  position: fixed;
  top: 20px;
  right: 20px;

  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

.popup {
  .container {
    background: linear-gradient(
      to bottom,
      rgba(206, 160, 94, 0.95),
      rgba(#def, 0.4) 36%,
      rgba(white, 1)
    );
  }
  .card {
    width: 60px;
    height: 40px;
    margin: 15px 0 0 30px;

    &:before,
    &:after {
      display: none;
    }

    &__balance {
      display: block;
      color: #fff;
      margin-top: -30px !important;
      margin-left: 110px;
    }
  }

  .main {
    margin: 40px 0 0;
    padding: 45px 30px;
    background: linear-gradient(rgba(#fff, 1), rgba(#eee, 1));
    border-radius: 30px;
  }

  .faces {
    margin-top: 0;
    display: flex;
    justify-content: center;
  }

  .form {
    margin-top: 40px;

    input,
    textarea {
      width: 240px;
      padding: 10px;
      border: 0;
      margin: 0;
      margin-bottom: 20px;
      overflow: none;

      outline: none;
      transition: background 0.5s;
      font-family: "Montserrat", sans-serif;
      border-radius: 10px;
      transition: all 0.4s ease-in-out;
      background-size: 300% 100%;
      background-image: linear-gradient(to right, #ddd, #fff, #ddd);
      box-shadow: 0 4px 15px 0 rgba(#fff, 0.8);

      &:hover {
        background-position: 200% 0;

        transition: all 1.4s ease-in-out;
      }

      &:focus,
      &:target {
        background-position: 100% 0;

        transition: all 0.4s ease-in-out;
      }
    }

    .button {
      display: inline-block;
      cursor: pointer;
      text-align: center;
      width: 240px;
      text-decoration: none;
      padding: 10px;
      border-radius: 10px;
      border: 0;
      margin: 0;
      background: #eee;
      font-family: "Montserrat", sans-serif;
      background-size: 300% 100%;
      transition: all 0.4s ease-in-out;
      color: #fff;

      background-image: linear-gradient(
        to right,
        rgba(206, 160, 94, 0.9),
        rgba(206, 160, 94, 0.3),
        rgba(206, 160, 94, 0.9)
      );
      box-shadow: 0 4px 15px 0 rgba(206, 160, 94, 0.8);

      &:hover {
        background-position: 100% 0;

        transition: all 0.4s ease-in-out;
      }
    }
  }
}

              
            
!

JS

              
                function atvImg() {
  var d = document,
    de = d.documentElement,
    bd = d.getElementsByTagName("body")[0],
    htm = d.getElementsByTagName("html")[0],
    win = window,
    imgs = d.querySelectorAll(".atvImg"),
    totalImgs = imgs.length,
    supportsTouch = "ontouchstart" in win || navigator.msMaxTouchPoints;

  if (totalImgs <= 0) {
    return;
  }

  for (var l = 0; l < totalImgs; l++) {
    var thisImg = imgs[l],
      layerElems = thisImg.querySelectorAll(".atvImg-layer"),
      totalLayerElems = layerElems.length;

    if (totalLayerElems <= 0) {
      continue;
    }

    while (thisImg.firstChild) {
      thisImg.removeChild(thisImg.firstChild);
    }

    var containerHTML = d.createElement("div"),
      shineHTML = d.createElement("div"),
      shadowHTML = d.createElement("div"),
      layersHTML = d.createElement("div"),
      layers = [];

    thisImg.id = "atvImg__" + l;
    containerHTML.className = "atvImg-container";
    shineHTML.className = "atvImg-shine";
    shadowHTML.className = "atvImg-shadow";
    layersHTML.className = "atvImg-layers";

    for (var i = 0; i < totalLayerElems; i++) {
      var layer = d.createElement("div"),
        imgSrc = layerElems[i].getAttribute("data-img");

      layer.className = "atvImg-rendered-layer";
      layer.setAttribute("data-layer", i);
      layer.style.backgroundImage = "url(" + imgSrc + ")";
      layersHTML.appendChild(layer);

      layers.push(layer);
    }

    containerHTML.appendChild(shadowHTML);
    containerHTML.appendChild(layersHTML);
    containerHTML.appendChild(shineHTML);
    thisImg.appendChild(containerHTML);

    var w = thisImg.clientWidth || thisImg.offsetWidth || thisImg.scrollWidth;
    thisImg.style.transform = "perspective(" + w * 3 + "px)";

    if (supportsTouch) {
      win.preventScroll = false;

      (function (_thisImg, _layers, _totalLayers, _shine) {
        thisImg.addEventListener("touchmove", function (e) {
          if (win.preventScroll) {
            e.preventDefault();
          }
          processMovement(e, true, _thisImg, _layers, _totalLayers, _shine);
        });
        thisImg.addEventListener("touchstart", function (e) {
          win.preventScroll = true;
          processEnter(e, _thisImg);
        });
        thisImg.addEventListener("touchend", function (e) {
          win.preventScroll = false;
          processExit(e, _thisImg, _layers, _totalLayers, _shine);
        });
      })(thisImg, layers, totalLayerElems, shineHTML);
    } else {
      (function (_thisImg, _layers, _totalLayers, _shine) {
        thisImg.addEventListener("mousemove", function (e) {
          processMovement(e, false, _thisImg, _layers, _totalLayers, _shine);
        });
        thisImg.addEventListener("mouseenter", function (e) {
          processEnter(e, _thisImg);
        });
        thisImg.addEventListener("mouseleave", function (e) {
          processExit(e, _thisImg, _layers, _totalLayers, _shine);
        });
      })(thisImg, layers, totalLayerElems, shineHTML);
    }
  }

  function processMovement(e, touchEnabled, elem, layers, totalLayers, shine) {
    var bdst = bd.scrollTop || htm.scrollTop,
      bdsl = bd.scrollLeft,
      pageX = touchEnabled ? e.touches[0].pageX : e.pageX,
      pageY = touchEnabled ? e.touches[0].pageY : e.pageY,
      offsets = elem.getBoundingClientRect(),
      w = elem.clientWidth || elem.offsetWidth || elem.scrollWidth,
      h = elem.clientHeight || elem.offsetHeight || elem.scrollHeight,
      wMultiple = 320 / w,
      offsetX = 0.52 - (pageX - offsets.left - bdsl) / w,
      offsetY = 0.52 - (pageY - offsets.top - bdst) / h,
      dy = pageY - offsets.top - bdst - h / 2,
      dx = pageX - offsets.left - bdsl - w / 2,
      yRotate = (offsetX - dx) * (0.07 * wMultiple),
      xRotate = (dy - offsetY) * (0.1 * wMultiple),
      imgCSS = "rotateX(" + xRotate + "deg) rotateY(" + yRotate + "deg)",
      arad = Math.atan2(dy, dx),
      angle = (arad * 180) / Math.PI - 90;

    if (angle < 0) {
      angle = angle + 360;
    }

    if (elem.firstChild.className.indexOf(" over") != -1) {
      imgCSS += " scale3d(1.07,1.07,1.07)";
    }
    elem.firstChild.style.transform = imgCSS;

    shine.style.background =
      "linear-gradient(" +
      angle +
      "deg, rgba(255,255,255," +
      ((pageY - offsets.top - bdst) / h) * 0.4 +
      ") 0%,rgba(255,255,255,0) 80%)";
    shine.style.transform =
      "translateX(" +
      offsetX * totalLayers -
      0.1 +
      "px) translateY(" +
      offsetY * totalLayers -
      0.1 +
      "px)";

    var revNum = totalLayers;
    for (var ly = 0; ly < totalLayers; ly++) {
      layers[ly].style.transform =
        "translateX(" +
        offsetX * revNum * ((ly * 2.5) / wMultiple) +
        "px) translateY(" +
        offsetY * totalLayers * ((ly * 2.5) / wMultiple) +
        "px)";
      revNum--;
    }
  }

  function processEnter(e, elem) {
    elem.firstChild.className += " over";
  }

  function processExit(e, elem, layers, totalLayers, shine) {
    var container = elem.firstChild;

    container.className = container.className.replace(" over", "");
    container.style.transform = "";
    shine.style.cssText = "";

    for (var ly = 0; ly < totalLayers; ly++) {
      layers[ly].style.transform = "";
    }
  }
}

atvImg();

// slider

document.querySelectorAll(".slider").forEach((elem) => {
  let handle,
    width = elem.offsetWidth,
    slider = noUiSlider.create(elem, {
      start: 1500,
      connect: "lower",
      range: {
        min: 0,
        max: 2000
      },
      step: 100
    });

  let point = document.createElement("div");
  point.classList.add("point");

  let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("viewBox", "0 0 " + width + " 83");
  elem.appendChild(svg);

  let active = document.createElement("div");
  active.classList.add("active");
  active.appendChild(svg.cloneNode(true));

  elem.appendChild(active);

  let value = document.createElement("div");
  value.classList.add("value");

  point.appendChild(value);

  elem.querySelector(".noUi-handle").appendChild(point);

  let svgPath = new Proxy(
    {
      x: null,
      y: null,
      b: null,
      a: null
    },
    {
      set(target, key, value) {
        target[key] = value;
        if (
          target.x !== null &&
          target.y !== null &&
          target.b !== null &&
          target.a !== null
        ) {
          elem.querySelectorAll("svg").forEach((svg) => {
            svg.innerHTML = getPath(
              [target.x, target.y],
              target.b,
              target.a,
              width
            );
          });
        }
        return true;
      },
      get(target, key) {
        return target[key];
      }
    }
  );

  setCSSVars(elem);

  slider.on("start", (e) => {
    handle = elem.querySelector(".noUi-handle");
    elem
      .querySelector(".noUi-handle")
      .querySelector(".value").textContent = Math.round(e);
  });

  slider.on("update", (e) => {
    setCSSVars(elem);
    elem
      .querySelector(".noUi-handle")
      .querySelector(".value").textContent = Math.round(e);
  });

  slider.on("slide", (e) => {
    setCSSVars(elem);
    elem
      .querySelector(".noUi-handle")
      .querySelector(".value").textContent = Math.round(e);
  });

  slider.on("end", (e) => {
    gsap.to(handle, {
      "--y": 0,
      duration: 0.6,
      ease: "elastic.out(1.08, .44)"
    });
    gsap.to(svgPath, {
      y: 42,
      duration: 0.6,
      ease: "elastic.out(1.08, .44)"
    });
    handle = null;
  });

  svgPath.x = width / 2;
  svgPath.y = 42;
  svgPath.b = 0;
  svgPath.a = width;

  let onMove = (e) => {
    if (handle) {
      let laziness = 4,
        max = 24,
        edge = 52,
        currentLeft =
          handle.getBoundingClientRect().left -
          elem.getBoundingClientRect().left,
        handleWidth = handle.offsetWidth,
        handleHalf = handleWidth / 2,
        y =
          e.clientY -
          handle.getBoundingClientRect().top -
          handle.offsetHeight / 2,
        moveY =
          y - laziness >= 0
            ? y - laziness
            : y + laziness <= 0
            ? y + laziness
            : 0,
        modify = 1;

      moveY = moveY > max ? max : moveY < -max ? -max : moveY;
      modify =
        (currentLeft + handleHalf <= edge
          ? (currentLeft + handleHalf) / edge
          : 1) *
        (width - currentLeft - handleWidth <= edge
          ? (width - currentLeft - handleWidth) / edge
          : 1);
      modify = modify > 1 ? 1 : modify < 0 ? 0 : modify;

      svgPath.b = (currentLeft / 2) * modify;
      svgPath.a = width;
      svgPath.x = currentLeft + handleHalf;
      svgPath.y = moveY * modify + 42;

      handle.style.setProperty("--y", moveY * modify);
    }
  };

  document.addEventListener("pointermove", onMove);
});

function getPoint(point, i, a, smoothing) {
  let cp = (current, previous, next, reverse) => {
      let p = previous || current,
        n = next || current,
        o = {
          length: Math.sqrt(
            Math.pow(n[0] - p[0], 2) + Math.pow(n[1] - p[1], 2)
          ),
          angle: Math.atan2(n[1] - p[1], n[0] - p[0])
        },
        angle = o.angle + (reverse ? Math.PI : 0),
        length = o.length * smoothing;
      return [
        current[0] + Math.cos(angle) * length,
        current[1] + Math.sin(angle) * length
      ];
    },
    cps = cp(a[i - 1], a[i - 2], point, false),
    cpe = cp(point, a[i - 1], a[i + 1], true);
  return `C ${cps[0]},${cps[1]} ${cpe[0]},${cpe[1]} ${point[0]},${point[1]}`;
}

function getPath(update, before, after, width) {
  let smoothing = 0.16,
    points = [
      [0, 42],
      [before <= 0 ? 0 : before, 42],
      update,
      [after >= width ? width : after, 42],
      [width, 42]
    ],
    d = points.reduce(
      (acc, point, i, a) =>
        i === 0
          ? `M ${point[0]},${point[1]}`
          : `${acc} ${getPoint(point, i, a, smoothing)}`,
      ""
    );
  return `<path d="${d}" />`;
}

function setCSSVars(slider) {
  let handle = slider.querySelector(".noUi-handle");
  slider.style.setProperty("--slider-width", slider.offsetWidth + "px");
  slider.style.setProperty(
    "--active-width",
    handle.getBoundingClientRect().left -
      slider.getBoundingClientRect().left +
      handle.offsetWidth / 2
  );
}

              
            
!
999px

Console