Emoji !!! 😎

Here we have some fun with Emoji! There's not a lot of CSS in this slider, instead the styling is done mostly with javascript. — Be sure to check out the css and then the js to see how it's done!

</>
{;}
($)

What's your favourite animal?!

                <div id="emoji-slider"></div>
            
                #emoji-slider {
                  height: 5px;
                  margin-top: 100px; }
                  
                  #emoji-slider .ui-slider-handle {
                    top: -6px;
                    height: 16px;
                    width: 16px;
                    transform: rotateZ(45deg); }
                  
                  #emoji-slider .ui-slider-pip {
                    top: -50px;
                    margin-left: -1.2em; }
                  
                  #emoji-slider .emoji {
                    max-height: 2em;
                    transform: scale(0.9);
                    transition: transform 0.2s ease-out; }
                    @media screen and (max-width: 950px) {
                      #emoji-slider .emoji {
                        transform: scale(0.7); } }
                  
                  #emoji-slider .ui-slider-pip-selected .emoji {
                    transform: scale(1.3) translateY(-5px); }
                    @media screen and (max-width: 950px) {
                      #emoji-slider .ui-slider-pip-selected .emoji {
                        transform: scale(1.1) translateY(-5px); } }
                  
                  #emoji-slider .ui-slider-line {
                    display: none; }


            
                // store the array of animals for use later in the slider
                // taken from apps.timwhitlock.info <3
                var emoji = [ "🐌", "🐐", "🐘", "🐙", "🐞", "🐠", "🐈", "🐕", "🐦", "🐬", "🐖", "🐇", "🐅", "🐃" ],
                    // my favourite is a dog! of course!
                    mine = "🐕";

                $("#emoji-slider")
                    
                    // create a slider with 14 values (0-13)
                    // and the default is a cat, obviously! ( emoji[6] === "🐈" )
                    .slider({
                        max: 13,
                        value: 6
                    })
                    
                    // now activate the pips and set it to have labels for all
                    // items, and then set the labels to the array of animals from earlier
                    .slider("pips", {
                        rest: "label",
                        labels: emoji
                    })
                    
                    // whenever the slider changes value, we want to update the
                    // text above the slider with a kawaii message!
                    .on("slidechange", function( e, ui ) {
                            
                            // save the messages into variables
                            var mineIs = ( emoji[ui.value] === mine ) ? "Mine too!! 😂✌" : "But mine is a " + mine + "! 😞",
                                yoursIs = "Oh golly gosh, your favourite animal is a " + emoji[ui.value] + "? — " + mineIs;
                            
                            // fade the question out quickly (using css)
                            $(".emoji-slider-question")
                                .css({ opacity: 0 });
                            
                            // then fade it back in with the new message
                            // and use a custom function to display the emoji.
                            setTimeout(function() {

                                $(".emoji-slider-question")
                                    .html( yoursIs )
                                    .twemoji()
                                    .css({ opacity: 1 });

                            }, 200 );

                    
                    });

                // lastly after the slider is initialised we need to
                // tell it to display out emoji on every label, but this
                // is a custom function, you can find it at github
                $("#emoji-slider .ui-slider-label").twemoji();