Before and after slider

A visual tool commonly used in various applications to showcase changes or comparisons between two images or 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 | coc-card-item.js

Functional grouping: Media

Demo

Code


				
			

		
		
			
Responsive preview

			

				

					
				

			

		

		

	

    	




    
    
    



    
    
        

           Usage best practices
        

        








    
    
    



    
        

            

                
                    





    
    
    


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.