Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="slider">
    <div class="ui-slider-handle heart">
      <svg viewBox="0 0 54 47" version="1.1">
  <path d="M37.2249 4.00001C31.6841 4.00002 26.9911 9.44788 26.9911 9.44788C26.9911 9.44788 23.2279 3.99999 17.1264 4C10.3077 4.00001 6.00019 9.10739 6 15.5767C5.99965 27.4696 26.9956 39 26.9956 39C26.9956 39 47.6322 28.5155 47.9911 15.5768C48.2091 7.7186 44.4039 4 37.2249 4.00001Z" fill="#FFFFFF"/>  
<path id="anim" d="" fill="#58CFEF"/>      
      </svg>
    </div>
    <div class="text">
        <span>Current Value</span>
        <strong>-</strong>
    </div>
</div>

<div class="slider">
    <div class="ui-slider-handle heart">
      <svg viewBox="0 0 54 47" version="1.1">
  <path d="M37.2249 4.00001C31.6841 4.00002 26.9911 9.44788 26.9911 9.44788C26.9911 9.44788 23.2279 3.99999 17.1264 4C10.3077 4.00001 6.00019 9.10739 6 15.5767C5.99965 27.4696 26.9956 39 26.9956 39C26.9956 39 47.6322 28.5155 47.9911 15.5768C48.2091 7.7186 44.4039 4 37.2249 4.00001Z" fill="#FFFFFF"/>  
<path id="anim" d="" fill="#58CFEF"/>      
      </svg>
    </div>
    <div class="text">
        <span>Current Value</span>
        <strong>-</strong>
    </div>
</div>
            
          
!
            
              $range: #58CFEF;
$rangeBG: rgba(#000, .2);
$smiley: #000;

.slider {
  margin-left: 120px;
    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;

$(".slider").each(function() {
    var self = $(this);
    var slider = self.slider({
        create: function() {
            self.find('.text strong').text(self.slider('value'));
            setPathData(self.find('.heart').find('svg path#anim'), self.slider('value'));
        },
        slide: function(event, ui) {
            self.find('.text strong').text(ui.value);
            setPathData(self.find('.heart').find('svg path#anim'), ui.value);
        },
        range: 'min',
        min: 1,
        max: step,
        value: 1,
        step: 1
    });
});

function setPathData(path, value) {
   if(value<=25){
      path.attr('d', 'M16 32C16 32 22.7034 32.9409 26 31.0001C29.2193 29.1048 35.3073 28 38 28.0001C40.6533 28.0001 41.3463 28.0001 41.5 28.0001L41.5 28.0001C41.5 28.0001 41.5875 28.0001 41.5 28.0001L27 40L16 32Z');
    } 
    else if(value>=26&value<50){
      path.attr('d', 'M28.0089 26.0866C35.0089 30.5866 41.0089 28 41.0089 28L27.0089 40.0866L10.0089 25.0866C10.0089 25.0866 10.5362 23.6339 16.0089 23.0866C21.0089 22.5866 25.2909 24.3394 28.0089 26.0866Z');
    }
    else if(value>=50&value<75){
      path.attr('d', 'M17.0178 23H9.51778L14.0178 28.5L27.0178 40L43.5178 25.5L47.0178 15C47.0178 15 37.0178 11.5 30.0178 17.9999C25.3256 22.3569 21.0489 23 17.0178 23Z');
    }
    else if(value>=75&value<100){
      path.attr('d', 'M28.0266 16.5C35.0266 21 47.0266 18.4134 47.0266 18.4134L39.0266 31L27.0266 40.0866L10.0266 25L7.02661 15.5C7.02661 15.5 10.5539 14.0473 16.0266 13.5C21.0266 13 25.3087 14.7527 28.0266 16.5Z');
    }
    else if(value=100){
      path.attr('d', 'M27.4352 37.6488C27.2888 37.7296 27.1594 37.8001 27.0482 37.86C26.9311 37.7924 26.7934 37.7122 26.6368 37.6199C26.0724 37.2871 25.2635 36.7971 24.2917 36.1717C22.346 34.9195 19.757 33.1306 17.1729 30.9796C14.5842 28.8248 12.0296 26.3305 10.1294 23.6724C8.22332 21.006 7.03544 18.2587 7.03552 15.5768C7.03561 12.5629 8.03746 9.92065 9.77585 8.04143C11.5062 6.17089 14.0168 5 17.1619 5C19.906 5 22.1573 6.22531 23.7579 7.50499C24.5542 8.14164 25.1733 8.77934 25.5917 9.25618C25.8004 9.49405 25.9578 9.69032 26.061 9.82426C26.1126 9.89119 26.1505 9.9424 26.1745 9.9753C26.1865 9.99175 26.1949 10.0036 26.1998 10.0105L26.2039 10.0162L26.2043 10.0168L26.2045 10.0172L26.2049 10.0177L26.9395 11.0812L27.7837 10.1013L27.7838 10.1012L27.784 10.1009L27.7843 10.1005L27.7847 10.1001L27.7918 10.092C27.7988 10.0841 27.8101 10.0712 27.8257 10.0537C27.857 10.0188 27.9054 9.96549 27.9699 9.8964C28.0991 9.75814 28.2925 9.5572 28.5428 9.31445C29.0443 8.82792 29.7685 8.17902 30.6553 7.53166C32.4537 6.21897 34.8018 5.00001 37.2605 5.00001C40.6891 5.00001 43.1265 5.88657 44.6934 7.53133C46.264 9.18 47.1319 11.7702 47.027 15.549C46.9446 18.5199 45.6951 21.4117 43.7787 24.1171C41.8639 26.8201 39.324 29.279 36.7628 31.365C34.2055 33.4478 31.6543 35.137 29.7399 36.3062C28.7838 36.8902 27.989 37.343 27.4352 37.6488Z');
    }
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console