JavaScript中的简单范围/值滑块

Posted 2023-05-08

【中文标题】JavaScript中的简单范围/值滑块

【英文标题】：Simple range /value Slider in JavaScript

【发布时间】：2016-01-05 12:21:27

【问题描述】：

我正在尝试通过在div 中使用javascript 或jQuery、button 来做一个简单的范围/值滑块。这个滑块应该在没有bootstrap 或任何其他pluginor 的情况下完成inbuild functions

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

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

【问题讨论】：

内置函数。你的意思是不使用 Dragable 和 Dropable？

是的，我的意思是不使用 jQueryUI。但是可以使用javascript函数

【参考方案1】：

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

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>

【讨论】：

在最新版本的 Chrome、Firefox、Edge 和 IE11/10/9 上测试。在 IE8 上也进行了测试，但没有通过（不支持 addEventListener，也不支持 event.pageX，也不支持 Array.prototype.forEach）。如果您需要支持 IE8，则必须获取一些 polyfill 才能使其工作。

什么是最新版本的属性和旧版本的等效功能

【参考方案2】：

您使用拖放事件，其属性设置仅限于其所在的 div。查看此链接Drag Drop Reference Guide，您将看到所需的一切。当你使用可拖拽时，你可以限制移动到水平方向，也可以设置它绑定的元素。这将允许您只从左到右移动，并限制垂直移动，并保持在 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');
       
   
);

【讨论】：

谢谢，但是有没有什么选项可以在不使用 jqueryUi 的情况下在 javascript 或 jquery 中执行此操作

我的朋友，我不会马上知道的。我需要研究它。任何类似的事情，我都会使用他们预先设置的库，而不是重新发明***。除非我代表我做研究，看看他们是如何处理的。也许看看 jQuery UI 方法的源代码，并从那里了解如何处理它。

基本上有一篇关于这个主题的很棒的帖子，其中有一个纯 js 的解释。 ***.com/a/11961845/2762516

【参考方案3】：

试试这个：

  $('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);
   );

【讨论】：

如果您对此感到满意，请接受答案:)

上面的例子和你的回答类似，效果很好。但我正在寻找 javascript/jquery。 js中有没有slideRight方法