Mood Slider | Custom Range Slider With CSS

<div class="container">
    <i class="material-icons" id="emoji">
        sentiment_satisfied
    </i>
    <input type="range" min="0" max="4" value="2" id="slider">
</div>

Setting up the body:

For the document body, we have used a dark blue color with hex code #101749. By default, the browser adds some margin and padding to the body. Therefore, to remove these, we set margin and padding to 0.

body {
    background-color: #101749;
    padding: 0;
    margin: 0;
}

Centering the Slider:

The container takes up the entire browser size. Hence, we set the height to 100vh i.e., 100 percent of total window height and width to 100vw i.e., 100 percent of overall window width. Now that our container covers up the entire window size, it becomes easier to center the slider and emoticon on all screen sizes. We have used Flex layout to center the content of the container. The flex-direction indicates how the contents should be inside the container. Here a value of ‘column’ indicated the content to the placed vertically.

.container {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

Styling the Slider:

We select the range slider by using the attribute selector. Before we style the range slider, we need to hide its default appearance by setting the ‘appearance’ attribute to none. Do note here that ‘appearance’ property is only available as Webkit and Moz; therefore, it should be tested carefully to check the browser compatibility. With the default look hidden, we set the dimensions for our slider as 90vw * 6px.

90vw indicates the slider takes up the 90% width of browser window size. Here, we use white as the background color for our slider because it provides a good contrast with the dark blue background. We need the slider to look sleek; we hence use smooth corners by setting the border-radius to 6 pixels. If you observe, you can see a blue outline that appears whenever you click the slider or try moving the slider thumb. To get rid of this blue outline, set the ‘outline’ attribute to none.

input[type="range"] {
    width: 90vw;
    height: 6px;
    -webkit-appearance:none;
    background-color: white;
    border-radius: 6px;
    outline: none;
    margin-top: 60px;
}

Styling the Slider Thumb:

To select and style the slider thumb, we use the ‘::-webkit-slider-thumb’ pseudo-element. Similar to the slider, we need to hide the default look of the thumb too. Hence, we use the appearance property with none value assigned to it. We create a square-shaped thumb with dimensions of 30 pixels. We use border-radius to shape the thumb to a perfect circle. The range slider thumb should appear lifted from the surface; hence, we use a little of a box-shadow.

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance:none;
     height: 30px;
     width: 30px;
     background-color: white;
     border-radius: 50%;
     box-shadow: 10px 15px 10px rgba(0,0,0,0.2);
}

Styling the Mood Emoticon:

Now that we have styled the range slider let us also style the feedback emoticon. There is not much to do with styling the emotion. Material Icons are styled similar to the font. So set the color to a lighter shade of blue with good contrast. To scale up the mood emoticon, we use a font-size of 130 pixels.

.material-icons {
    font-size: 130px;
    color: #3fcad8;
}

Let us start by creating three variables in JavaScript. The slider variable stores the range slider object with id ‘slider’ while the emoji variable stores the material icon object with id ‘ emoji’. We need these objects to manipulate them as per our needs. But you need not store them as a variable. They can be used directly too.

We create a variable called ’emoticons’ that contain the icons representing all the possible moods.Similarly, we need a no-name function that is triggered when the value of the range slider is changed. On a change in input, the content of ’emoji’ is changed to a different ’emoji’ depending on emoticon at the array position corresponding to the range slider value.

Suppose the user moves the slider to a value of ‘4’. Now the value at array position ‘4’ is ‘sentiment_satisfied_alt’ . Thus, the content of emoji is changed to the corresponding material icon with value ‘sentiment_satisfied_alt’.

var slider=document.getElementById("slider");
var emoji=document.getElementById("emoji");
var emoticons=["mood_bad", "sentiment_very_dissatisfied", 
    "sentiment_satisfied","sentiment_satisfied_alt",
    "sentiment_very_satisfied"
	];
slider.oninput=function(){
    emoji.innerHTML=emoticons[slider.value];
}