Blog

{% assign unique_id = 'ba_slider_' | append: section.id %}

<main class="ba_main {{ unique_id }}">
  <div class="container before_after">
    <div class="image-container">
      <div class="before_img">
        <img
          class="image-before slider-image"
          src="{{ section.settings.bf_image | image_url }}"
          alt="color photo"
        >
        <span
          class="before_badge ba_badge"
          style="{% unless section.settings.show_badge %}display: none;{% endunless %}"
          >Before</span
        >
      </div>
      <div class="after_img">
        <img
          class="image-after slider-image"
          src="{{ section.settings.af_image | image_url }}"
          alt="black and white"
        >
        <span class="after_badge ba_badge" style="{% unless section.settings.show_badge %}display: none;{% endunless %}"
          >After</span
        >
      </div>
    </div>
    <!-- step="10" -->
    <input
      type="range"
      min="0"
      max="100"
      value="50"
      aria-label="Percentage of before photo shown"
      class="ba-slider"
    >
    <div class="slider-line" aria-hidden="true"></div>
    <div class="slider-button" aria-hidden="true">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="30"
        height="30"
        fill="currentColor"
        viewBox="0 0 256 256"
      >
        <rect width="256" height="256" fill="none"></rect>
        <line
          x1="128"
          y1="40"
          x2="128"
          y2="216"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        ></line>
        <line
          x1="96"
          y1="128"
          x2="16"
          y2="128"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        ></line>
        <polyline class="before_arrow"
          points="48 160 16 128 48 96"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        ></polyline>
        <line
          x1="160"
          y1="128"
          x2="240"
          y2="128"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        ></line>
        <polyline  class="after_arrow"
          points="208 96 240 128 208 160"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        ></polyline>
      </svg>
    </div>
  </div>
  <div
    class="container before_after-content"
    style="{% unless section.settings.show_content %}display: none;{% endunless %}"
  >
    <div class="before_after-heading">
      <h3>{{ section.settings.ba_heading }}</h3>
    </div>
    <div class="before_after-paragraph">
      <p>{{ section.settings.ba_content }}</p>
    </div>
  </div>
</main>

{% schema %}
{
  "name": "Before / After Slider",
  "settings": [
     {
          "type": "header",
          "content": "Subscribe to our [channel](https://www.youtube.com/@websensepro?sub_confirmation=1)"
        },
    {
      "id":"bf_image",
      "type":"image_picker",
      "label":"Before Image"
    },
    {
      "id":"af_image",
      "type":"image_picker",
      "label":"After Image"
    },
    {
      "type": "checkbox",
      "id": "show_badge",
      "label": "Show Badges",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "grayscale_before",
      "label": "Grayscale for Before Image",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_content",
      "label": "Show content",
      "default": false
    },
  {
      "id":"ba_heading",
      "type":"text",
      "label":"Heading"
    },
    {
      "id":"ba_content",
      "type":"richtext",
      "label":"Content"
    }
  ],
  "presets":[
    {
      "name":"Before / After Slider"
    }
  ]
}
{% endschema %}

{% javascript %}
{% endjavascript %}


<style>
      {% if section.settings.show_content == true %}
         .ba_main .container{
          width: calc(50% - 20px);
        }
       {% else %}
         .ba_main .container{
          width: 50%;
           margin: 0 auto;
        } 
       {% endif %}

         .ba_main {
                 display: flex;
                 place-items: center;
                 flex-wrap: wrap;
                 gap: 30px;
                 padding: 0 5rem;
                 max-width: 1200px;
           width: 100%;
           margin: 50px auto;
               }

               .ba_main img {
                 display: block;
                 max-width: 100%;
               }

               .ba_main .container {
                 display: grid;
                 /* place-content: center; */
                 position: relative;
                 overflow: hidden;
                 border-radius: 1rem;
                 --position: 50%;
               }

               .ba_main .image-container {
                 max-width: 1200px;
               }

  .ba_main .before_badge {
    z-index: 99 !important;
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: #fff;
    padding: 0 5px;
    border-radius: 5px;
    color: #000;
  }

    .ba_main .after_badge {
    z-index: 99 !important;
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: #fff;
    padding: 0 5px;
    border-radius: 5px;
    color: #000;
  }

               .ba_main .slider-image {
                 width: 100%;
                 height: 100%;
                 object-fit: cover;
                 object-position: left;
                 max-height: 500px;
               }

               .ba_main .image-before {
                 position: absolute;
                 inset: 0;
                 width: var(--position);
                 {% if section.settings.grayscale_before %}filter: grayscale(100%);{% endif %}
               }

               .ba_main .ba-slider {
                 position: absolute;
                 inset: 0;
                 cursor: pointer;
                 opacity: 0;
                 /* for Firefox */
                 width: 100%;
                 height: 100%;
               }

               .ba_main .ba-slider:focus-visible ~ .slider-button {
                 outline: 5px solid black;
                 outline-offset: 3px;
               }

               .ba_main .slider-line {
                 position: absolute;
                 inset: 0;
                 width: .2rem;
                 height: 100%;
                 background-color: #fff;
                 /* z-index: 10; */
                 left: var(--position);
                 transform: translateX(-50%);
                 pointer-events: none;
               }

               .ba_main .slider-button {
                 position: absolute;
                 background-color: #fff !important;
                 color: black;
                 padding: .5rem;
                 border-radius: 100vw;
                 display: grid;
                 place-items: center;
                 top: 50%;
                 left: var(--position);
                 transform: translate(-50%, -50%);
                 pointer-events: none;
                 /* z-index: 100; */
                 box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
               }

       @media only screen and (max-width: 768px)
         {
           .ba_main .container{
               width: 100%;
           }
           .ba_main{
             padding: 0 20px;
           }
         }
</style>


<script>
function initializeBeforeAfterSlider(uniqueId) {
  const container = document.querySelector(`.${uniqueId} .before_after`);
  const slider = document.querySelector(`.${uniqueId} .ba-slider`);

  slider.addEventListener('input', (e) => {
    container.style.setProperty('--position', `${e.target.value}%`);
  });
}

initializeBeforeAfterSlider('{{ unique_id }}');
</script>