时间戳

首页 > 解决方案 > 在范围图像滑块上添加悬停工具提示和播放/暂停按钮

jquery - 在范围图像滑块上添加悬停工具提示和播放/暂停按钮

问题描述

我有一个来自 2 个脚本的代码，用于范围图像滑块，我还想在悬停时添加工具提示（在范围步骤上）和播放/暂停按钮。

html代码是：

 <div id="secondary-slider" class="splide">
  <div class="splide__track">
    <ul class="splide__list" id="toRangeSlider">
      <li class="splide__slide"><img src="a.png"></li>
      <li class="splide__slide"><img src="b.png"></li>
      <li class="splide__slide"><img src="c.png"></li>
    </ul>
  </div>
</div>


<input type="range" step="1" min="0" max="" value="0" class="slider" id="range-slider" list="tickmarks" name="rs">


</body>


<datalist id="tickmarks">
  <option value="1" label="1"></option>
  <option value="2" label="2"></option>
  <option value="3" label="3"></option>
</datalist>

2个js脚本是：

   $(document).ready(function() {
    $( "#slider" ).slider({
        value: 4,
        min: 1,
        max: 7,
        step: 1
    })
    .each(function() {
      var opt = $(this).data().uiSlider.options;
        var vals = opt.max - opt.min;
      for (var i = 0; i <= vals; i++) {
        
        var el = $('<label>'+(i+1)+'</label>').css('left',(i/vals*100)+'%');
      
        $( "#slider" ).append(el);
         }
      });
    });

和

$(document).ready(function() {
  let tmo; 
  $("#range-slider").attr('max', $('.splide__slide').length - 1);
  $("#range-slider").on("input", function() {
    clearTimeout(tmo);
    tmo = setTimeout(() => splider.go(+$(this).val()), 100)
  });
  const splider = new Splide('.splide').mount();
});

我没有使用 jquery 的经验，是否有一种简单的方法可以在范围滑块步骤上悬停时显示刻度线（数据列表）的值？

还有一种方法可以添加与范围栏滑块独立工作的播放/暂停按钮吗？

谢谢

标签： jquerysliderrangetooltipautoplay

解决方案

推荐阅读