javascript - 将 10px 'padding' 添加到 slider

Question

我实现了一个基于 this website 的颜色 slider ，与 source file here 。我试图稍微修改一下，但卡住了。

我想做的是，在 slider 的右侧和左侧添加一些填充。意思是，我不希望 slider 一直滑到任一侧，我希望左右两侧各有 10px，所以当你滑动它时，你将无法要一直滑动，您可以将其左右滑动至10px。

希望这张图能让你更清楚:

我尝试将 -10 添加到第 70 行，但没有达到预期的效果。然后我将其添加到第56行，仍然没有达到预期的效果。

如何使 slider 向左移动 10px，而不是向右移动超过 10px？

CodePen

;
(function(window, undefined) {
  "use strict"

  // Some common use variables
  var ColorPicker = window.ColorPicker,
    Tools = ColorPicker || window.Tools, // provides functions like addEvent, ... getOrigin, etc.
    startPoint,
    currentTarget,
    currentTargetWidth = 0;

  /* ---------------------------------- */
  /* ------- Render color patch ------- */
  /* ---------------------------------- */
  var testPatch = document.getElementById('testPatch'),
    renderTestPatch = function(color) { // used in renderCallback of 'new ColorPicker'
      var RGB = color.RND.rgb;
      testPatch.style.cssText =
        'background-color: rgba(' + RGB.r + ',' + RGB.g + ',' + RGB.b + ',' + color.alpha + ');';
    };

  /* ---------------------------------- */
  /* ---------- Color sliders --------- */
  /* ---------------------------------- */
  var sliders = document.getElementById('sliders'),
    sliderChildren = sliders.children,
    type,
    mode,
    max = {
      rgb: {
        r: [0, 255],
        g: [0, 255],
        b: [0, 255]
      },
      hsl: {
        h: [0, 360],
        s: [0, 100],
        l: [0, 100]
      }
    },
    sliderDown = function(e) { // mouseDown callback
      var target = e.target || e.srcElement,
        id,
        len;

      if (target !== this) {
        if (e.preventDefault) e.preventDefault();

        currentTarget = target.id ? target : target.parentNode;
        id = currentTarget.id; // rgbR
        len = id.length - 1;
        type = id.substr(0, len); // rgb
        mode = id.charAt(len).toLowerCase(); // R -> r

        startPoint = Tools.getOrigin(currentTarget);
        currentTargetWidth = currentTarget.offsetWidth - 10;

        sliderMove(e);
        Tools.addEvent(window, 'mousemove', sliderMove);
        startRender();
      }
    },
    sliderMove = function(e) { // mouseMove callback
      var newColor = {};

      // The idea here is (so in the HSV-color-picker) that you don't
      // render anything here but just send data to the colorPicker, no matter
      // if it's out of range. colorPicker will take care of that and render it
      // then in the renderColorSliders correctly (called in renderCallback).
      newColor[mode] = (e.clientX - startPoint.left) / currentTargetWidth * max[type][mode][1];
      myColor.setColor(newColor, type);
    },
    renderColorSliders = function(color) { // used in renderCallback of 'new ColorPicker'
      for (var n = sliderChildren.length; n--;) {
        var child = sliderChildren[n],
          len = child.id.length - 1,
          type = child.id.substr(0, len),
          mode = child.id.charAt(len).toLowerCase();

        if (child.id) {
          child.children[0].style.width = ((color.RND[type][mode] - max[type][mode][0]) / (max[type][mode][1] - max[type][mode][0]) * 100) + '%';
        }
      }
    };

  Tools.addEvent(sliders, 'mousedown', sliderDown); // event delegation
  Tools.addEvent(window, 'mouseup', function() {
    Tools.removeEvent(window, 'mousemove', sliderMove);
    stopRender();
  });

  var doRender = function(color) {
      renderTestPatch(color);
      renderColorSliders(color);
    },
    renderTimer,
    startRender = function(oneTime) {
      renderTimer = window.setInterval(
        function() {
          doRender(myColor.colors);
          // http://stackoverflow.com/questions/2940054/
        }, 13); // 1000 / 60); // ~16.666 -> 60Hz or 60fps

    },
    stopRender = function() {
      window.clearInterval(renderTimer);
    },
    myColor = new Colors();

  doRender(myColor.colors);
})(window);

#testPatch {
  position: relative;
  left: 20px;
  width: 500px;
  height: 300px;
}

<link href="https://rawgit.com/PitPik/colorPicker/master/index.css" rel="stylesheet" />


<div id="testPatch"></div>

<div id="sliders" class="sliders">
  <div id="rgbR">
    <div></div>
  </div>
  <div id="rgbG">
    <div></div>
  </div>
  <div id="rgbB">
    <div></div>
  </div>

  <div id="hslH">
    <div></div>
  </div>
  <div id="hslS">
    <div></div>
  </div>
  <div id="hslL">
    <div></div>
  </div>
</div>


<script src="https://rawgit.com/PitPik/colorPicker/master/colors.js"></script>
<script src="https://rawgit.com/PitPik/colorPicker/master/colorPicker.js"></script>

Answer 1

由于宽度是按 % 计算的，因此无法精确切割 10px。一种可能的解决方法是稍微移动起点(例如 5)并将宽度从 100% 减小(例如减少到 90%):

child.children[0].style.width = ((color.RND[type][mode] - max[type][mode][0]) / (max[type][mode][1] - max[type][mode][0]) * 100) * 0.9 + 5 + '%';