Nepieciešams jQuery un jQuery lietotāja interfeiss faktiskajam slīdnim. Seja ir izgatavota no elementiem, kas izgatavoti apļos ar robežas rādiusu. Mute, kas norāda laimes līmeni, ir vēl viens aplis, kas tikko samazināts līdz izmēram ar vecāku elementu ar slēptu pārplūdi.
#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 ));