带有箭头的光滑滑块 CodePen

这是一个用于展示带有箭头的光滑滑块的 CodePen。这个滑块可以让用户很容易地选择一个值，而不必输入数字。

如何使用

1. 鼠标点击滑块的箭头，可以增加或减小值。
2. 滑块上方的数字中显示当前的值。
3. 将鼠标悬停在滑块上会显示工具提示，显示当前值和箭头的方向。
4. 可以使用键盘的上下箭头键和左右箭头键来控制滑块。

代码片段

<div class="slider">
  <button class="btn minus"><i class="fa fa-chevron-down"></i></button>
  <div class="progress">
    <div class="thumb"></div>
  </div>
  <button class="btn plus"><i class="fa fa-chevron-up"></i></button>
</div>

.slider {
  display: inline-block;
  height: 40px;
  width: 100px;
  position: relative;
  margin: 20px;
  cursor: pointer;
}

.progress {
  height: 10px;
  border-radius: 5px;
  background-color: #ddd;
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
}

.thumb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #3498db;
  position: absolute;
  top: -10px;
  left: 0;
  transition: left ease-out .2s;
}

.btn {
  position: absolute;
  top: 0;
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 16px;
  width: 30px;
  height: 20px;
  padding: 0;
}

.minus {
  left: 0;
  bottom: 0;
}

.plus {
  right: 0;
  bottom: 0;
}

var slider = document.querySelector('.slider');
var thumb = slider.querySelector('.thumb');
var progress = slider.querySelector('.progress');
var plus = slider.querySelector('.plus');
var minus = slider.querySelector('.minus');
var value = 50;

function updateThumb() {
  var percent = value / 100;
  var thumbWidth = thumb.offsetWidth;
  var progressWidth = progress.offsetWidth - thumbWidth;
  var leftPosition = progressWidth * percent;
  thumb.style.left = leftPosition + 'px';
}

function setValue(newValue) {
  if (newValue < 0) {
    value = 0;
  } else if (newValue > 100) {
    value = 100;
  } else {
    value = newValue;
  }
  updateThumb();
}

function increaseValue() {
  setValue(value + 1);
}

function decreaseValue() {
  setValue(value - 1);
}

plus.addEventListener('click', increaseValue);
minus.addEventListener('click', decreaseValue);

setValue(value);

slider.addEventListener('keydown', function(e) {
  switch (e.keyCode) {
    case 37: // left arrow
    case 40: // down arrow
      decreaseValue();
      break;
    case 38: // up arrow
    case 39: // right arrow
      increaseValue();
      break;
  }
});

thumb.title = value + ' -';
thumb.setAttribute('aria-valuenow', value);
thumb.setAttribute('aria-valuetext', value + ' -');

技术说明

这个 CodePen 使用 HTML、CSS、JavaScript 创建。 HTML 用于创建滑块的结构，CSS 用于样式化滑块和箭头，JavaScript 用于处理滑块的逻辑，使得用户可以交互地调整滑块的值。

滑块上的箭头是用 Font Awesome 图标库中的 chevron-down 和 chevron-up 图标创建的。````````````````````````````````

结论

这个带有箭头的光滑滑块 CodePen 适用于需要让用户选择数值的应用场景，可以提供更加友好的交互方式，避免用户需要输入数值。只需要通过简单的 HTML、CSS、JavaScript 编码即可实现。