Features?

[ChicagoDave]

I apologize if this is the wrong place to ask these questions...

Two things.

1. Can we make the labels vertical on a horizontal slider? I have a rather large set of values (poker tournament blinds structure) to display and it will never look right if all the labels are overwriting each other).
2. Is there a way to make a solid bar between two selectors and allow the user to move both at the same time by holding that "bar"? So if they have 100 and 500 selected, it could be moved to 200 and 600, 500 and 1000, etc.

[leongersen]

Hi!

For 1, you can style the labels using text-orientation.

For 2, you can use the drag behavior.

[ChicagoDave]

Apologies again. I'm not really a web dev (I was a long time ago).

The drag solution is perfect. Thanks!

But text-orientation is opaque to me. Would I be overriding these styles or ___?

/* Values;
 *
 */
.noUi-value {
  position: absolute;
  white-space: nowrap;
  text-align: center;
}
.noUi-value-sub {
  color: #ccc;
  font-size: 10px;
  text-orientation: sideways;
}

And how can I make (numeric or non-numeric) labels uniform size?

[leongersen]

Sorry, I did this off the top of my head on mobile, and we're looking for writing-mode, not text-orientation.

Adding this CSS will get you this:

.noUi-value-horizontal {
    -webkit-transform: translate(-50%, 25px);
    transform: translate(-50%, 25px);
    writing-mode: vertical-lr;
}

(the transform of -50% centers the value on the pip, the 25px offsets it)

As for:

And how can I make (numeric or non-numeric) labels uniform size?

You can use a filter.

[leongersen]

I've added this (and #1216) as an example to the documentation:

Interacting with pips.

[github-actions[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.