How do I get the text into local storage on slide of range slider?

Question

I am using a range slider. On sliding, the images and phrases will change.

There are three stages of sliding. On sliding, the phrases and images change. On every change, that phrase and image should save to local storage. That is the problem.

My html code is:

<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 class="container">
          <div id="sliderOutput">
            <div class="col-4">

              <h6 class="display-6 mt-3"><b><center>Starting From Scratch</center></b></h6>
              <p class="demo"><center>I'm designing the room </p>
            </div>
            <div class="col-4">
              <h6 class="display-6 mt-3"><b>Somewhere in Between</b></h6>
              <p class="demo">I'm designing around a few pieces I already own</p>
            </div>
            <div class="col-4">
              <h6 class="display-6 mt-3"><b>Mostly Furnished</b></h6>
              <p class="demo">I want to put the finishing touches on my room</p>
            </div>
          </div>
        </p>

My CSS code is:

<style>
        .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;
        }
      </style>

My JS Code is:

<script>
        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';
        });
      });
    </script>

On sliding, the image and phrase will change. My requirement on changing the phrase and image path should store in the local storage.

Can you people please help me?

I reckon only store the selection on clicking Next rather than storing every change in localstorage. — Nathaniel Flick, Dec 31 '19 at 03:39
Yes @ Nathaniel but only one should store the if the slides 1 and then also 2 the 2nd one should store and 1st one should pop how it can happen can you help me please. — NSTA, Dec 31 '19 at 03:40

Nandu Dharmapalan · Accepted Answer · 2019-12-31T04:58:43.363

0

Put the last stored image path and slider number in localStorage and use it

<script>
    window.addEventListener('load', function() {

    var imagePath = "../static/images/";
    var localStorageSliderNumber;
    var localStorageImagePath; 
    if (window.localStorage.getItem('sliderValue') != null) {
        localStorageSliderNumber = 
            window.localStorage.getItem('sliderValue');
    } else {
        window.localStorage.setItem('sliderValue', '1');
        localStorageSliderNumber = 1;
    }
    if (window.localStorage.getItem('imagePath') != null) {
        imagePath = imagePath + window.localStorage.getItem('imagePath') + ".jpg";
    }

    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';

      window.localStorage.setItem('sliderValue', rangeslider.getAttribute('value'));
      window.localStorage.setItem('imagePath', (i+1));
    });
  });
</script>

edited Dec 31 '19 at 04:58

answered Dec 31 '19 at 04:13

Nandu Dharmapalan

406
5
13

@ Nandu but I want that phrase and value as 1 or 2 or 3 and also the image also to be stored in local storage – NSTA Dec 31 '19 at 04:15
For the image use this https://stackoverflow.com/a/19183658/7402956. To save the phrase you could create another localStorage item – Nandu Dharmapalan Dec 31 '19 at 04:17
with your code i am getting the slider value when I am sliding [objectHTMLdivelement] and image=[] – NSTA Dec 31 '19 at 04:19
Can you say why I am not getting the slider value and the image path with your code can you help me out from this? – NSTA Dec 31 '19 at 04:27
I have edited it and now the number corresponding to image name is stored in localStorage and the path created out of it – Nandu Dharmapalan Dec 31 '19 at 04:45
@ Nandu on loading the page the slider will be in the first stage but why nothing is coming in the local storage – NSTA Dec 31 '19 at 04:49
on loading the page the local storage should contain 1 value in slider value right how to get it can you please help – NSTA Dec 31 '19 at 04:50
the setItem is done in rangeslider addEventListener. If you want it on onload then do those in the beginning with static values like window.localStorage.setItem('sliderValue', '1');. Hope it helps – Nandu Dharmapalan Dec 31 '19 at 04:54
I didnt get your point @Nandu where I should put can you please edit that in your code – NSTA Dec 31 '19 at 04:55

How do I get the text into local storage on slide of range slider?

1 Answers1