<div id="emoji-slider"></div>
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!
<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();