Learn how to create a Fahrenheit to Celsius range slider using HTML, CSS, and JavaScript. Convert temperatures with ease on your web page.
Table of Contents
Welcome to our comprehensive tutorial on creating a Fahrenheit to Celsius range slider using HTML, CSS, and JavaScript. In this guide, we will walk you through the process of building an interactive temperature converter that allows users to effortlessly convert temperatures between Fahrenheit and Celsius on a web page.
Temperature conversion is a common requirement in various web applications, such as weather websites, cooking websites, or educational tools. By incorporating a range slider into your web page, you can provide an intuitive and engaging user interface for temperature conversion.
Throughout this tutorial, we will cover all the necessary steps, from setting up the HTML structure to implementing the conversion functionality. Even if you have limited experience with HTML, CSS, and JavaScript, fear not! We will explain each concept in detail and provide code snippets to guide you along the way.
Understanding the fundamentals of Fahrenheit and Celsius temperature scales is crucial before we begin the implementation. Fahrenheit is commonly used in the United States and a few other countries, while Celsius is the standard metric system used worldwide. Knowing how to convert temperatures between these two scales will enable us to create an accurate and reliable conversion mechanism.
By the end of this tutorial, you will have a fully functional Fahrenheit to Celsius range slider that not only converts temperatures but also provides a visually appealing and user-friendly experience. So, let's dive in and start building your own Fahrenheit to Celsius range slider using HTML, CSS, and JavaScript!
Join My Telegram Channel to Download the Projects Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our Fahrenheit to Celsius range slider.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Here's a breakdown of the code:
1. <!DOCTYPE html>: This line declares the document type as HTML5, which is the latest version of HTML.
2. <html lang="en">: This tag represents the root element of the HTML document and specifies the language of the document as English.
3. <head>: This section contains meta information about the document and includes external resources such as stylesheets and scripts.
4. <title>Fahrenheit to Celsius Range Slider</title>: This line sets the title of the webpage, which is displayed on the browser's title bar or tab.
5. <meta charset="UTF-8" />: This meta tag specifies the character encoding for the document as UTF-8, which is a widely used character encoding for Unicode.
6. <meta name="viewport" content="width=device-width" />: This meta tag sets the viewport properties, allowing the webpage to be rendered properly on different devices with varying screen sizes.
7. <link rel="stylesheet" href="styles.css" />: This line links an external CSS file named "styles.css" to the HTML document, which is used to define the styling rules for the elements.
8. </head>: The closing tag for the <head> section.
9. <body>: This section contains the visible content of the webpage.
10. <h1>Fahrenheit to Celsius</h1>: This heading element (<h1>) displays the text "Fahrenheit to Celsius" as the main heading of the webpage.
11. <hr/>: This self-closing tag represents a horizontal rule, which creates a visual separation line on the webpage.
12. <div class="slidecontainer">: This <div> element is used to group and style a section of content. The class attribute assigns the CSS class "slidecontainer" to this <div>, allowing specific styling to be applied to it.
13. <h2 id="fahrenheit"></h2>: This heading element (<h2>) with the id attribute "fahrenheit" serves as a placeholder to display the Fahrenheit value selected by the range slider.
14. <input type="range" min="0" max="100" value="50" class="slider" id="myRange">: This <input> element creates a range slider with the following attributes:
- type="range": Specifies that this is a range slider input type.
- min="0": Sets the minimum value of the range to 0.
- max="100": Sets the maximum value of the range to 100.
- value="50": Sets the initial value of the range slider to 50.
- class="slider": Assigns the CSS class "slider" to this range slider input.
- id="myRange": Assigns the ID "myRange" to this range slider input, which can be used to manipulate it with JavaScript or CSS.
15. <h2 id="celsius"></h2>: This heading element (<h2>) with the id attribute "celsius" serves as a placeholder to display the Celsius value corresponding to the selected Fahrenheit value.
16. </div>: The closing tag for the <div> element with the class "slidecontainer".
17. <script src="script.js"></script>: This line includes an external JavaScript file named "script.js" in the HTML document. The JavaScript code in this file can manipulate the webpage's elements and provide functionality.
18. </body>: The closing tag for the <body> section.
19. </html>: The closing tag for the root <html> element, indicating the end of the HTML document.
This is the basic structure of our Fahrenheit to Celsius range slider using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the Fahrenheit to Celsius range slider is in place, the next step is to add styling to the Fahrenheit to Celsius range slider using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our slider.
Let's go through each part:
1. The universal selector * selects all elements in the document.
- margin: 0; sets the margin of all elements to 0.
- padding: 0; sets the padding of all elements to 0.
- box-sizing: border-box; sets the box-sizing property of all elements to border-box. This ensures that the total width and height of an element include its padding and border, rather than just the content.
2. The body selector applies styles to the body element of the page.
- min-height: 100vh; sets the minimum height of the body to 100% of the viewport height, ensuring that the body fills the entire viewport.
- overflow: hidden; hides any content that overflows the body element.
- display: flex; enables flexbox layout on the body element.
- justify-content: center; horizontally centers the flex items (content) within the body.
- align-items: center; vertically centers the flex items within the body.
- flex-direction: column; arranges the flex items vertically in a column.
- font-family: "Montserrat", sans-serif; sets the font family for the body text to Montserrat, a sans-serif font.
3. The hr selector styles horizontal ruler elements.
- width: 40%; sets the width of the ruler to 40% of its container.
- height: 4px; sets the height of the ruler to 4 pixels.
- background: linear-gradient(0.25turn, #0096d0, #1d4e9d, #284995, #463e81, #762c61, #b91435, #e3051a, #940c22); applies a linear gradient background to the ruler, transitioning through multiple colors.
- border: none; removes the border around the ruler.
- margin-bottom: 1em; adds a bottom margin of 1em (the height of the current font) to the ruler.
4. The .slidecontainer selector styles a container element that holds sliders.
- width: 70%; sets the width of the container to 70% of its parent container.
- display: flex; enables flexbox layout on the container.
- flex-direction: column; arranges the child elements in a column.
- justify-content: center; centers the child elements horizontally within the container.
- align-items: center; centers the child elements vertically within the container.
- gap: 50px; adds a gap of 50 pixels between the child elements.
5. The .slidecontainer .slider selector styles the slider element within the slidecontainer.
- -webkit-appearance: none; and appearance: none; remove the default styling of the slider in different browsers.
- width: 100%; sets the width of the slider to 100% of its container.
- height: 25px; sets the height of the slider to 25 pixels.
- outline: none; removes the outline when the slider is in focus.
- opacity: 0.7; sets the initial opacity of the slider to 0.7 (70%).
- -webkit-transition: 0.2s; and transition: opacity 0.2s; specify a smooth transition effect for the opacity property.
- background: linear-gradient(0.25turn, #0096d0, #1d4e9d, #284995, #463e81, #762c61, #b91435, #e3051a, #940c22); applies a linear gradient background to the slider, transitioning through multiple colors.
- border-radius: 25px; sets the border radius of the slider to create rounded ends.
6. The .slidecontainer .slider:hover selector styles the slider when it is being hovered over.
- opacity: 1; sets the opacity of the slider to 1 (100%) when hovered, making it fully visible.
7. The .slidecontainer .slider::-webkit-slider-thumb selector styles the thumb (handle) of the slider in WebKit browsers (such as Chrome, Safari).
- -webkit-appearance: none; and appearance: none; remove the default styling of the thumb.
- width: 40px; sets the width of the thumb to 40 pixels.
- height: 40px; sets the height of the thumb to 40 pixels.
- background: #222; sets the background color of the thumb to a dark gray (#222).
- cursor: pointer; changes the cursor to a pointer (hand) when hovering over the thumb.
- border-radius: 50%; sets the border radius of the thumb to make it circular.
8. The .slidecontainer .slider::-moz-range-thumb selector styles the thumb (handle) of the slider in Mozilla Firefox.
- width: 40px; sets the width of the thumb to 40 pixels.
- height: 40px; sets the height of the thumb to 40 pixels.
- background: #222; sets the background color of the thumb to a dark gray (#222).
- cursor: pointer; changes the cursor to a pointer (hand) when hovering over the thumb.
- border-radius: 50%; sets the border radius of the thumb to make it circular.
This will give our Fahrenheit to Celsius range slider an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: "Montserrat", sans-serif;
}
hr {
width: 40%;
height: 4px;
background: linear-gradient(0.25turn, #0096d0, #1d4e9d, #284995, #463e81, #762c61, #b91435, #e3051a, #940c22);
border: none;
margin-bottom: 1em;
}
.slidecontainer {
width: 70%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 50px;
/* The slider itself */
}
.slidecontainer .slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 25px;
outline: none;
opacity: 0.7;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
background: linear-gradient(0.25turn, #0096d0, #1d4e9d, #284995, #463e81, #762c61, #b91435, #e3051a, #940c22);
border-radius: 25px;
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
}
.slidecontainer .slider:hover {
opacity: 1;
}
.slidecontainer .slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 40px;
height: 40px;
background: #222;
cursor: pointer;
border-radius: 50%;
}
.slidecontainer .slider::-moz-range-thumb {
width: 40px;
height: 40px;
background: #222;
cursor: pointer;
border-radius: 50%;
} Step 3 (JavaScript Code):
Finally, we need to create a temperature conversion function in JavaScript. Here's a breakdown of what the code does:
1. The first line of code retrieves an element from the HTML document with the ID "myRange" and assigns it to the variable slider. This element is likely an input element of type "range" that allows the user to slide along a scale.
2. The second line retrieves an element from the HTML document with the ID "fahrenheit" and assigns it to the variable fahrenheitOutput. This element is probably a placeholder where the Fahrenheit temperature value will be displayed.
3. The third line retrieves an element from the HTML document with the ID "celsius" and assigns it to the variable celsiusOutput. This element serves as a placeholder for displaying the Celsius temperature value.
4. The fourth line sets the initial value of the fahrenheitOutput element by assigning it the current value of the slider variable (converted to a string) concatenated with the string "° F". This will display the Fahrenheit temperature corresponding to the initial position of the slider.
5. The fifth line calculates the corresponding Celsius temperature value based on the initial position of the slider and assigns it to the celsiusOutput element. It does this by subtracting 32 from the Fahrenheit value, multiplying it by 5/9 (the conversion factor from Fahrenheit to Celsius), and then rounding it to 0 decimal places using the toFixed(0) method. The result is concatenated with the string "° C" and assigned to the celsiusOutput element, displaying the initial Celsius temperature.
6. The next block of code defines an oninput event handler for the slider element. This event handler is triggered whenever the user interacts with the slider by moving it.
7. Inside the event handler function, the first line updates the fahrenheitOutput element with the current value of the slider (converted to a string) concatenated with the string "° F". This ensures that the Fahrenheit temperature value is dynamically updated as the user moves the slider.
8. The second line calculates the updated Celsius temperature value based on the new position of the slider. It follows the same formula as before, subtracting 32 from the Fahrenheit value, multiplying it by 5/9, rounding it to 0 decimal places, and concatenating it with the string "° C". The resulting Celsius temperature is then assigned to the celsiusOutput element, updating it dynamically as the user moves the slider.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
var slider = document.getElementById("myRange");
var fahrenheitOutput = document.getElementById("fahrenheit");
var celsiusOutput = document.getElementById("celsius");
fahrenheitOutput.innerHTML = slider.value + "° F";
celsiusOutput.innerHTML = ((Number(slider.value) - 32) * (5/9)).toFixed(0) + "° C";
slider.oninput = function () {
fahrenheitOutput.innerHTML = this.value + "° F";
celsiusOutput.innerHTML = ((Number(this.value) - 32) * (5/9)).toFixed(0) + "° C";
};Final Output:
Conclusion:
Congratulations! You have successfully completed the creation of a Fahrenheit to Celsius range slider using HTML, CSS, and JavaScript. You have learned the essential concepts and techniques needed to build an interactive temperature converter that enhances the user experience on your web page.
Throughout this tutorial, you have gained knowledge on various aspects of web development, including HTML structure, CSS styling, and JavaScript functionality. By combining these technologies, you have created a dynamic slider that allows users to convert temperatures between Fahrenheit and Celsius effortlessly.
The slider provides a seamless and intuitive interface for users to input a Fahrenheit temperature and instantly see the corresponding Celsius value. This interactive feature enhances the usability of your web page, especially in scenarios where temperature conversion is necessary, such as weather-related applications or cooking websites.
However, this is just the beginning of your journey in web development. Now that you have a solid foundation in creating interactive components, you can explore further enhancements and customization options for your range slider. Consider experimenting with different styles, colors, or additional features to make it uniquely fit your website's design and functionality.
Remember to keep practicing and expanding your knowledge by exploring other web development concepts and technologies. The possibilities are endless, and with dedication and continuous learning, you can create even more impressive and innovative web experiences.
We hope this tutorial has been informative and has empowered you to create engaging and interactive elements within your web projects. If you have any questions or need further assistance, don't hesitate to seek help from online communities or references related to web development.
Thank you for joining us on this journey to create a Fahrenheit to Celsius range slider. Best of luck with your future web development endeavors!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
