title: Range slider image swap with transitions
body: <p>I have this price slider:</p>
  
  <p><a href="https://codepen.io/anterias/pen/gBwxrL" rel="nofollow noreferrer">https://codepen.io/anterias/pen/gBwxrL</a></p>
  
  <p>Every step on the slider, image on right will change. Is it possible to give some smoothness or transition to image change.</p>
  
  <p>I tried to add different classes every step to image, but I didnt succeed. Is there other possibilities?</p>
  
  <p>Thanks for the help!</p>
  
  <p>Original code from here: <a href="https://stackoverflow.com/questions/43261985/jquery-range-slider-with-image-swap">Jquery Range Slider with Image Swap</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var imageUrl = new Array();
  
  imageUrl[1000] = 'https://docs.google.com/uc?id=1DdRns3dCsrWeWmgg-qBR-HCdUWskUzuz';
  imageUrl[1500] = 'https://docs.google.com/uc?id=1SM5lY2dOHPWBSEWW_wjVnJa4TEbXTHeM';
  imageUrl[2000] = 'https://docs.google.com/uc?id=1L0wW0z05rAve6lJDAk7bFkftlwUTEcgW';
  imageUrl[2500] = 'https://docs.google.com/uc?id=1wlD0jquk-fFozq3EjUcgMkmAbt6TDJCf';
  imageUrl[3000] = 'https://docs.google.com/uc?id=1sYJhZk43vM_V2X8hit7BVnQQ7eqP6nsk';
  imageUrl[3500] = 'https://docs.google.com/uc?id=1Y4ns2eU4ofW-5xA9QP-TxTxlWQ2gPqZL';
  imageUrl[4000] = 'https://docs.google.com/uc?id=1mHgMSqzeiMfUc_IDtXA9VkfxvExzltSV';
  imageUrl[4500] = 'https://docs.google.com/uc?id=1lRNvcd8BdmsuriyDfoBDt2VnuIy9izSx';
  imageUrl[5000] = 'https://docs.google.com/uc?id=1gwQVUVuNSKo3PqrJmtBxBsqC02Df29zw';
  imageUrl[5500] = 'https://docs.google.com/uc?id=1pMvUCR9inb3aiAVWG4-blNuL41y9CZQV';
  imageUrl[6000] = 'https://docs.google.com/uc?id=1PdChm6wtInsUtWDZt6Z5yz_HKDrbBxW3';
  imageUrl[6500] = 'https://docs.google.com/uc?id=15nvfk5pXpThMAUiactpgv14Jg5Sbl6GJ';
  imageUrl[7000] = 'https://docs.google.com/uc?id=1NbASgHWGrx-69K0CQ0qhnqx_ge4IHPX3';
  imageUrl[7500] = 'https://docs.google.com/uc?id=1gc_HYWJe9JzCKC8jLavSAM8AGndCW1T1';
  imageUrl[8000] = 'https://docs.google.com/uc?id=1TE5fSnWLFTkUaKlVGf0vom1HQPuvb0Wg';
         
  $(document).on('input change', '#slider', function() {//listen to slider changes
      var v=$(this).val();//getting slider val
     $('#sliderStatus').html( $(this).val() );
    $("#img").prop("src", imageUrl[v]);
  }); </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
   background:#f3f3f3;
   padding:20px;
    font-family:titillium web
  }
  
  h2 {
    font-size:35px;
  }
  
  h3 {
    font-size:25px;
  }
  
  img {
   max-height:280px;
   width:auto;
   margin-top:0px;
  }
  
  .left,
  right{
    float:left;
    width:50%;
  }
  
  .slider {
      -webkit-appearance: none;
      width: 100%;
      height: 25px;
      background: #d3d3d3;
      outline: none;
    border-radius:50px;
   margin:20px auto 20px;
   max-width:600px;
  
  }
  
  .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 50px;
      height: 50px;
      background: #3FA3E9;
      cursor: pointer;
    border-radius:50px;
     border:none!important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;body&gt;
    
  &lt;div class="left"&gt;
  
  &lt;div class="left-section-first"&gt;
  &lt;h2&gt;How much it will cost?&lt;/h2&gt;
  &lt;input type="range" id="slider" min="1000" max="8000" step="500" value="0" class="slider"/&gt;
  &lt;/div&gt;
  
  &lt;div class="left-section-second"&gt;
  &lt;h3&gt;Price = &lt;span id="sliderStatus"&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="right"&gt;
  &lt;div class="right-section-first"&gt;
  &lt;img src="https://docs.google.com/uc?id=1DdRns3dCsrWeWmgg-qBR-HCdUWskUzuz" id='img'/&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>