Image Comparison Slider in HTML, CSS and JavaScript

-

 Image Comparison Slider in HTML, CSS and JavaScript

Get Free JV Source Code: Image Comparison Slider

Do you want to implement a feature on your website that will enable someone to compare two images simultaneously? Look no further! So in this article, I will share with you Free Source Codes of an Image Comparison Slider in HTML, CSS, JavaScript.

Here, I found that this slider is good for using the ‘before and after’, product demonstrations and such like. This Image Comparison Slider can be helpful for a developer who has his/her own project or when one develops a website for a client.

As such, I am going to give you detailed descriptions of how to add this feature to your site hassle free in this article.

Looking for free source codes for stunning image galleries? Explore these amazing options now!

https://jvcodes.com/3d-rotating-image-gallery-html-css-javascript/https://jvcodes.com/dynamic-image-gallery-in-html-css/https://jvcodes.com/modern-image-gallery-in-html-css/https://jvcodes.com/responsive-image-gallery-in-html-css/https://jvcodes.com/popup-image-gallery-in-html-css-javascript/

Features

The Image Comparison Slider in HTML, CSS, JavaScript comes with several powerful features:

  • Responsive Design: The slider is fully responsive and support all the common devices such as the PCs, tablets, or the mobile phones.
  • Cross-Browser Compatibility: It is compatible with most of the leading web browsers, without any compatibility issues.
  • Easy Integration: The code is quite basic and can be easily implemented in any content management system such as Word Press, Joomla, and even in HTML based websites.
  • Customizable: All the images, sliders, and other aspects of the theme can be easily changed to fit the overall design of the website.

Technologies Used

The Image Comparison Slider is built using the following technologies:

  • HTML
  • CSS
  • JavaScript

Video Preview

Here’s a quick preview of how the Image Comparison Slider works:

Steps to Build Image Slider

Follow these simple steps to build the Image Comparison Slider in HTML, CSS, JavaScript:

  • Create a folder: Let’s name it Image Slider.
  • Create an images folder: All the images should be stored in this folder.
  • Create index.html: This file will possess the HTML code that will define the appearance of the slider.
  • Create style.css: This file will hold all the CSS styling for the slider.
  • Create script.js: Here will be placed the JavaScript code that will turn the slider.

To implement code you may need VS Code Installation.

HTML

Here is the HTML code for your index.html file.

<!DOCTYPE html><!-- Created By JV Source Codes at www.jvcodes.com --><html lang="en" dir="ltr">  <head>    <meta charset="utf-8">    <title>Image Comparison Slider | JV Codes</title>    <!-- Linking to the external CSS file for styling -->    <link rel="stylesheet" href="style.css">  </head>  <body>    <!-- Main wrapper containing the image comparison slider -->    <div class="wrapper">      <!-- Container holding both images -->      <div class="images">        <div class="img-1"></div> <!-- First image container -->        <div class="img-2"></div> <!-- Second image container (overlay) -->      </div>            <!-- Slider control for adjusting image comparison -->      <div class="slider">        <!-- Drag line indicating the comparison boundary -->        <div class="drag-line">          <span></span> <!-- Circular handle for dragging -->        </div>        <!-- Range input for controlling the slider -->        <input type="range" min="0" max="100" value="50">      </div>    </div><!-- JavaScript to handle slider functionality -->    <script src="script.js"></script>  </body></html>

CSS

Here is the complete code for style.css file to style the slider.

