添加10px＆＃39;填充＆＃39;到滑块

Question

我使用this website实现了基于source file here的颜色滑块。我试图稍微修改一下，然后卡住了。

我尝试做的是，在滑块的右侧和左侧进行填充。意思是，我不希望滑块一直向左侧移动，我希望左右两侧有10px，所以当你滑动它时，你不会成为能够一直滑动它，你可以在右侧和左侧向上滑动10px。

希望这张照片更加清晰：

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

如何让滑块向左移动10px，而不向右移动10px？

CodePen

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

不确定这会破坏所需的功能，但它确实提供了正确的填充：

.sliders>div {
  padding: 0 10px;
}

Answer 2

由于宽度以％计算，因此您无法精确地削减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 + '%';