对于 NoUiSlider，如何设置手柄/拇指的宽度？答案

【问题标题】：For NoUiSlider, how do I set the width of a handle/thumb?对于 NoUiSlider，如何设置手柄/拇指的宽度？
【发布时间】：2019-03-18 23:51:35
【问题描述】：

我试图设置 NoUiSlider 的宽度通过css：

.noUi-horizontal .noUi-handle {
    width:8px;
    height:25px;
    left: 0px;
    top: -8px;
    border: 0px solid #000000;
    border-radius: 0px;
    background: #000;
    cursor: default;
    box-shadow: none; /*inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;*/ }

.noUi-handle {
     left:0px; }

.noUi-active {
    box-shadow: none /*inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;*/ }

.noUi-handle:before, .noUi-handle:after {
    content: "";
    display: block;
    position: absolute;
    height: 14px;
    width: 0px;
    background: #000000;
    left: 14px;
    top: 6px; }

.noUi-handle:after {
    left: 0px; }

认为这确实给了我想要的窄把手，但把手不再覆盖在白色和绿色之间的轨道过渡，而是暴露了过渡，不像当您不更改手柄宽度时。

【问题讨论】：

标签： javascript css nouislider

【解决方案1】：

使用 nouislider 的一个复杂问题是得到一个完整的答案。我在下面做了一个包含 lg102 的响应，并添加了一些东西让它更明显。我需要在 CSS 中使用 !important 来制作部分属性生效。

像这个例子这样的东西可以很好地补充 nouislider 的网站文档，已经好很多了超过 JS 库的平均文档。

<head>
   <script type="text/javascript" src="nouislider.js"></script> 
   <link href="nouislider.css" rel="stylesheet">
   <script>
     function init(){
        noUiSlider.create(slider_id, {
                start: [25, 75],
                connect: [false, true, false],
                range: {
                    'min': 0, 
                    'max': 100
                }
            })
      }
   </script>
   <style>
     .noUi-handle {
        width: 10px !important;
        right: -5px !important; /*  must be (width / 2) * -1 */
        background: #AA00AA;
     }
   </style>
</head>
<body onload="init()" >
<h3>slide test1</h3>
<div id="slider_id" style="width:300px;height:20px;"/>
</body>

【讨论】：

【解决方案2】：

您正在将.noUi-handle 的left 值设置为0。 LTR 滑块的默认 CSS 如下所示：

.noUi-handle {
    width: 34px;
    height: 28px;
    left: auto;
    right: -17px; /* The 17 here is half of the 34 width. The - pulls it in the other direction */
    top: -6px;
}

由于您要将宽度更改为8，因此您应该将right（或left，取决于页面方向）设置为-4 (8/2)。

要做的最小更改是添加：

width: 10px;
right: -5px;

您可以在文档中尝试一下：

【讨论】：

Lg102 首先，-17 不是 34 的一半。17 是。二、.noUi-handle { width: 34px;高度：28px；左：-17px； /* 这里的 -17 是 34 宽度的一半 */ top: -6px; nouislider.css v. 13.1.1 中没有出现，但该文件中的选择器 .noUi-handle 有两个不同的 css 主体。第三，将 left: 更改为 4px 或 -4px （根据您的评论无法确定我应该使用哪个，我从左到右使用）似乎没有影响我的问题。我正在使用 html 的：