Question

我尝试设置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; }

以为这确实给了我想要的狭窄手柄，手柄不再覆盖白色和绿色之间的过渡轨迹，而是这种过渡是暴露的，与当您不更改手柄宽度时。

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

Answer 2

您正在将left的{{1}}值设置为.noUi-handle。 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（8/2）

要进行的最小更改为：

-4

您可以在文档中进行尝试：

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

2 个答案: