On sliding the details of particular position should store in local storage?

I am replicating this webpage https://www.modsy.com/project/furniture and I wrote the code On every slide there will be changing of image and phrase like that there are three phrases and images now I want to store the image and phrase in the local storage what the user has finalized My html code is:

window.addEventListener('load', function() {
      var rangeslider = document.getElementById("sliderRange");
      var output = document.getElementById("sliderOutput");
      var images = document.getElementById("sliderImages");
      rangeslider.addEventListener('input', function() {
        for (var i = 0; i < output.children.length; i++) {
          output.children[i].style.display = 'none';
          images.children[i].style.display = 'none';
        }
        i = Number(this.value) - 1;
        output.children[i].style.display = 'block';
        images.children[i].style.display = 'block';
      });
    });

    .rangeslider {
      width: 50%;
      margin: 0 auto;
      position: absolute;
    
    }
    .myslider {
      -webkit-appearance: none;
      background: white;
      width: 100%;
      height: 20px;
      opacity: 0.8;
      margin-top: 180px;
    }
    .myslider::-webkit-slider-thumb {
      -webkit-appearance: none;
      cursor: pointer;
      background: #000080;
      width: 33%;
      height: 20px;
    }
    .col-4 {
      text-align: center;
    }
    .myslider:hover {
      opacity: 1;
    }
    .image {
      position: relative;
      width: 400px;
      margin: 0 auto;
    }
    .image>img {
      position: absolute;
      display: none;
    }
    .image>img.visible,
    .image>img:first-child {
      display: block;
    }
    #sliderOutput>div {
      display: none;
    }
    #sliderOutput>div.visible,
    #sliderOutput>div:first-child {
      display: block;
    }
    #p1{
      height: 10px;
    }

  <div class="image mt-3 mb-3" id="sliderImages">
      <img src="../static/images/1.jpg" width="400" height="180">
      <img src="../static/images/2.jpg" width="400" height="180">
      <img src="../static/images/3.jpg" width="400" height="180">
    </div><br>
    <div class="rangeslider">
      <input type="range" min="1" max="3" value="1" class="myslider" id="sliderRange">
      <div id="sliderOutput">
        <div class="container">
          <div class="row mt-4">
            <div class="col-4">
              <h6 class="display-6">Starting From Scratch</h6>
              <p> I'm designing the room </p>
            </div>
            <div class="col-4">
              <h6 class="display-6">Somewhere in Between</h6>
              <p>I'm designing around a few pieces I already own</p>
            </div>
            <div class="col-4">
              <h6 class="display-6">Mostly Furnished</h6>
              <p>I want to put the finishing touches on my room</p>
            </div>
          </div>
        </div>
        <div class="container">
          <div class="row mt-4">
            <div class="col-4">
              <h6 class="display-6">Starting From Scratch</h6>
              <p> I'm designing the room </p>
            </div>
            <div class="col-4">
              <h6 class="display-6">Somewhere in Between</h6>
              <p>I'm designing around a few pieces I already own</p>
            </div>
            <div class="col-4">
              <h6 class="display-6">Mostly Furnished</h6>
              <p>I want to put the finishing touches on my room</p>
            </div>
          </div>
        </div>
        <div class="container">
          <div class="row mt-4">
            <div class="col-4">
              <h6 class="display-6">Starting From Scratch</h6>
              <p> I'm designing the room </p>
            </div>
            <div class="col-4">
              <h6 class="display-6">Somewhere in Between</h6>
              <p>I'm designing around a few pieces I already own</p>
            </div>
            <div class="col-4">
              <h6 class="display-6">Mostly Furnished</h6>
              <p>I want to put the finishing touches on my room</p>
            </div>
          </div>
        </div>
      </div>

My main requirement if the slider is in the first that phrase and image should be stored in local storage like that if it is in second that details should store.

from On sliding the details of particular position should store in local storage?