向滑块添加10px“填充”

Question

I implemented a color slider based on this website , with the source file here . I'm trying to modify it a bit, and got stuck.

What I'm trying to do is, make sort of a padding on the right and left side of the slider. Meaning, I don't want the slider to go all the way to either side, I want there to be 10px at the right and left side, so when you slide it, you won't be able to slide it all the way, you can slide it up to 10px on the right and left side.

Hope this picture makes it clearer:

I tried adding -10 to line 70, but it didn't give the desired effect. Then I added it to line 56, and still didn't get the desired effect.

How can I make the slider go up to 10px to the left, and not past 10px to the right?

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

Not sure this breaks the required functionality, but it does provide the correct padding:

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

Answer 2

Since width is calculated in % you can't cut 10px precisly. A possible workaround is to move a starting point a little (eg 5) and reduce width from 100% (eg to 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 + '%';