Question

我正在尝试创建自定义范围滑块。我无法以百分比（即1 - 100）获得游标位置。

以下是相关代码：

var cursorPosition = 1 - clamp((sliderDimention - (e.clientX - startPoint.left)) / sliderDimention, 0, 1);
sliderRange.style.transform = 'scaleX' + '(' + (cursorPosition * sliderDimention - cursorRadius) + ')';

function clamp(value, min, max) {
    return Math.min(Math.max(value, min), max);
}

我有一个sliderCursor和一个sliderRange（绿色背景）。我能够实现sliderCursor，但我遇到了sliderRange的问题。它并不完全是光标的位置。

如何让sliderRange位于光标的确切位置？此外，sliderRange超过滑块边框。我该如何防止这种情况？

（请不要发布任何JQuery或其他内容＆＃34;您可以使用＆＃39;这个＆＃39;插件＆＃34;答案。我这样做是为了学习目的，我想要创建我自己的。谢谢！）

JSFiddile

＆＃13;

function RangeSlider( /** DOM Elem */ parentElem) {
  var wrapperElem = document.getElementsByClassName('wrapperElem')[0],
    slider = document.getElementsByClassName('slider')[0],
    sliderCursor = document.getElementsByClassName('sliderCursor')[0],
    sliderRange = document.getElementsByClassName('sliderRange')[0];

  var sliderDimention = slider.offsetWidth,
    cursorRadius = sliderCursor.offsetHeight / 2,
    startPoint,
    currentTarget;


  function sliderDown(e) {
    e.preventDefault();

    currentTarget = null;
    var sliderWithDescendents = wrapperElem.querySelectorAll('*');
    for (var i = 0; i < sliderWithDescendents.length; i++) {
      sliderWithDescendents[i]
      if (sliderWithDescendents[i] === e.target || wrapperElem === e.target) {
        currentTarget = wrapperElem.children[0];
        break;
      }
    }
    if (currentTarget === null) return;

    startPoint = getOrigin(currentTarget);
    sliderDimention = slider.offsetWidth;

    window.addEventListener('mousemove', sliderMove);
    sliderMove(e);
  }

  function sliderMove(e) {
    var cursorPosition = e.clientX - startPoint.left - cursorRadius;
    cursorPosition = clamp(cursorPosition, startPoint.left - cursorRadius + 1, sliderDimention - 1 - cursorRadius * 2);
    sliderCursor.style.transform = 'translateX(' + (cursorPosition) + 'px)';
    cursorPosition = 1 - clamp((sliderDimention - (e.clientX - startPoint.left)) / sliderDimention, 0, 1);
    sliderRange.style.transform = 'scaleX' + '(' + (cursorPosition * sliderDimention - cursorRadius) + ')';
  }

  function mouseUpEvents() {
    window.removeEventListener('mousemove', sliderMove);
  }
  wrapperElem.addEventListener('mousedown', sliderDown);
  window.addEventListener('mouseup', mouseUpEvents);
}

var sliderTest = document.getElementById('sliderTest');
var test = new RangeSlider(sliderTest);






function clamp(value, min, max) {
  return Math.min(Math.max(value, min), max);
}


function getOrigin(elm) {
  var box = (elm.getBoundingClientRect) ? elm.getBoundingClientRect() : {
      top: 0,
      left: 0
    },
    doc = elm && elm.ownerDocument,
    body = doc.body,
    win = doc.defaultView || doc.parentWindow || window,
    docElem = doc.documentElement || body.parentNode,
    clientTop = docElem.clientTop || body.clientTop || 0, // border on html or body or both
    clientLeft = docElem.clientLeft || body.clientLeft || 0;

  return {
    left: box.left + (win.pageXOffset || docElem.scrollLeft) - clientLeft,
    top: box.top + (win.pageYOffset || docElem.scrollTop) - clientTop
  };
}

＆＃13;

.wrapperElem {
  height: 18px;
  width: 100%;
  cursor: pointer;
  display: flex;
}
.slider {
  height: 100%;
  width: calc(100% - 100px);
  border: 1px solid black;
  position: relative;
}
.sliderCursor {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid black;
}
.sliderRange {
  background-color: green;
  width: 1px;
  height: 100%;
  transform-origin: left;
  position: absolute;
}

＆＃13;

<div class="wrapperElem">
  <div class="slider">
    <div class="sliderRange"></div>
    <div class="sliderCursor"></div>
  </div>
</div>

＆＃13;

Answer 1

首先，我认为你不应该从sliderMove函数更新DOM。在我看来，你的对象应该有一个“私有”变量_percent（你可以在创建对象实例时初始化）。在sliderMove中你应该只更新关于几件事的_percent变量：偏移量，滑动元素的大小等......目的是计算新的百分比。

然后在sliderMove函数的末尾，您只需调用refreshDOM，它也将负责刷新视图。这样做，您将能够阻止光标在sliderMove函数中移动（如果_prevent == 0且偏移量为负或者如果_prevent == 100且偏移量为正，例如......）

对于你的光标位置问题，我不知道......我不重现，你的代码似乎没问题......

Answer 2

您的问题是，您是从cursorRadius功能中减去scaleX，同时，您已经考虑了cursorPosition中的游标半径。

尝试：

sliderRange.style.transform = 'scaleX' + '(' + (cursorPosition * sliderDimention) + ')';

function RangeSlider( /** DOM Elem */ parentElem) {
  var wrapperElem = document.getElementsByClassName('wrapperElem')[0],
    slider = document.getElementsByClassName('slider')[0],
    sliderCursor = document.getElementsByClassName('sliderCursor')[0],
    sliderRange = document.getElementsByClassName('sliderRange')[0];

  var sliderDimention = slider.offsetWidth,
    cursorRadius = sliderCursor.offsetHeight / 2,
    startPoint,
    currentTarget;


  function sliderDown(e) {
    e.preventDefault();

    currentTarget = null;
    var sliderWithDescendents = wrapperElem.querySelectorAll('*');
    for (var i = 0; i < sliderWithDescendents.length; i++) {
      sliderWithDescendents[i]
      if (sliderWithDescendents[i] === e.target || wrapperElem === e.target) {
        currentTarget = wrapperElem.children[0];
        break;
      }
    }
    if (currentTarget === null) return;

    startPoint = getOrigin(currentTarget);
    sliderDimention = slider.offsetWidth;

    window.addEventListener('mousemove', sliderMove);
    sliderMove(e);
  }

  function sliderMove(e) {
    var cursorPosition = e.clientX - startPoint.left - cursorRadius;
    cursorPosition = clamp(cursorPosition, startPoint.left - cursorRadius + 1, sliderDimention - 1 - cursorRadius * 2);
    sliderCursor.style.transform = 'translateX(' + (cursorPosition) + 'px)';
    cursorPosition = 1 - clamp((sliderDimention - (e.clientX - startPoint.left)) / sliderDimention, 0, 1);
    sliderRange.style.transform = 'scaleX' + '(' + (cursorPosition * sliderDimention) + ')';
  }

  function mouseUpEvents() {
    window.removeEventListener('mousemove', sliderMove);
  }
  wrapperElem.addEventListener('mousedown', sliderDown);
  window.addEventListener('mouseup', mouseUpEvents);
}

var sliderTest = document.getElementById('sliderTest');
var test = new RangeSlider(sliderTest);






function clamp(value, min, max) {
  return Math.min(Math.max(value, min), max);
}


function getOrigin(elm) {
  var box = (elm.getBoundingClientRect) ? elm.getBoundingClientRect() : {
      top: 0,
      left: 0
    },
    doc = elm && elm.ownerDocument,
    body = doc.body,
    win = doc.defaultView || doc.parentWindow || window,
    docElem = doc.documentElement || body.parentNode,
    clientTop = docElem.clientTop || body.clientTop || 0, // border on html or body or both
    clientLeft = docElem.clientLeft || body.clientLeft || 0;

  return {
    left: box.left + (win.pageXOffset || docElem.scrollLeft) - clientLeft,
    top: box.top + (win.pageYOffset || docElem.scrollTop) - clientTop
  };
}

.wrapperElem {
  height: 18px;
  width: 100%;
  cursor: pointer;
  display: flex;
}
.slider {
  height: 100%;
  width: calc(100% - 100px);
  border: 1px solid black;
  position: relative;
}
.sliderCursor {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid black;
}
.sliderRange {
  background-color: green;
  width: 1px;
  height: 100%;
  transform-origin: left;
  position: absolute;
}

<div class="wrapperElem">
  <div class="slider">
    <div class="sliderRange"></div>
    <div class="sliderCursor"></div>
  </div>
</div>

Div不在光标位置

JSFiddile

2 个答案: