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

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

2 голосов
/ 12 марта 2019

Я попытался установить ширину 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; }

Хотя это дает мне ту узкую ручку, которую я хочу, ручка больше не покрывает переход в дорожке между белыми зеленый, но этот переход скорее открыт, в отличие от того, когда вы не меняете ширину ручки.

Ответы [ 2 ]

1 голос
/ 18 марта 2019

Одним из осложнений использования nouislider является получение полного ответа. Я сделал один ниже, включив ответ lg102, и добавил несколько вещей чтобы сделать это более очевидным. Мне нужно использовать! Важные в 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>
0 голосов
/ 13 марта 2019

Вы устанавливаете значение 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;

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

demonstration of change slider handle width using CSS

...