It does not work properly on mobile devices

[marekduse]

Hello

I have a problem on mobile devices beer slider does not work properly when I want to move the range then it moves to the left and I can't do anything.

On mozlilla firefox also when the page first loads it doesn't work at all only after refreshing the page it works correctly. On google chrome from the first loading it works correctly.

Site: https://rtmmalowaniedachow.pl/

[iamalexneumann]

I have this problem, too. And BeerSlider doesn't work in Safari 16.0

[HmmmUK]

Hi, I'm also finding Apple/Safari/iPhones don't play nicely :(
Thanks for the great script, I hope you find time to fix things.

[marekduse]

I solved my problem! I removed the beer slider. I made the comprasion image in a different way.
https://www.youtube.com/watch?v=_XdtrWeYk7o
You can get a sneak peek of the action on the page provided above.

[HmmmUK]

I solved my problem! I removed the beer slider. I made the comprasion image in a different way. https://www.youtube.com/watch?v=_XdtrWeYk7o You can get a sneak peek of the action on the page provided above.

Thanks for that, very useful.
I don't use Wordpress or Oxygen but see the JS+CSS is documented separately via 'Spellhammer' so I will have a play with it.

beerslider seems to work for some 'Apple' users but others report back that it fails which is frustrating.
I take it this version seems to be working with all devices/browsers for you?

[marekduse]

It works properly. You can check in the first post there is a link to the page where it is used.

[HmmmUK]

I'm not an Apple user so don't have access to Safari etc. to test - I only heard beerslider had issues when people told me. It all seemed perfect on my Android and Windows devices :)

[marekduse]

I have iOS and it works perfectly ;) Of course, not beerslider and the way I presented in the youtube link above.

[HmmmUK]

After a play with things that looks like it's really for Wordpress/Oxygen users. Demo here: http://elements.oxy.host/element-demo-image-comparison/

@marekduse if you get a minute perhaps you could see if this works on Apple devs?
It hasn't been updated for a while so the latest Safari may not be happy,
https://github.com/ilkerccom/cndkbeforeafter (links to demo).

I'm still hoping beerslider will be updated.
@pehaa it would be nice to hear if you will be updating your great beerslider script or if people need to look elsewhere? :)
Thanks.

[rmarschall]

I found a simple solution that seems to fix the safari issues. Find the line in BeerSlider.css that says ".beer-range::-webkit-slider-thumb" and remove "-webkit-" and it should work.

Good luck!

[HmmmUK]

Thanks for posting :)
I'm no expert - so it would be good if others with access to Safari/Apple devs could confirm this fix works with both old and new devices.

[marekduse]

@marekduse if you get a minute perhaps you could see if this works on Apple devs? It hasn't been updated for a while so the latest Safari may not be happy, https://github.com/ilkerccom/cndkbeforeafter (links to demo).

It works correctly on my iPhone and Safari browser.

[tmarcu]

Removing -webkit- makes it work on latest Safari on my end; tested on iPhone 13, iPad & MacBook Pro.

[HmmmUK]

I found a simple solution that seems to fix the safari issues. Find the line in BeerSlider.css that says ".beer-range::-webkit-slider-thumb" and remove "-webkit-" and it should work.

Good luck!

Thanks again for this fix.
I'm using this successfully for people on Apple devices (and Windows & Android) - if I hear of any people having issues I'll post again 👍

[AtzeBK]

Thanks for the -webkit- hint, @rmarschall !
To me it looks this fixes the pointer problem. The handle can be set to the current position where the user pointed to.
Anyway, some iOS users still complaining that the dragging isn't working. (is this called pointermove event?!?)
Unfortunately I don't have an iPhone with me and the simulator on mac vm is not showing up some images - long story short: I can't test it but with iOS / iPhone there are still issues.

[AtzeBK]

Got this finally fixed :-)
Extended the beerslider class with help of here and here.
Maybe the iPhone compatible events and the event.stopPropagation() will be included some day to the beerslider.

• added iOS detection
• added passive events
• added touch-/mouse events
• added event.stopPropagation()
  I'm not a pro and I'm sure this can be done 100 times better. I paste my code anyway - please bear with me if it isn't perfect.
  If somebody wants to improve it - feel free!

const isiOS =
        (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) ||
        (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);

class BeerSlider {
  constructor(element, isiOS, { start = "50", prefix = "beer" } = {}) {
    this.start = parseInt(start) ? Math.min(100, Math.max(0, parseInt(start))) : 50;
    this.prefix = prefix;
    // swal ios fix
    this.isiOS = isiOS;
    // added
    this.clicked = 0;
    this.imgBoundingClientRect = null;

    if (!element || element.children.length !== 2) {
      return;
    }
    this.element = element;
    this.revealContainer = this.element.children[1];
    if (this.revealContainer.children.length < 1) {
      return;
    }
    this.revealElement = this.revealContainer.children[0];
    this.range = this.addElement("input", {
      type: "range",
      class: `${this.prefix}-range`,
      "aria-label": "Percent of revealed content",
      "aria-valuemin": "0",
      "aria-valuemax": "100",
      "aria-valuenow": this.start,
      value: this.start,
      min: "0",
      max: "100",
    });
    this.handle = this.addElement("span", {
      class: `${this.prefix}-handle`,
    });
    this.onImagesLoad();
  }

  init() {
    this.element.classList.add(`${this.prefix}-ready`);
    this.setImgWidth();
    this.move();
    this.addListeners();
  }
  loadingImg(src) {
    return new Promise((resolve, reject) => {
      if (!src) {
        resolve();
      }
      const img = new Image();
      img.onload = () => resolve();
      img.onerror = () => reject();
      img.src = src;
    });
  }
  loadedBoth() {
    const mainImageSrc = this.element.children[0].src || this.element.children[0].getAttribute(`data-${this.prefix}-src`);
    const revealImageSrc = this.revealElement.src || this.revealElement.getAttribute(`data-${this.prefix}-src`);
    return Promise.all([this.loadingImg(mainImageSrc), this.loadingImg(revealImageSrc)]);
  }
  onImagesLoad() {
    if (!this.revealElement) {
      return;
    }
    this.loadedBoth().then(
      () => {
        this.init();
      },
      () => {
        console.error("Some errors occurred and images are not loaded.");
      }
    );
  }
  addElement(tag, attributes) {
    const el = document.createElement(tag);
    Object.keys(attributes).forEach((key) => {
      el.setAttribute(key, attributes[key]);
    });
    this.element.appendChild(el);
    return el;
  }
  setImgWidth() {
    this.revealElement.style.width = getComputedStyle(this.element)["width"];
    this.imgBoundingClientRect = this.element.getBoundingClientRect();
  }
  addListeners() {
    const eventTypes = ["input", "change"];
    eventTypes.forEach((i) => {
      this.range.addEventListener(i, () => {
        this.move();
      });
    });
    window.addEventListener("resize", () => {
      this.setImgWidth();
    });

    // iOS fix - https://www.w3schools.com/howto/howto_js_image_comparison.asp
    if (isiOS) {
      this.range.addEventListener("mousedown", () => {
        this.slideReady.bind(this);
      });
      window.addEventListener(
        "mouseup",
        () => {
          this.slideFinish.bind(this);
        },
        Modernizr.passiveeventlisteners ? { passive: true } : false
      );
      this.range.addEventListener("touchstart", () => {
        this.slideReady(event, this);
      });
      window.addEventListener(
        "touchend",
        () => {
          this.slideFinish(event, this);
        },
        Modernizr.passiveeventlisteners ? { passive: true } : false
      );
    }
  }
  slideReady(e, element) {
    e.preventDefault();
    this.clicked = 1;
    this.lockBodyScroll(e);
    window.addEventListener("mousemove", this.slideMove.bind(this));
    window.addEventListener("touchmove", this.slideMove.bind(this));
  }
  slideFinish(e, element) {
    element.clicked = 0;
  }
  slideMove(e) {
    var pos;
    if (this.clicked == 0) return false;
    pos = this.getCursorPos(e, this);
    if (pos < 0) pos = 0;
    if (pos > 100) pos = 100;
    this.range.value = pos;
    this.move();
  }
  getCursorPos(e, element) {
    var a,
      x = 0;
    if (element.imgBoundingClientRect.left === 0) {
      element.imgBoundingClientRect = this.element.getBoundingClientRect();
    }
    e = e.changedTouches ? e.changedTouches[0] : e;
    x = e.pageX - element.imgBoundingClientRect.left;
    x = x - window.pageXOffset;
    x = Math.round((x / element.imgBoundingClientRect.width) * 100);
    return x;
  }
  // https://github.com/sweetalert2/sweetalert2/blob/ac79cfc4b4a1f3a1e564f1fd353c520ba7a1ca3d/src/utils/iosFix.js
  lockBodyScroll(event) {
    if ((event.touches && event.touches.length && event.touches[0].touchType === "stylus") || (event.touches && event.touches.length > 1)) {
      return;
    }
    event.stopPropagation();
  }

  move() {
    this.revealContainer.style.width = `${this.range.value}%`;
    this.handle.style.left = `${this.range.value}%`;
    this.range.setAttribute("aria-valuenow", this.range.value);
  }
}
      
document.addEventListener(
        "DOMContentLoaded",
        () => {
          new BeerSlider(document.getElementById("beer-slider01"));
          new BeerSlider(document.getElementById("XY"));
        },
        { passive: true }
      );

[Flipback8]

I found a simple solution that seems to fix the safari issues. Find the line in BeerSlider.css that says ".beer-range::-webkit-slider-thumb" and remove "-webkit-" and it should work.

Good luck!

Awesome solution! Thanks for posting it! Worked Perfectly!