如何根据范围滑块在行中显示产品列表，从 6 开始，以 1 结束

Question

我在一行中有 6 张图像中的图像库，我想减少一行中的图像数量，因为我将范围滑块从 6 更改为 5,4,3,2,1，反之亦然，这应该在平滑过渡时发生。

这是我的范围滑块，下面是图像网格的 HTML 代码

<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

使用 :lt 和 :gt jquery 选择器

$('#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>