JavaScript 中的简单范围/值滑块

Question

我正在尝试使用 javascript 或 jQuery、div 中的 button 来做一个简单的 Range/Value 滑块。这个滑块应该是在没有 bootstrap 或任何其他 plugin 或 inbuild functions

的情况下完成

我的问题是如何在 div 元素内移动滑块按钮，需要什么 mouse events 才能做到这一点？

注意：这不是幻灯片滑块或图像滑块

Answer 1

您使用拖放事件，属性设置仅限于它所在的 div。看看这个 link Drag Drop Reference Guide，你会看到你需要的一切。当您使用 draggable 和 dropable 时，您可以将移动限制为水平，并设置它绑定到的元素。这将允许您只能从左向右移动，并限制垂直移动，并保持在 div 的边界内。 bootstrap 使用相同的功能来完成它。

这是一个基本示例，展示了所提到的一些内容：

     $('. draggable').draggable({
    axis: 'y',
    handle: '.top'
    drag: function( event, ui ) {
       var distance = ui.originalPosition.top - ui.position.top;

       // if dragged towards top
       if (distance > 0) { 
           //then set it to its initial state
           $('.draggable').css({top: ui.originalPosition.top + 'px'});
       }
   }
});

Answer 2

试试这个：

  $('img').mouseenter(function(){ //or you can use hover()
   // Set the effect type
    var effect = 'slide';

     // Set the options for the effect type chosen
    var options = { direction: "right" };

   // Set the duration (default: 400 milliseconds)
    var duration = 1000;

    $(this).toggle(effect, options, duration);
   });

Answer 3

看看这个简单的滑块实现。随意使用和修改您喜欢的方式：

document.addEventListener('DOMContentLoaded', function() {
  var sliders = document.querySelectorAll('.my-slider');

  [].forEach.call(sliders, function(el, i) {
    var btn = el.firstElementChild,
        span = el.nextElementSibling.querySelector('span'),
        isMoving = false;
    
    var move = function(e) {
      if (isMoving) {
        var min = 0,
            max = el.offsetWidth - btn.offsetWidth,
            mousePos = (e.pageX - el.offsetLeft - (btn.offsetWidth / 2)),
            position = (mousePos > max ? max : mousePos < min ? min : mousePos),
            value = Math.floor((position / max) * 100);        

        btn.style.marginLeft = position + 'px';
        btn.value = value;
        span.textContent = value;
      }
    };
    
    el.addEventListener('mousedown', function(e) {
      isMoving = true;
      move(e);
    });

    document.addEventListener('mouseup', function(e) {
      isMoving = false;
    });

    document.addEventListener('mousemove', function(e) {
      move(e);
    });
  });
});

.my-slider {
  width: 250px;
  border: 1px solid #999;
  border-radius: 3px;
  background-color: #ccc;
  height: 10px;
  line-height: 10px;
}
.my-slider__button {
  border: 1px solid #333;
  border-radius: 3px;
  margin-top: -4px;
  width: 18px;
  height: 18px;
  background-color: #eee;
  display: block;
}

div {
  margin-top: 6px; 
}

<div class="my-slider">
  <button class="my-slider__button"></button>
</div>
<div>
  <strong>Current value: </strong><span></span>
</div>
<div class="my-slider">
  <button class="my-slider__button"></button>
</div>
<div>
  <strong>Current value: </strong><span></span>
</div>
<div class="my-slider">
  <button class="my-slider__button"></button>
</div>
<div>
  <strong>Current value: </strong><span></span>
</div>

JavaScript 中的简单范围/值滑块

Simple range /value Slider in JavaScript

html

javascript

jquery

slider

mouseevent