/* Reset margin and padding for all elements, and set box-sizing to border-box */* {  margin: 0;  padding: 0;  box-sizing: border-box;}/* Set the grid layout for the HTML and body, centering content and setting background */html, body {  display: grid;  height: 100%;  place-items: center;  background: #efefef;}/* Wrapper for the image container with specific dimensions and styling */.wrapper {  position: relative;  height: 500px;  width: 750px;  overflow: hidden;  background: #fff;  border: 7px solid #fff;  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);}/* Container for holding images side by side */.wrapper .images {  height: 100%;  width: 100%;  display: flex;}/* Styling for the first image, covering the entire wrapper */.wrapper .images .img-1 {  height: 100%;  width: 100%;  background: url("images/pet5.jpg") no-repeat;  background-size: cover; /* Ensure the image covers the entire area */}/* Styling for the second image, positioned on the left half with grayscale filter */.wrapper .images .img-2 {  position: absolute;  height: 100%;  width: 50%;  filter: grayscale(80%);  background: url("images/pet5.jpg") no-repeat;  background-size: cover; /* Ensure the image covers the entire area */}/* Slider container positioned at the top, full width, with high z-index */.wrapper .slider {  position: absolute;  top: 0;  width: 100%;  z-index: 99;}/* Slider input styling, removing outline and appearance for custom styling */.wrapper .slider input {  width: 100%;  outline: none;  background: none;  -webkit-appearance: none; /* Remove default slider appearance in WebKit browsers */}/* Custom styling for the slider thumb (draggable element) */.slider input::-webkit-slider-thumb {  height: 486px;  width: 3px;  background: none;  -webkit-appearance: none; /* Remove default thumb appearance */  cursor: col-resize; /* Cursor indicating column resizing */}/* Line indicating draggable boundary within the slider */.slider .drag-line {  width: 3px;  height: 486px;  position: absolute;  left: 49.85%; /* Center the drag line */  pointer-events: none; /* Prevent mouse events from affecting this element */}/* Top and bottom background sections of the drag line */.slider .drag-line::before,.slider .drag-line::after {  position: absolute;  content: "";  width: 100%;  height: 222px;  background: #000000;}/* Position the top background section */.slider .drag-line::before {  top: 0;}/* Position the bottom background section */.slider .drag-line::after {  bottom: 0;}/* Centered circular drag handle */.slider .drag-line span {  height: 42px;  width: 42px;  border: 3px solid #000000;  position: absolute;  top: 50%;  left: 50%;  border-radius: 50%;  transform: translate(-50%, -50%);}/* Arrow styling within the drag handle */.slider .drag-line span::before,.slider .drag-line span::after {  position: absolute;  content: "";  top: 50%;  border: 10px solid transparent; /* Arrow base is transparent */  border-bottom-width: 0px;  border-right-width: 0px;  transform: translate(-50%, -50%) rotate(45deg); /* Rotate to form the arrow */}/* Left side arrow of the drag handle */.slider .drag-line span::before {  left: 40%;  border-left-color: #000000; /* White arrow on the left */}/* Right side arrow of the drag handle */.slider .drag-line span::after {  left: 60%;  border-top-color: #000000; /* White arrow on the right */}

JavaScript

Here is the JavaScript code:

// Selecting the slider input, second image, and drag line elementsconst slider = document.querySelector(".slider input");const img = document.querySelector(".images .img-2");const dragLine = document.querySelector(".slider .drag-line");// Event listener to update image width and drag line position on slider inputslider.oninput = () => {  let sliderVal = slider.value;  dragLine.style.left = sliderVal + "%"; // Move drag line  img.style.width = sliderVal + "%"; // Adjust the width of the second image}

Download Source Code

You can get the complete source code of image comparison slider in HTML, CSS and JavaScript from the following button. It is an open source and has no restriction on the copyright and it comes with all files and images.

https://jvcodes.com/image-comparison-slider-in-html-css-and-javascript/

Conclusion

The Image Comparison Slider in HTML, CSS, JavaScript can be applied to any website and it is rather simple to use it. You can implement this slider to enhance the narrative, where your target audience is able to explore more, especially in scenarios where one image is compared to another such as before and after images or product comparisons.

You are welcome to use this code in your projects then ensure that you link back to this page, JV Source Codes. If you have any other question or come across some problem, please leave your comment, I will be glad to assist you. Happy coding!

Comments

Post a Comment

Popular posts from this blog

Top 10 Image Galleries in HTML, CSS, JavaScript for Your Web Projects

-
Image
  Top 10 Image Galleries in HTML, CSS, JavaScript for Your Web Projects Having an image gallery is a must when it comes to web design because the human brain is quite wired to understand pictures. HTML, CSS, and JavaScript are good technologies that help make great image galleries, appealing and adaptable. It doesn’t matter whether you’re designing a portfolio or a product catalog – these 10 image galleries are great for your web projects. List of Top 10 Image Galleries Here is the list of Top 10 Image Galleries for your project: 3D Rotating Image Gallery (HTML + CSS + JavaScript) Hexagon Image Gallery (HTML + CSS) Responsive Masonry Image Gallery (HTML + CSS) Responsive Filterable Image Gallery (HTML + CSS + JavaScript) Dynamic Image Gallery (HTML + CSS) Modern Image Gallery (HTML + CSS) Responsive Image Gallery (HTML + CSS) Popup Image Gallery (HTML + CSS + JavaScript) Smooth Quad Image Gallery (HTML + CSS + JavaScript) Sliding 3D Image Gallery (HTML + CSS + JavaScript)
Read more

HTML Tags and Attributes for beginners | Lesson 2

-
Image
HTML Tags and Attributes for beginners | Lesson 2 HTML which means HyperText Markup Language is the basic ingredient of the web and has been used for constructing the documents of the web through text structures like headings, paragraphs, lists, links, quotes, and many other things. Check detailed article: https://jvcodes.com/html-tags-and-attributes-for-beginners/ HTML is the easiest programming language to learn and thus is the first language that any developer to be ought to learn. Well, in this lesson, only the basic tags and attributes which are crucial for every web designer are described. At the end of this article, you should be in a position to apply these tags and their attributes to construct rudimentary web pages. What are HTML Tags and Attributes? Tags in HTML are used to build objects in an HTML document . These tags are enclosed in angle brackets < >. For example, the <p> tag can be used to define a paragraph of text Most of the HTML tags are pairs with an o
Read more

HTML Layout Techniques for beginners | Lesson 3

-
Image
  HTML Layout Techniques for beginners | Lesson 3 The mastery of HTML Layout Techniques is significant in any web development process to make attractive and organized web page. For the beginner out there, these technique are going to offer a good starting point on how to create well structured web page. Complete Article: HTML Layout Techniques for beginners This blog post will introduce you to the idea of HTML layout techniques, elements and tags: semantic and non-semantic tags, placing the content within the main container and working with anchor, image, div and span tags. What are HTML Layout Techniques? HTML Layout Techniques or site layout is the organization of page elements supported by the Document Type Definition (DTD) and the arrangement of frames within a website with tags and elements. HTML layout refers to the design and arrangement of content of a website with the use of HTML features. These techniques assist in development of an easy structure which leads to better user
Read more