noUiSlider - разместить обе подсказки над слайдером?

Question

Можно ли указать положение подсказок, которые рисует noUiSlider? Похоже, что по умолчанию он помещает первый над слайдером, а второй ниже. Я понимаю цель юзабилити здесь, но я хотел бы поставить как выше, так и ниже.

Пример (с подсказками выше и ниже): http://jsfiddle.net/leongersen/z83oz9np/2/

noUiSlider.create(div, {
    start: [0, 50], // 2 handles
    range: {
        'min': 0,
        'max': 50
    },
    tooltips: true // 2 tooltips but how to position?
});

Answer 1

Я не верю, что есть возможность указать положение меток. В версии CSS, которую вы используете, есть

.noUi-horizontal .noUi-handle-upper .noUi-tooltip { 
  bottom:-32px 
}

Который вы можете переопределить, чтобы быть таким же, как другой ярлык:

  .noUi-horizontal .noUi-handle-upper .noUi-tooltip {
    top: -32px;
    bottom: initial;
  }

Смотрите обновленную скрипку: http://jsfiddle.net/z83oz9np/20/

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

Answer 2

Вы можете перезаписать атрибут "bottom" из класса css ".noUi-horizontal .noUi-tooltip", например, чтобы всплывающая подсказка шла под ползунком:

.noUi-horizontal .noUi-tooltip  {bottom: -130%;}

Answer 3

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

.noUi-vertical .noUi-handle-upper .noUi-tooltip {
    right: unset;
    left: 120%;
}

Это удаляет право: 120%; из всплывающей подсказки и перемещает его относительно слева, как нижняя подсказка.

Answer 4

для меня ни одно из этих решений не сработало, поэтому я остановился на своем собственном:

      .noUi-horizontal .noUi-tooltip 
{
  left: unset !important;
}

.noUi-target 
{
  direction: unset !important;
}

Выполнено.