How to show list of product in row change as per range slider which starts with 6 and ends 1

Question

I have image gallery in 6 images in one row, I want to reduce the number of image in a row as I change range slider from 6 to 5,4,3,2,1 vice versa and this should happen with smooth transition.

This is my range slider and below that HTML code for image grid

<input type="range" id="thumbnailSlider" min="1" max="6" value="" start="6" />
<div class="image-grid">
<div class="image-column">
     <img href="productDetails-image.html" class="" src="../assets/img/designs/A-ancient-design-pattern_1.jpg">
      </div>
<div class="image-column">
      <img class="" src="../assets/img/designs/Animal-paw-design-and-orange-texture-pattern_1.jpg">
</div>
<div class="image-column">
      <img class="" src="../assets/img/designs/Beautiful-geomectric-design-pattern_1.jpg">
</div>
<div class="image-column">
      <img class="" src="../assets/img/designs/Big-dahlia-and-narcissus-flowers-on-a-mint-green-background_1.jpg">
</div>
<div class="image-column">
      <img class="" src="../assets/img/designs/Blue-background-with-poinsettia-flowers-design_1.jpg">
</div>
<div class="image-column">
       <img class=""src="../assets/img/designs/Blue-banda-background-with-fountain-like-designs-pattern_1.jpg">
</div>
</div>

Answer 1

Using :lt and :gt jquery selectors

 $('#thumbnailSlider').on('input', function() { $('.image-column').css('flex-basis', 100 / this.value + '%') }).trigger('input') 

 .image-grid { display: flex; flex-wrap: wrap; j transition: all 1s cubic-bezier(0, 0, 0.2, 1) 100ms; } .image-column { flex-grow: 1; transition: all 1s cubic-bezier(0, 0, 0.2, 1) 100ms; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="range" id="thumbnailSlider" min="1" max="6" value="" start="6" /> <div class="image-grid"> <div class="image-column"> <img class="" src="//via.placeholder.com/100?text=1"> </div> <div class="image-column"> <img class="" src="//via.placeholder.com/100?text=2"> </div> <div class="image-column"> <img class="" src="//via.placeholder.com/100?text=3"> </div> <div class="image-column"> <img class="" src="//via.placeholder.com/100?text=4"> </div> <div class="image-column"> <img class="" src="//via.placeholder.com/100?text=5"> </div> <div class="image-column"> <img class="" src="//via.placeholder.com/100?text=6"> </div> </div>