Requiere jQuery y jQuery UI para el control deslizante real. La cara está hecha de elementos hechos en círculos con radio de borde. La boca, que indica el nivel de felicidad, es otro círculo recién recortado al tamaño con un elemento principal con desbordamiento oculto.
#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 ));