Javascript 添加10px'；填充'；滑动

我实现了一个基于的颜色滑块，使用。我试着修改一下，结果卡住了

我想做的是，在滑块的左右两侧做一个填充。意思是，我不希望滑块一直滑到任何一边，我希望在左右两边都有

10px

，所以当你滑动它时，你将无法一直滑动它，你可以将它滑动到左右两边的

10px

希望这张图片能让你更清楚：

我尝试将

-10

添加到第70行，但没有达到预期效果。然后我把它添加到第56行，但仍然没有得到想要的效果

如何使滑块向上移动到左侧的

10px

，而不是向右移动

10px

；
（函数（窗口，未定义）{
“严格使用”
//一些常用变量
var ColorPicker=window.ColorPicker，
Tools=ColorPicker | | window.Tools，//提供addEvent、…getOrigin等函数。
起点，
当前目标，
currentTargetWidth=0；
/* ---------------------------------- */
/*------渲染色块------*/
/* ---------------------------------- */
var testPatch=document.getElementById（'testPatch'），
renderTestPatch=函数（颜色）{//用于“new ColorPicker”的renderCallback
var RGB=color.RND.RGB；
testPatch.style.cssText=
'背景色：rgba（'+RGB.r+'、'+RGB.g+'、'+RGB.b+'、'+color.alpha+'）；'；
};
/* ---------------------------------- */
/*------彩色滑块------*/
/* ---------------------------------- */
var sliders=document.getElementById（'sliders'），
sliderChildren=sliders.children，
类型，
模式
最大值={
rgb：{
r:[0255]，
g:[0255]，
b:[0255]
},
hsl：{
h:[0360]，
s:[01100],，
l:[01100]
}
},
sliderDown=函数（e）{//mouseDown回调
var target=e.target | | e.src元素，
身份证件
伦恩；
如果（目标！==此）{
如果（e.preventDefault）e.preventDefault（）；
currentTarget=target.id？目标：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（当前目标）；
currentTargetWidth=currentTarget.offsetWidth-10；
滑块移动（e）；
工具.addEvent（窗口，'mousemove'，sliderMove）；
startRender（）；
}
},
sliderMove=函数（e）{//mouseMove回调
var newColor={}；
//这里的想法是（因此在HSV颜色选择器中）您不需要
//在这里渲染任何内容，但只需将数据发送到colorPicker即可
//如果超出范围，颜色选择器将处理并渲染它
//然后在renderColorSliders中正确调用（在renderCallback中调用）。
newColor[mode]=（e.clientX-startPoint.left）/currentTargetWidth*max[type][mode][1]；
myColor.setColor（新颜色，类型）；
},
renderColorSliders=函数（颜色）{//用于“new ColorPicker”的renderCallback
对于（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（滑块'mousedown'，sliderDown）；//事件委派
Tools.addEvent（窗口'mouseup'，函数（）{
Tools.removeEvent（窗口、'mousemove'，滑块移动）；
stopRender（）；
});
var doRender=函数（颜色）{
renderTestPatch（颜色）；
渲染颜色滑块（颜色）；
},
渲染器，
startRender=功能（一次性）{
renderTimer=window.setInterval(
函数（）{
多伦德（myColor.colors）；
// http://stackoverflow.com/questions/2940054/
}，13）；//1000/60）；//~16.666->60Hz或60fps
},
stopRender=函数（）{
clearInterval（renderTimer）；
},
myColor=新颜色（）；
多伦德（myColor.colors）；
})（窗口）
#测试补丁{
位置：相对位置；
左：20px；
宽度：500px；
高度：300px；
}
不确定这会破坏所需的功能，但它确实提供了正确的填充：

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

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

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

因为宽度是以%计算的，所以不能精确地切割10px。一种可能的解决方法是稍微移动一个起点（例如5），并将宽度从100%减小到90%：

因为宽度是以%计算的，所以不能精确地切割10px。一种可能的解决方法是稍微移动一个起点（例如5），并将宽度从100%减小到90%：

感谢您的回答，但我认为解决方案需要通过JavaScript完成。您的解决方案在视觉上可行，但当鼠标经过“填充”时，颜色仍会发生变化。@Horay，问题是所有6个滑块都是使用1个公式计算的：
child.children[0]。style.width=（（color.RND[type][mode]-max[type][mode][0]）/（max[type][mode 1]-max[type][mode 0]*100）+'。如果你对它做了更改，所有的滑块都会被更改，我怀疑这是你想要的。我希望所有的滑块都有一个“填充”。谢谢！这是可行的，但当您滑到其中一个位置时，光标有点偏离side@Horay，使用第70行，类似于
newColor[mode]=（（e.clientX-startPoint.left-17）/currentTargetWidth*max[type][mode][1]*1.09）。但是这样的变化看起来很丑陋：我渴望得到答案，但是