Neoteric Plumbing Mishap

    img-comparison-slider
    TypeScript icon, indicating that this package has built-in type declarations

    7.8.1 • Public • Published

    img-comparison-slider

    npm package Published on webcomponents.org

    Slider Component for Comparing Images (Before and After).

    Usage examples: https://img-comparison-slider.sneas.io/examples.html

    Example

    Most Important Features

    • Mobile friendly
    • Accessible
    • Responsive
    • Compact - less than 12 kB minified (Or less than 4 kB if gzipped)
    • Compatible with modern frameworks (React, Angular, Vue2, Vue3)
    • Distributed via CDN or NPM

    Installation

    Browser Requirements

    HTML

    <script
      defer
      src="https://unpkg.com/img-comparison-slider@7/dist/index.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/img-comparison-slider@7/dist/styles.css"
    />
    
    <img-comparison-slider>
      <img slot="first" src="before.jpg" />
      <img slot="second" src="after.jpg" />
    </img-comparison-slider>

    Frameworks Support

    Supported Attributes

    Besides the default HTMLElement attributes such as class, tabindex, title, etc., img-comparison-slider supports:

    Attribute Description Default Available
    value Position of the divider in percents. 50 0..100
    hover Automatically slide on mouse over. false
    direction Set slider direction. horizontal horizontal, vertical
    nonce Define nonce which gets passed to inline style.
    keyboard Enable/disable slider position control with the keyboard. enabled enabled, disabled
    handle Enable/disable dragging by handle only. false true, false

    Events

    The component emits slide event when the slider position is changed by user.

    Styling

    Some styling techniques and ideas can be found in examples.

    The component elements like the default handle or the separator line could be styled using CSS3 variables.

    Example:

    <style type="text/css">
      img-comparison-slider {
        --divider-width: 2px;
        --divider-color: #c0c0c0;
        --default-handle-opacity: 0.3;
      }
    </style>

    Available Variables

    Variable Description Default value Example value
    --divider-width Width of the vertical line separating both images 1px 1em
    --divider-color Color of the vertical line separating the two images #fff rgba(0, 0, 0, 0.5)
    --divider-shadow Shadow cast by the vertical line separating the two images none 0px 0px 5px rgba(0, 0, 0, 0.5)
    --handle-position-start Handle position on the divider axis. In case the handle must be displaced off the center 50%
    --default-handle-width Width of the default handle 50px
    --default-handle-color Color of the default handle #fff rgba(0, 0, 0, 0.5)
    --default-handle-opacity Opacity of the default handle 1 0.3
    --default-handle-shadow Shadow cast by the default handle none 0px 0px 5px rgba(0, 0, 0, 1)

    Handle

    The handle of the component can be changed by assigning the attribute slot="handle" to any element within img-comparison-slider.

    Install

    npm i img-comparison-slider

    DownloadsWeekly Downloads

    5,246

    Version

    7.8.1

    License

    MIT

    Unpacked Size

    53.1 kB

    Total Files

    10

    Last publish

    Collaborators

    • sneasio