js实现滑杆

实现滑杆的基本方法

使用HTML的<input type="range">元素创建基础滑杆，通过JavaScript监听input或change事件实现交互功能。

<input type="range" id="slider" min="0" max="100" value="50">
<div id="sliderValue">50</div>

const slider = document.getElementById('slider');
const sliderValue = document.getElementById('sliderValue');

slider.addEventListener('input', function() {
  sliderValue.textContent = this.value;
});

自定义滑杆样式

通过CSS覆盖默认样式实现视觉定制，注意需要针对不同浏览器前缀处理。

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  background: #ddd;
  border-radius: 4px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: #4CAF50;
  border-radius: 50%;
  cursor: pointer;
}

双向滑杆实现

创建具有最小值和最大值的范围选择器需要两个滑杆协同工作。

<input type="range" id="minSlider" min="0" max="100" value="30">
<input type="range" id="maxSlider" min="0" max="100" value="70">
<div id="rangeValue">30 - 70</div>

const minSlider = document.getElementById('minSlider');
const maxSlider = document.getElementById('maxSlider');
const rangeValue = document.getElementById('rangeValue');

function updateRange() {
  if (parseInt(minSlider.value) > parseInt(maxSlider.value)) {
    [minSlider.value, maxSlider.value] = [maxSlider.value, minSlider.value];
  }
  rangeValue.textContent = `${minSlider.value} - ${maxSlider.value}`;
}

minSlider.addEventListener('input', updateRange);
maxSlider.addEventListener('input', updateRange);

滑杆动画效果

使用CSS过渡或JavaScript动画实现平滑移动效果。

.smooth-slider {
  transition: all 0.3s ease;
}

function animateSlider(targetValue) {
  const slider = document.getElementById('animatedSlider');
  let currentValue = parseInt(slider.value);
  const step = targetValue > currentValue ? 1 : -1;

  const animation = setInterval(() => {
    currentValue += step;
    slider.value = currentValue;
    slider.dispatchEvent(new Event('input'));

    if (currentValue === targetValue) {
      clearInterval(animation);
    }
  }, 10);
}

垂直方向滑杆

通过CSS旋转或特定属性创建垂直滑杆。

.vertical-slider {
  -webkit-appearance: slider-vertical;
  width: 8px;
  height: 150px;
}

<input type="range" class="vertical-slider" orient="vertical">