HomeJavascriptMood Slider | Custom Range Slider With CSS

Mood Slider | Custom Range Slider With CSS

To collect numerical input from the user within a given range, we use the range slider. We can manipulate the value of this range slider using the some simple Javascript. Even though Range sliders are widely used input types in HTML, many of us struggle with styling them. This is mainly because styling the range slider involves hiding the default look of the range slider followed by customizing the appearance of the slider along with the slider thumb..

In today’s tutorial, we will create a mood slider that will collect user feedback in the form of an emoticon expressing satisfaction. Here the user can choose between 5 Moods, each represented with Material Icons from Google.

The leftmost value indicates the least satisfaction, while the rightmost value indicates the user being entirely satisfied. This range slider is super-easy to customize. Let us start by adding the Material Icon CDN to our HTML document. For that copy and paste the code below in between the <head> tag of your HTML document.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

HTML

Now let us move on to the actual coding. We start by creating a container to wrap and center our range slider and the emoticon. Next, we add a material icon called ‘satisfied’ inside this container. The range slider has a minimum value of 0. Similarly, we also need to assign some value to the maximum attribute. In this case, we assign it to ‘4’ because we will need a total of 5 values[0 to 4]. The attribute ‘value’ represents the default value of the range slider. We need the slider thumb at the ‘middle’, indicating moderate satisfaction.
That’s it for the HTML section.

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

CSS

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;
}

Javascript

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];
}

That’s it for this tutorial. I hope you guys enjoyed this fun way to collect user feedback using simple range slider. You can stay updated with latest tutorials by subscribing us on Youtube. You can also find us on Instagram.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

seventeen + 4 =

Most Popular