Manusia slider

 

      'Sliderman'

<div class="labu">
  <div class="morph-container">
    <div class="morph-head"></div>
    <div class="morph-body">
      <div class="l-arm">
        <div class="upper-arm">
          <div class="lower-arm"></div>
        </div>
      </div>
      <div class="r-arm">
        <div class="upper-arm">
          <div class="lower-arm"></div>
        </div>
      </div>
    </div>
    <div class="morph-legs">
      <div class="l-leg">
        <div class="upper-leg">
        </div>
      </div>
      <div class="r-leg">
        <div class="upper-leg">
          <div class="lower-leg"></div>
        </div>
      </div>
    </div>
  </div>
  <input type="range" min="0" max="100" value="0" class="slider" id="myRange">
</div>
<style>
.labu {
    display: flex;
    justify-content: center;
    background: #f3f3f3;
    margin: 0;
    font-family: sans-serif;
    width: 100%;
    height: 66vh;
    position: relative;
}
:root {
    --_size: min(400px, min(84vw, 64vh));
}
.morph-container, 
.morph-container * { 
    transition: all 0.2s ease-out;
}
.morph-container * { 
    background: #000;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: fit-content;
}
.morph-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 10%;
    margin: auto;
    width: 100%;
    height: 66vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 480px), screen and (max-height: 600px) {
    .morph-container {
        scale: 0.7;
    }
}
@media screen and (max-width: 400px), screen and (max-height: 480px) {
    .morph-container {
        scale: 0.5;
    }
}
.morph-head {
    width: 56px;
    height: 56px;
    border-radius: 100px;
    translate: 0% -175%;
}
.morph-body {
    width: 50px;
    height: 130px;
    border-radius: 100px;
}
.l-arm,
.r-arm {
    top: 0;
    bottom: unset;
}
.l-arm .upper-arm{
    width: 27px;
    height: 92px;
    border-radius: 100px;
    transform-origin: 50% 12%;
    translate: -50% 54%;
}
.l-arm .lower-arm{
    width: 24px;
    height: 75px;
    border-radius: 100px;
    transform-origin: 50% 12%;    
    translate: -10% 86%;
}
.r-arm .upper-arm{
    width: 27px;
    height: 60px;
    border-radius: 100px;
    transform-origin: 50% -60%;
    
    translate: -40% 135%;
}
.r-arm .lower-arm{
    width: 24px;
    height: 68px;
    border-radius: 100px;
    transform-origin: 50% 12%;
    translate: -10% 67%;
}
.morph-legs .l-leg{
    width: 30px;
    height: 164px;
    border-radius: 100px;
    transform-origin: 50% 0%;
    translate: -50% 94%;
}
.morph-legs .r-leg .upper-leg{
    width: 30px;
    height: 90px;
    border-radius: 100px;
    transform-origin: 50% 0%;    
    translate: -50% 105%;
}
.morph-legs .r-leg .upper-leg .lower-leg{
    width: 24px;
    height: 100px;
    border-radius: 100px;
    transform-origin: 50% 0%;   
    translate: 10% 85%;
}
.slider {
  position: absolute;
    bottom: 0; 
}
input[type=range] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5%;
    margin: auto;
    width: var(--_size);
    height: fit-content;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
    background: #dddddd22;
    box-shadow: 
    0 0 2px 2px #bbb8,
    0 0 0px 1px #bbb8,
    inset 0 0 4px 1px #fff8,
    inset 0 0 5px 5px #bbb8;
    height: 2rem;
    border-radius: 20px;
    overflow: hidden;
}
input[type="range"]::-moz-range-track {
    background: #dddddd22;
    box-shadow: 
    0 0 2px 2px #bbb8,
    0 0 0px 1px #bbb8,
    inset 0 0 4px 1px #fff8,
    inset 0 0 5px 5px #bbb8;
    height: 2rem;
    border-radius: 20px;
    overflow: hidden;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 30px;
    height: 100%;
    border-radius: 100px;
    background: #9fc5e8;
    scale:1;
    transition: all 0.2s ease-in-out;
    box-shadow: 
    0px 2px 3px 0px #444444,
    inset 0 0 4px 1px #ffffff;
}
input[type=range]::-webkit-slider-thumb:hover {
    box-shadow: 
    0px 2px 4px 1px #3f3f3f,
    inset 0 0 4px 1px #ffffff;
}
</style>
<script>
var slider = document.getElementById("myRange");
var morphContainer = document.querySelector(".morph-container");
var morphHead = document.querySelector(".morph-head");
var morphArmLeftUp = document.querySelector(".l-arm .upper-arm");
var morphArmLeftLow = document.querySelector(".l-arm .lower-arm");
var morphArmRightUp = document.querySelector(".r-arm .upper-arm");
var morphArmRightLow = document.querySelector(".r-arm .lower-arm");
var morphLegRightUp = document.querySelector(".r-leg .upper-leg");
var morphLegRightLow = document.querySelector(".r-leg .lower-leg");
slider.oninput = function() {
  var percentage = this.value;
  morphContainer.style.rotate = `${sliderFunction(percentage, 0, 45)}deg`;
  morphContainer.style.translate = `${sliderFunction(percentage, 0, 7)}% 0%`;
  morphHead.style.translate = `${sliderFunction(percentage, 0, 38)}% -175%`;
  morphArmLeftUp.style.rotate = `${sliderFunction(percentage, 0, 75)}deg`;
  morphArmLeftLow.style.rotate = `${sliderFunction(percentage, 0, -75)}deg`;
  morphArmRightUp.style.rotate = `${sliderFunction(percentage, 0, -63)}deg`;
  morphArmRightLow.style.rotate = `${sliderFunction(percentage, 0, -88)}deg`;
  morphLegRightUp.style.rotate = `${sliderFunction(percentage, 0, -95)}deg`;
  morphLegRightLow.style.rotate = `${sliderFunction(percentage, 0, 119)}deg`;
}
function sliderFunction(percentage, startNum, endNum) {
  return endNum + ((100 - percentage) / 100) * (startNum - endNum);
}
</script>

Rujukan CSS & JS di codepen.io/RAFA3L/pen/KKrVBQg