Emoji Mood Slider with HTML CSS and JavaScript

In this tutorial we will see how to create Emoji Mood Slider with HTML CSS and JavaScript. Pure CSS and JavaScript is used for this purpose, complete code is given.

Table of Contents

HTML Code

Take a look at the HTML code given below.


<div class="container">
<div class="emoji" id="emoji">😟</div>   
<p class="mood" id="mood">Worried</p>
<input type="range" min="0" max="100" value="10" class="emoji-slider" id="range">    
</div>

CSS Code

CSS code is given below.


<style>
body
{
    margin: 0;
    padding: 0;
    background-color: #3498DB;
    font-family: 'Barlow Condensed' , sans-serif;
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
}
.container
{
    width: 100%;
    max-width: 250px;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0px 0px 3px 1px #777;
}
.emoji
{
    font-size: 120px;
    margin: 0px;
    text-align: center;
    text-shadow: 0px 0px 4px #555;
}
.mood
{
    text-align: center;
    margin: 0px 0px 20px 0px;
    font-size: 20px;
    font-weight: bold;
}
.emoji-slider
{
    -webkit-appearance:none;
    appearance:none;
    width: 100%;
    height: 10px;
    max-width: 400px;
    background-color: #ccc;
    margin: 0;
    padding: 0;
    outline: none;
    cursor: pointer;
}
</style>

JavaScript Code

Take a look at the JavaScript Code given below.


<script>
var emoji = document.getElementById('emoji');
var mood = document.getElementById('mood');
var sliderValue = document.getElementById('range');

sliderValue.oninput = function()
{
var value = this.value;
if(value <=20)
{
    emoji.innerHTML = '😟';
    mood.innerHTML = 'Worried';
}
    
else if(value <=40)
{
    emoji.innerHTML = '😡';
    mood.innerHTML = 'Sad';
}
    
else if(value <=60)
{
    emoji.innerHTML = '😔';
    mood.innerHTML = 'Confused';
}  
    
else if(value <=80)
{
    emoji.innerHTML = '😊';
    mood.innerHTML = 'Happy';
}  
    
else if(value <=100)
{
    emoji.innerHTML = '😂';
    mood.innerHTML = 'Joyful';
}     
}
</script>

Demo

Check Demo

Video Tutorial

Watch our video tutorial on Emoji Mood Slider with HTML CSS and JavaScript.