javascript - 带轨迹的 slider ？

Question

我希望滑动条移动时在其后面有一条橙色渐变轨迹。这是 the fiddle .

橙色渐变代码:

background: linear-gradient(to bottom, rgba(241,194,16,1) 0%,rgba(239,192,14,1) 11%,rgba(243,186,17,1) 29%,rgba(242,181,15,1) 39%,rgba(243,172,18,1) 57%,rgba(241,168,14,1) 68%,rgba(244,164,17,1) 79%,rgba(240,158,20,1) 100%);

完成的版本应该看起来像this ，我只希望通过 JavaScript 或 jQuery 和 HTML/CSS 实现。

Answer 1

这个怎么样？

$(function() {

  $(".vHorizon").change(function() {

    var slider = $(this);
    var min = slider.prop('min');
    var max = slider.prop('max');
    if (!min) min = 0;
    if (!max) max = 100;

    var percent = (slider.val() - min) / (max - min);

    var cover = slider.next();
    var coverWidth = cover.attr('mwidth');

    cover.css('width', 'calc(' + percent + ' * ' + coverWidth + ')');

  });

  $(".vHorizon").change();

});

input[type=range].vHorizon,
.vHorizonCover {
  -webkit-appearance: none;
  background-color: #8a9398;
  height: 26px;
  width: 590px;
  margin: 65px 0 0 5px;
  border-radius: 5px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-image: url("http://i.imgur.com/ZmVoXyE.png?1");
  background-repeat: no-repeat;
  width: 20px;
  height: 52px;
}
.vHorizonContainer {
  position: relative;
}
.vHorizonCover {
  position: absolute;
  top: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(241, 194, 16, 1) 0%, rgba(239, 192, 14, 1) 11%, rgba(243, 186, 17, 1) 29%, rgba(242, 181, 15, 1) 39%, rgba(243, 172, 18, 1) 57%, rgba(241, 168, 14, 1) 68%, rgba(244, 164, 17, 1) 79%, rgba(240, 158, 20, 1) 100%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='vHorizonContainer'>
  <input type="range" class="vHorizon" />
  <div class='vHorizonCover' mwidth='590px'></div>
</div>

它在 IE 10 或更早版本中效果不佳(不支持 css pointer-events 属性)。

我创建了一个 div 来覆盖 slider ，并根据 slider 的值使用 jQuery 更改其宽度。