Silicon UI Kit

##### Menu

Preview Docs

### Content

Typography Icon font Code Images & figures Tables

### Components

Accordion Alerts Audio player Badges Blog components Breadcrumb Buttons Button group Cards Carousel (Slider) Collapse Dropdowns Forms Gallery (Lightbox) Image comparison slider Input group List group Modal Navbar Offcanvas Pagination Parallax Pills Placeholders Popovers Portfolio components Pricing Progress bars Social buttons Spinners Steps Tabs Team Testimonials / reviews Toasts Tooltips Video popup

### Utilities

Bootstrap Silicon

# Image Comparison Slider

JavaScript based slider component that can be used to demonstrate the difference between two images.

Silicon component

Image comparison slider relies on 3rd party plugin. Make sure to link to plugin css and js files in your document: assets/vendor/img-comparison-slider/dist/styles.css and assets/vendor/img-comparison-slider/dist/index.js.

Use this page as a reference.

## Example

Before
After

    <!-- Image comparison slider example -->
    <img-comparison-slider>
      <figure slot="first" class="position-relative">
        <img src="assets/img/portfolio/grid/10.jpg" alt="Image before">
        <figcaption class="badge position-absolute top-50 start-0 translate-middle-y bg-white rounded text-nav fs-sm fw-semibold lh-1 px-3 py-2 ms-3 ms-sm-4">Before</figcaption>
      </figure>
      <figure slot="second" class="position-relative">
        <img src="assets/img/portfolio/grid/11.jpg" alt="Image after">
        <figcaption class="badge position-absolute top-50 end-0 translate-middle-y bg-white rounded text-nav fs-sm fw-semibold lh-1 px-3 py-2 me-3 me-sm-4">After</figcaption>
      </figure>
      <div slot="handle">
        <svg class="text-primary shadow-primary rounded-circle" width="36" height="36" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 36 36"><g><circle fill="currentColor" cx="18" cy="18" r="18"/></g><path fill="#fff" d="M22.2,17.2h-8.3v-3.3L9.7,18l4.2,4.2v-3.3h8.3v3.3l4.2-4.2l-4.2-4.2V17.2z"/></svg>
      </div>
    </img-comparison-slider>

Top