<div class="slider">
    <div class="ui-slider-handle heart">
      <svg viewBox="0 0 54 47" version="1.1">
        <defs>
          <clipPath id="clip-path">
            <path
              d="M27,38C19.2,33.5,6.5,25.2,7,15A10.5,10.5,0,0,1,15,5c5-1,9.3,2.1,12,6,2.7-3.9,7-7,12-6a10.5,10.5,0,0,1,8,10C47.5,25.2,34.8,33.5,27,38Z"
              fill="none" />
          </clipPath>
        </defs>
        <path
          d="M27,38C19.2,33.5,6.5,25.2,7,15A10.5,10.5,0,0,1,15,5c5-1,9.3,2.1,12,6,2.7-3.9,7-7,12-6a10.5,10.5,0,0,1,8,10C47.5,25.2,34.8,33.5,27,38Z"
          fill="#FFFFFF" />
        <path id="anim" d="M 54 47 L 0 47 L 0 28 C 0 28 16 36 27 31 C 40 24 54 31 54 31 Z" fill="#58CFEF" clip-path="url(#clip-path)" />
      </svg>
    </div>
    <div class="text">
      <span>Current Value</span>
      <strong>-</strong>
    </div>
  </div>

$range: #fff500;
$rangeBG: rgba(#000, .2);
$smiley: #000;

.slider {
    width: 320px;
    height: 2px;
    background: $rangeBG;
    border-radius: 2px;
    position: relative;
    .ui-slider-range {
        border-radius: 2px;
        background: $range;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
    }
    .ui-slider-handle {
        cursor: move;
        cursor: grab;
        cursor: -moz-grab;
        cursor: -webkit-grab;
        width: 35px;
        height: 35px;
        position: absolute;
        outline: none;
        top: 0;
        z-index: 1;
        transition: box-shadow .3s ease;
        opacity: 1;
        transform: translate(-50%, -12px); 
      &.heart {
              svg {
                //width: 15px;
                //height: 7px;
                position: absolute;
                left: 50%;
                bottom: 0px;
                margin: 0 0 0 -10px;
                path {
                    stroke-width: 2;
                    stroke: #58CFEF;
                    //fill: none;
                    stroke-linecap: round;
                }
            }   
      }
      
    
        &.ui-state-active {
            cursor: grabbing;
            cursor: -moz-grabbing;
            cursor: -webkit-grabbing;
        }
    }
    .text {
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        transform: translate(0, -80px);
        transition: transform .3s ease 0s;      
        strong {
            color: #000;
            font-weight: bold;
        }
    }
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
    &:before,
    &:after {
        box-sizing: inherit;
    }
}

// Center & dribbble
body {
    min-height: 100vh;
    font-family: Roboto, Arial;
    color: #ADAFB6;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
}

var step = 100;

var paths = [
  "M 54 47 L 0 47 L 0 28 C 0 28 16 36 27 31 C 40 24 54 31 54 31 Z",
  "M 54 47 L 0 47 L 0 30 C 0 30 14 18 27 26 C 46 36 54 18 54 18 Z",
  "M 54 47 L 0 47 L 0 22 C 0 22 21 26 27 21 C 45 6  54 22 54 22 Z",
  "M 54 47 L 0 47 L 0 19 C 0 19 14 9  27 16 C 41 24 54 15 54 15 Z",
  "M 54 47 L 0 47 L 0 0  C 0 0  14 6  27 0  C 40 -6 54 0  54 0  Z"
];

const morphPath = createMorphing(paths);

function createMorphing(paths) {
  const interpolators = [];
  paths.reduce((prev, cur) => {
    interpolators.push(polymorph.interpolate([prev, cur], {optimize: 'none', precision: 1}));
    return cur;
  });

  const segmentLen = 1 / interpolators.length;

  return function(progress) {
    const index = Math.min(Math.floor(interpolators.length * progress), interpolators.length - 1);
    const segmentMin = segmentLen * index;
    const segmentProgress = (progress - segmentMin) / segmentLen;
    return interpolators[index](segmentProgress);
  }
}

$(".slider").each(function() {
  var self = $(this);
  var $animatedPath = self.find(".heart").find("svg path#anim");

  var slider = self.slider({
    create: function() {
      self.find(".text strong").text(self.slider("value"));
    },
    slide: function(event, ui) {
      self.find(".text strong").text(ui.value);
      $animatedPath.attr("d", morphPath(ui.value / step));
    },
    range: "min",
    min: 1,
    max: step,
    value: 1,
    step: 1
  });
});