Positioning specific ngx-slider legends in different positions

I'm using ngx-slider, and say I have two legends on the first and last values, like so:

sliderOptionsTP1 {
floor: 0,
ceil: 10,
showTicks: true,
stepsArray: [
{ value: 0, legend: 'No electrical safety round/check conducted' },
{ value: 1 },
{ value: 2 },
{ value: 3 },
{ value: 4 },
{ value: 5 },
{ value: 6 },
{ value: 7 },
{ value: 8 },
{ value: 9 },
{ value: 10, legend: 'Electrical safety round/check are conducted at EACH office and other manned buildings at least once a month' }
]
};


And this is the HTML code:

<div class="field col-12 md:col-6 opu-ngx-slider">
<ngx-slider id="opu_input_TP1" [(value)]="data[15].value" [options]="sliderOptionsTP1"></ngx-slider>
</div>


The issue is that the legend text on the right overflows into the div next to it. Is there a way to transform only the rightmost legend using CSS, so that I can move it more to the left and prevent overflow?

Thank you.

Continue reading...