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
});
Reference URL
