Erfordert jQuery und jQuery UI für den eigentlichen Schieberegler. Das Gesicht besteht aus Elementen, die zu Kreisen mit Randradius geformt wurden. Der Mund, der das Glücksniveau anzeigt, ist ein weiterer Kreis, der gerade mit einem übergeordneten Element mit verstecktem Überlauf auf die richtige Größe zugeschnitten wurde.
#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 ));