How to Make Smiley Slider

This slider requite jQuery and jQuery UI. The face is made from elements made into circles with border-radius. The mouth, indicating happiness level, is another circle just cropped down to size with a parent element with hidden overflow.

HTML Code:

 
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
  
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">

<div id="slider"></div>

<div id="face">
 <div id="mouth-box">
  <div id="mouth" class="straight"></div>
 </div>
</div>

CSS Code:

    body { padding: 30px; }
    
    #face { width: 100px; height: 100px; position: relative;
      border: 2px solid black; border-radius: 50px; margin: 20px auto; }
    
    #face:before, #face:after {
      position: absolute;
      content: "";
      width: 10px;
      height: 10px;
      top: 30px;
      border-radius: 10px;
      background: black; 
    }
    #face:before {
      left: 30px; 
    }
    #face:after {
      left: 60px; 
    }
    
    #mouth-box {
      width: 60px; height: 20px; left: 20px; top: 60px; overflow: hidden; background: white; 
      position: relative; 
    }
    
    #mouth { width: 60px; height: 60px; border-radius: 30px; 
      border: 2px solid black; position: absolute; top: 0; left: 0; }
    
    #mouth.straight {
      height: 0px !important;
      top: 7px !important;
      border-width: 1px;
      bottom: auto !important;
    }

Javascript Code:

var newWidth,
    mouth = $("#mouth");

$( "#slider" ).slider({
   slide: function(event, ui) {
     
     if (ui.value > 51 ) {
       
       mouth.css({ bottom: 0, top: "auto" });
       
       newWidth = 160 - ui.value;
       
       mouth.css({
         width           : newWidth,
         height          : newWidth,
         "border-radius" : newWidth / 2,
         left            : -25 + ((ui.value-50) / 2)
       })
       .removeClass("straight");
       
     } else if ((ui.value > 48) && (ui.value < 52)) {
       
       mouth.addClass("straight");
       
     }  else {
       
       mouth.css({ top: 0, bottom: "auto" });
       
       newWidth = ui.value + 60;
       
       mouth.css({
         width           : newWidth,
         height          : newWidth,
         "border-radius" : newWidth / 2,
         left            : -ui.value / 2
       })
       .removeClass("straight");
       
     }
     
   },
  value: 50
});

Check demo here