Vereist jQuery en jQuery UI voor de daadwerkelijke schuifregelaar. Het gezicht is gemaakt van elementen die in cirkels zijn gemaakt met een randradius. De mond, die het geluksniveau aangeeft, is een andere cirkel die zojuist op maat is bijgesneden met een ouderelement met verborgen overloop.
#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 ));