实现双端滑动窗口 UI

Question

我在滑动窗口下方遇到了 SVG，它不仅可以更改寡妇的开始和结束范围，还可以滚动选择的范围差异。可以在2 中找到相同的链接。

我们怎么称呼它，愤怒选择器？还是滑动窗口？ 我什至无法找到正确的条款来谷歌这个。我们在 Jquery 中是否有类似的解决方案？

大多数范围选择器只允许我们更改开始和结束范围。但不允许我们滚动浏览该差异。

请分享有关如何实现这一点的指针或资源。

问候

Answer 1

查看您的#2 链接中正在执行的操作，他们使用纯 SVG 来绘制所有项目和元素。交互是移动和操纵 SVG 本身。

在 jQuery UI 中没有任何东西可以开箱即用。您可以自定义 jQuery UI Slider 以提供类似的用户界面。考虑以下。这是一个非常轻量级的示例作为概念证明。

$(function() {
  var handle = $("#custom-handle");
  $("#slider").slider({
    create: function() {
      var $self = $(this);
      $(".ui-slider-handle", this).css({
        height: ($self.height() - 4) + "px",
        width: "100px",
        background: "transparent",
        top: "1px",
        borderColor: "black",
        margin: 0
      }).resizable({
        classes: {
          "ui-resizable-e": "ui-icon ui-icon-grip-dotted-vertical",
          "ui-resizable-w": "ui-icon ui-icon-grip-dotted-vertical"
        },
        containment: $self,
        handles: "e, w"
      });
    },
    slide: function(event, ui) {

    }
  });
});

#custom-handle .ui-resizable-e,
#custom-handle .ui-resizable-w {
  top: 40px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="slider" style="height: 100px;">
  <svg class="chart" width="100%">
  <polyline
     fill="none"
     stroke="#0074d9"
     stroke-width="2"
     points="
       1,100
       20,60
       40,80
       60,20
       80,30
       100,75
       120,60,
       140,33
       160,37
       180,40
       200,45
       220,20
       240,2
       260,10
       280,75
       300,60
       320,45
       340,30
       360,20
       380,10
       400,19
       420,12
       440,45
       460,50
       480,80"/>
</svg>
  <div id="custom-handle" class="ui-slider-handle"></div>
</div>

在这里，我将滑块变大，并用代表较大项目的 SVG 填充它。这也可以是图像。我正在使用自定义句柄，如以下演示中所建议的那样：https://jqueryui.com/slider/#custom-handle 这只是设置样式并调整主题以适合您的问题。我还调整了手柄的大小。这有它自己的优点和缺点。

最后要做的是确定如何处理句柄溢出。它将移动到滑块的最后一个位置，并且手柄可能会移出“视口”。您可以添加一些碰撞检测并防止滑块进一步移动。这已在有关 Stack Overflow 的其他几个主题中进行了讨论。

您还可以考虑：http://paperjs.org/

Answer 2

基于@Twisty 的解决方案，以下使用jquery 范围滑块的解决方案。 我敢肯定，我们可以在 SVG 本身中有一个更清洁的解决方案。 只是想知道如何在没有 svg 的情况下实现这一点

$(function() {
  $("#slider-range-custom").slider({
    range: true,
    min: 0,
    max: 100,
    values: [0, 10],
    create: function() {
      var $self = $(this);
      $(".ui-slider-handle", this).css({
        height: ($self.height() - 4) + "px",
        width: "5px",
        top: "1px",
        borderColor: "black",
        margin: 0,
        cursor: 'e-resize',
      })
    },
  
    slide: function(event, ui) {

      var smin = $('#slider-range-custom').attr('min');
      var smax = $('#slider-range-custom').attr('max');


      var span = $('#slider-range-custom').find('span');
      var divRect = $('[class="ui-slider-range ui-corner-all ui-widget-header"]')

      if ((event.clientX >= divRect.offset().left + 10 && event.clientX <= divRect.offset().left + divRect.width() - 10)) {

        if (event.originalEvent) {
          event.preventDefault();

          var prevX = $('#slider-range-custom').attr('prevX') || 0;
          $('#slider-range-custom').attr('prevX', event.clientX);

          if (event.clientX < prevX) {
  
            $('#slider-range-custom').attr('direction', 'left');

          } else {
    
            $('#slider-range-custom').attr('direction', 'right');

          }

          return;

        } else {
          $('#slider-range-custom').attr('direction', 'none');
          return;
        }

      } else {

        $('#slider-range-custom').attr('direction', 'none');
        if (!($(span[0]).hasClass('ui-state-hover') || $(span[1]).hasClass('ui-state-hover'))) {
          event.preventDefault();
          return;
        }

      }


    },
    change: function(event, ui) {
      $('#slider-range-custom').attr('min', ui.values[0]);
      $('#slider-range-custom').attr('max', ui.values[1]);

      var direction = $('#slider-range-custom').attr('direction');

      if (direction == 'left') {
        if (event.originalEvent) {
          $(this).slider('values', [ui.values[0] - 5, ui.values[1] - 5])
        }
      } else if (direction == 'right') {
        if (event.originalEvent) {
          $(this).slider('values', [ui.values[0] + 5, ui.values[1] + 5])
        }
      } 


    },

  });

});

.ui-slider-range {
  background: transparent !important;
  ;
  cursor: move;
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="control-pannel" style="margin: 0 auto;width: 75%;">
  <div id="slider-range-custom" min="0" max="10" class="ui-slider-handle" style="height: 100px; background:transparent;
">
    <svg class="chart" width="100%">
  <polyline
     fill="none"
     stroke="#0074d9"
     stroke-width="2"
     points="
       1,100
       20,60
       40,80
       60,20
       80,30
       100,75
       120,60,
       140,33
       160,37
       180,40
       200,45
       220,20
       240,2
       260,10
       280,75
       300,60
       320,45
       340,30
       360,20
       380,10
       400,19
       420,12
       440,45
       460,50
       480,80"/>
</svg>

  </div>
</div>