Pip labels in noUiSlider exceed the page when they're long

user_10517872 0
Viewed 555

In this example, the first and last pip labels are unreadable, because they are centered under their pip.
How is it possible to move the labels to the slider's center, so they don't exceed the container the slider is in?
And: How can I avoid that the pip labels overlap?

var slider = document.getElementById('slider');
var labels = {
    1: 'A very long pip label that exceeds the page',
    2: 'This one might overlap with another pip label',
    3: 'The last one will also hide to the right',
};

noUiSlider.create(slider, {
    start: 1,
    step: 1,
    range: {
        'min': 1,
        'max': 3
    },
    pips: {
        mode: 'steps',
        filter: function (value, type) {
            return type === 0 ? -1 : 1;
        },
        format: {
            to: function (value) {
                return labels[value];
            }
        }
    }
});
.noUi-marker-horizontal.noUi-marker-large {
    height: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.5.0/nouislider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.5.0/nouislider.min.js"></script>
<div id="slider"></div>

nouislider css
2 Answers

Regarding the first and last pips on the slider range, you can left/right align them using the :first-child and :last-child pseudo selectors, like so:

.noUi-marker:first-child {
    text-align: left;
}
.noUi-marker:last-child {
    text-align: right;
}

Regarding overlapping pips, there are many approaches depending on your requirements. For example, you could hide the smaller value labels on smaller screens:

@media (max-width: 1000px) {
    .noUi-value-sub {
        display: none;
    }
}
user_7752650

I solved the same problem by wrapping the string in different lines (for devices with small screens this is necessary) and using the space somewhere proper. I.e., 'A very long pip label that exceeds the page' can be written as

Array(10).fill('\xa0').join('')+'A very long pip label'+'<br>'+Array(10).fill('\xa0').join('')+'that exceeds the page'

This may look stupid but it works for me.

user_145951470
Related