Блог

Главная - Вопросы по программированию - Для noUiSlider, как мне установить ширину дескриптора / большого пальца?

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

#javascript #css #nouislider

#javascript #css #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; }

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

Ответ №1:

Одной из сложностей использования 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>

Ответ №2:

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

Комментарии:

1. Lg102 Во-первых, -17 — это не половина от 34. 17 — это. Во-вторых, .noUi-handle { width: 34px; height: 28px; left: -17px; /* -17 здесь составляет половину ширины 34 * / top: -6px; } не отображается в nouislider.css v. 13.1.1, но в этом файле есть два разных css-тела для селектора .noUi-handle. В-третьих, изменение left: на 4px или -4px (не смог определить, что мне следует использовать, основываясь на вашем комментарии, я использую слева направо), похоже, не повлияло на мою проблему. Я использую html: <идентификатор div=’mi_marks_slider_id’ style=’дисплей:встроенныйблок; ширина: 270 пикселей; высота: 10 пикселей;’></div>