Для NoUiSlider, как мне установить ширину ручки/большого пальца?

Я попытался установить ширину 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
person user1343035    schedule 12.03.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Одной из сложностей использования nouislider является получение полного ответа. Я сделал один ниже, включив ответ lg102, и добавил несколько вещей, чтобы сделать его более очевидным. Мне нужно было использовать !important в CSS, чтобы некоторые свойства вступили в силу.

Что-то вроде этого примера станет хорошим дополнением к документу веб-сайта 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>
person user1343035    schedule 18.03.2019

arrow_upward
0
arrow_downward

Вы устанавливаете значение left для .noUi-handle на 0. CSS по умолчанию для ползунков LTR выглядит следующим образом:

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

Вы можете попробовать это в документации:

демонстрация изменения ширины ручки ползунка с помощью CSS

person Lg102    schedule 13.03.2019
comment
Lg102 Во-первых, -17 это не половина 34. 17 это. Во-вторых, .noUi-handle { width: 34px; высота: 28 пикселей; слева: -17px; /* Здесь -17 составляет половину ширины 34 */ top: -6px; } не появляется в nouislider.css v. 13.1.1, но в этом файле есть два разных тела css для селектора .noUi-handle. В-третьих, изменение левого: на 4 пикселя или -4 пикселя (не могу понять, что мне следует использовать на основе вашего комментария, я использую слева направо), похоже, не повлияло на мою проблему. Я использую html из: ‹div id='mi_marks_slider_id' style='display:inline-block; ширина: 270 пикселей; высота: 10 пикселей; '›‹/div› - person user1343035; 14.03.2019