Responsive interactive pricing component with progress bar

Community feedback

• 

  KapteynUniverse•2,300

  @KapteynUniversePosted 4 days ago

  Hey Djamel1133, i am guessing the reason of your question is you saw that little bug, when you change the screen size after interacting the progress bar, its position stays same but because of the card width changing it looks like moving away.

  I can't change JS on my side, probably because of the DOMContentLoaded. So i can't test it if it is correct but can you try to change indicator position as percentage with this slider.style.left = ${progressPercentage}%

    document.addEventListener("mousemove", (e) => {
      if (isProgressing) {
        // Get container dimensions
        const rect = progressContainer.getBoundingClientRect();
        // Calculate the new position of the slider
        let offsetX = e.clientX - rect.left;
        offsetX = Math.max(0, Math.min(offsetX, rect.width - sliderWidth)); // respect bounds
        // Update the slider position
        slider.style.left = `${offsetX}px`;
        // Update the progress bar width and slider position
        const progressPercentage = (offsetX / rect.width) * 100;
        progressBar.style.width = `${progressPercentage}%`;
        slider.style.left = `${progressPercentage}%`;
      }
    });
  

  Marked as helpful

  1
• 

  Yacoub AlDweik•1,030

  @YacoubDweikPosted 4 days ago

  Hey! Good job buddy!

  When you resize the window you should call that function to calculate and build the correct layout, something like this:

  // Function to handle window resize
  
  function handleResize() {
      // Add your code here to execute when the window is resized
      console.log('Window resized!');
  }
  
  // Event listener for window resize
  
  window.addEventListener('resize', handleResize);
  

  Keep it up!

  Marked as helpful

  1
• 

  Djamel1133•860

  @Djamel1133Posted 4 days ago

  Hi, @KapteynUniverse

  I added the line of code you recommended and, bam, it works! I no longer have any issues with window resizing and I don’t need to handle the window resize event. Very clever, it was just a matter of updating the position of my slider.

  I've been waiting for your comment for a while, and you came at the right moment. Thanks a lot, for me and for the community. You are a valuable help 🙏🙏🙏.

  0

  ---

  

  KapteynUniverse•2,300

  @KapteynUniversePosted 4 days ago

  @Djamel1133 Thank you and no problem, i usually look to my feed rather than all solutions. Your last challenges are the ones i did not do, that is why i didn't see your posts. I followed you, i can give you feedback if you need but i doubt you gonna need it, i am not that much experienced either :D

  1