Question

我正在尝试创建自定义范围滑块。除了当我尝试以像素为单位获取当前值时，一切都很好。

以下是相关代码:(在function sliderMove第30行）

cursorPosition = ((e.touches && e.touches[0].clientX) || e.clientX) - startPoint.left;
rangePosition = clamp(cursorPosition, _sliderPositions.rangeStart, _sliderPositions.rangeEnd);
value = percentToPixel((rangePosition / _sliderPositions.currentValue) * 100, 0, 500);

function percentToPixel(percent, min, max) {
    if (typeof max === 'undefined') return;
    return ((percent / 100) * (max - min)) + min;
}

value没有给出正确的结果。它应该介于0 - 500之间，但根据窗口的大小，它会提供1 + - 500+。（如果您调整窗口大小，然后重新加载，再次尝试滑块，您将看到它为值提供了不同的最小值和最大值。）

JSFiddle

console.clear();

function RangeSlider( /** DOM Elem */ parentElem) {
  var wrapperElem = document.getElementsByClassName('wrapperElem')[0],
    slider = document.getElementsByClassName('slider')[0],
    sliderRange = document.getElementsByClassName('sliderRange')[0],
    sliderCursor = document.getElementsByClassName('sliderCursor')[0],
    output = document.getElementById('output'),
    myButton = document.getElementById('myButton');

  var sliderDimention = slider.offsetWidth,
    cursorRadius = sliderCursor.offsetHeight / 2,
    startPoint,
    currentTarget,
    value = 0,
    _sliderPositions = {},
    borderWidth = 1;

  startPoint = getOrigin(wrapperElem.children[0]);
  sliderDimention = slider.offsetWidth;


  function sliderDown(e) {
    e.preventDefault();

    window.addEventListener('mousemove', sliderMove);
    sliderMove(e);
  }

  function sliderMove(e) {
    var rangePosition = 0;
    var cursorPosition = 0;
    reconfigVars();
    if (typeof e === 'object') {
      cursorPosition = ((e.touches && e.touches[0].clientX) || e.clientX) - startPoint.left;
    } else {
      cursorPosition = pixelToPercent(value, 0, 500) / 100 * sliderDimention;
    }
    //console.log(cursorPosition);

    rangePosition = clamp(cursorPosition, _sliderPositions.rangeStart, _sliderPositions.rangeEnd);
    cursorPosition = clamp(cursorPosition - cursorRadius, _sliderPositions.cursorStart, _sliderPositions.cursorEnd);

    sliderCursor.style.transform = 'translateX(' + cursorPosition + 'px)';
    sliderRange.style.transform = 'scaleX(' + rangePosition + ')';

    if (typeof e === 'object') {
      value = percentToPixel((rangePosition / _sliderPositions.currentValue) * 100, 0, 500);
    }
    output.innerHTML = value;

  }


  function reconfigVars() {
    _sliderPositions.rangeStart = borderWidth * 2;
    _sliderPositions.rangeEnd = sliderDimention - borderWidth * 2
    _sliderPositions.cursorStart = startPoint.left - cursorRadius + borderWidth * 2;
    _sliderPositions.cursorEnd = sliderDimention - borderWidth * 2 - cursorRadius * 2;
    _sliderPositions.currentValue = sliderDimention - borderWidth * 2 - startPoint.left - cursorRadius;
  }

  myButton.addEventListener('click', function() {
    sliderMove(500);
    value = 500;
  });






  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 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
  };
}

function clamp(val, moreThan, lessThan) {
  if (typeof lessThan === 'undefined') lessThan = 1;
  if (typeof moreThan === 'undefined') moreThan = 0;
  return Math.min(lessThan, Math.max(moreThan, val));
}

function pixelToPercent(pixel, min, max) {
  if (typeof max === 'undefined') return;
  return ((pixel - min) / (max - min)) * 100;
}

function percentToPixel(percent, min, max) {
  if (typeof max === 'undefined') return;
  return ((percent / 100) * (max - min)) + min;
}

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

<div class="wrapperElem">
  <div class="slider">
    <div class="sliderRange"></div>
    <div class="sliderCursor"></div>
  </div>
</div>
<br />
<div id="output"></div>
<button id="myButton">Click Me</button>

Answer 1

0-500的偏移量＆gt; 1 - 514（例如）是因为滑块背景上的鼠标位置用于确定值，而不是滑块光标的xoffset。超出的值将与500端的14 * 500 / sliderwidth和0端的500 / sliderwidth成比例。

然而，这并没有为您提供像素值：因为您获得了滑块值的百分比，您只计算了它 - 填充了多少。然后，您将其缩放到滑块的值范围（0 - 500）。如果您需要以像素为单位的值，不占用一定百分比，或者您丢失了单位信息，并且必须通过缩放银币的尺寸来取回它。

鼠标可能位于的地方涉及3个区域，您的价值获取代码需要考虑到这一点：

当光标位于最左侧位置时，滑块最左边部分和滑块光标中心之间的区域 - 以像素为单位：0px到7px（光标宽度的一半）。
如上所述，但最右边。以像素为单位:( sliderwidth-7）px to sliderwidth px。
介于两者之间的区域：7px - （sliderwidth-7）px

要正确获取0 - 500（滑块值不是px中的左偏移量），您需要测量区域＃3的百分比，将鼠标位置与滑块夹紧到相同的值。换句话说，您需要使用cursorPosition而不是rangePosition，但您的百分比将与区域＃3的大小相对，而不是滑块的宽度。

此外，窗口调整大小问题是由于此代码段未在reconfigVars()内运行：

  sliderDimention = slider.offsetWidth;

至少元素维度和位置可能会因调整大小而发生变化，它应该进入resize事件，然后调用reconfigVars()以及根据其更新滑块的任何其他事件尺寸。

如果有更多内容我会更新我的答案，但我认为这一切都需要调整。

除了以上细节之外......我可以做的最简单的改变是：

if (typeof e === 'object') {
    value = percentToPixel( (
      (sliderPosition - _sliderPositions.cursorStart) / (_sliderPositions.cursorEnd - _sliderPositions.cursorStart)
    ) * 100, 0, 500);
}

这是考虑到第一段和第三段，如果您想要像素读数，则需要注意第二段。

第一段解释

如果您想象滑块布局的结构形式，您可以担心这些位置：

/-------------------------------------\
|  (cursor-start)       (cursor-end)  |
\-------------------------------------/
        slider r-offset - border*2 = ^
 cursor r-most extent = ^
   ^ = cursor left-most extent
 ^ = slider offset + border

我现在修改的计算现在计算光标位置从最左边的范围到最大范围的％。换句话说，光标的整个运动范围是％除数应该是什么，并且相对于该运动范围的开始的光标位置应该是分子。希望这是有道理的..

以像素为单位获取滑块的值

JSFiddle

1 个答案:

第一段解释