Smiley Slider

Requires jQuery and jQuery UI for the actual slider. 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.

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

<div id="face">
	<div id="mouth-box">
		<div id="mouth" class="straight"></div>
	</div>
</div>
#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;
}
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
});

Comments

  1. User Avatar
    MechanisM
    Permalink to comment#

    ehhh so want it but don’t want to load big jquery-ui lib..

  2. User Avatar
    Kenny
    Permalink to comment#

    Akismet remake potentially?

    Either way it is really cool, I was wondering how that could be achieved..

  3. User Avatar
    Jörn
    Permalink to comment#

    demo is not working in current chrome 21

  4. User Avatar
    Jason
    Permalink to comment#

    Updated with new version of Jquery UI and css (works in latest Chrome and Firefox).

  5. User Avatar
    D
    Permalink to comment#

    Demo doesn’t work on iPad

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag