For NoUiSlider, how do I set the width of a handle/thumb?

问题

I have attempted to set the width of a NoUiSlider via the 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; }

Thought this does give me the narrow handle that I want, the handle no longer covers the transition in the track between white and green, but rather that transition is exposed, unlike when you don't change the handle width.

回答1:

One of the complications of using nouislider is getting a complete answer. I've made one below incorporating lg102's response, and added a few things to make it more obvious. I needed to use !important in the CSS to make some properties take effect.

Something like this example would make a good addition to nouislider's website doc, which is already way better than the average doc for a JS library.

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

You are setting the left value for .noUi-handle to 0. The default CSS for LTR sliders looks like this:

.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;
}

Since you are changing the width to 8, you should set the right (or left, depending on the page orientation) to -4 (8/2).

The minimum changes to make are adding:

width: 10px;
right: -5px;

You can try this out in the documentation:

来源：https://stackoverflow.com/questions/55130554/for-nouislider-how-do-i-set-the-width-of-a-handle-thumb

标签

javascript

css

nouislider