City-Guide | This project was bootstrapped with Create React App | Frontend Framework library

I've pulled the current URL into a variable. So my url is in variable $url.

Example of the $url = 'http://domain.test/en/offers/guided-tours/neighbourhoods/academy-traces-of-the-academy-in-antwerp/'

Now I want to add a new variable ($venueSlug) before the last slash. Example of value from that variable $venueSlug = 'antwerp-city-guided';

The wanted result would be

I have a custom range slider.

The issue I'm running into, however, is that I can't manage to make the sliding of the custom “thumb” (in this case ) work on touch devices.

Here's the project live: https://wagon-city-guides.herokuapp.com/spots/32

If you check it on your mobile (I use an iPhone), you'll still see the border of the original thumb (I left it on purpose for now), which slides and works, but the flame (the custom thumb) doesn’t come along … while it works fine for click devices.

I'm looking for a Vanilla JS solution only.

Here's my code:

I noticed that the offsetWidth of this.ratingSliderInput = document.querySelector(".js-rating-slider-input") changes randomly.

It goes from the real width to switching to 129 (no idea where that value is coming from).

This affects setting the position of this.ratingSliderThumb negatively.

Why does offsetWidth change to 129 randomly?

JavaScript: