Before and after slider

The Before and After Slider comparison component allows users to visually compare two images or states by sliding a handle or bar across them. This interactive tool overlays two photos, separated by a movable divider. Users can drag the divider to reveal portions of each image, enabling a direct comparison between the two states. 

 

Component data

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

Component resources:
SCSS files

Functional grouping: Media

Demo

Code


				
			

		
		
			
Responsive preview

			

				

					
				

			

		

		

	

    	




    
    
    



    
    
        

           Usage best practices
        

        








    
    
    



    
        

            

                
                    





    
    
    


High-Quality Images:


    

  • Use clear, high-resolution images to ensure details are visible.

  • Optimize images for fast loading times.



Clear Differences:


    

  • Select images with significant, easily noticeable differences.

  • Ensure the comparison is visually meaningful and impactful.



Accessibility: 


    

  • Provide descriptive alt text for images to aid screen readers.

  • For accessibility reasons accordion with long description MUST be added after this component.



Contextual Information:


    

  • Provide context or captions explaining what is being compared.

  • Ensure users understand the significance of the comparison.



Clear Labels: Clearly label the before and after sections to avoid confusion. Users should easily understand which image represents the "before" state and which one represents the "after" state.



    






                
                    





    
    
    


Useage examples:


    

  • Visually compare two states of an image highlighting changes, improvements or outcomes.




    






                
            

        

    
    
    




    
    
    



    
        

            

                
                    





    
    
    





    
        
            
Do
                
                
            

        
        
    
    
    




    
    


Use for visual impact. Employ the component to highlight clear, visually impactful changes.



    





Always provide context by including explanatory text or captions to give users background about the comparison.



    





Use good quality images, so users can easily understand what they are looking at.



    





Always use alt texts for the images and the comparison, this way the component is accessible to all users and the message is clear to everybody.



    



    









                
                    





    
    
    





    
    
        
            
Don't
                
                
            

        
        
    
    




    
    


Don’t use for complex data, such as comparing complex data sets or detailed numerical information.



    





Do not put inside a narrow column (especially an image viewer with multiple images). Thumbnails will be difficult to see and the caption text will be illegible.



    





Don’t use to show minimal differences. Refrain from using the component when differences between images are minimal or hard to discern.



    





Don’t use without interaction benefit. If a simple side-by-side comparison or a static image can effectively convey the information, use those methods instead.