Gerçek kaydırıcı için jQuery ve jQuery UI gerektirir. Yüz, kenarlık yarıçaplı daireler haline getirilmiş öğelerden yapılmıştır. Mutluluk seviyesini gösteren ağız, gizli taşması olan bir ana öğe ile boyutlandırılmış başka bir dairedir.
#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 ));