49
Views
4
Comments
Solved
Tooltip in range slider surpasses its own margins, why can I solve this?

Hi community,

I need to change some CSS in my range slider widget. So, my problem is that the tooltip (see image below) surpass the right and left margin of the slider. The behaviour that I want is: when the slider is on or near the left/right margin, the tooltip should be align with the slider.

Can you help me find a solution for this situation?

Thanks, best regards,

Tiago Matos.


Range slider.png
2018-10-18 08-34-00
Eric Bulters
 
MVP
Solution

Hi Tiago,

I added the .oml
Sadly I can't do this with pure CSS so I wrote a quick JS (that most certainly will have some room for improvement) that checks the size of the slider and tooltip and if it would cross the margin it moves it slightly in the opposite direction.
I call the function from the script I wrote in the RangeSliderOnChange event.

To make it feel a bit smoother the following css is crucial 


Kind regards,
Eric

ForumDemo.oml
2018-10-18 08-34-00
Eric Bulters
 
MVP

Hi Tiago,

Am I correct in understanding that you are looking for something in this direction?

https://ericbultersos.outsystemscloud.com/ForumDemo/RangeSlider


2024-07-09 13-46-34
Tiago Oliveira Matos

Hello @Eric Bulters, first of all, thank your for our reply. You are correct and it is indeed that behaviour that I want for my range slider. Can you help with this? 

Once again, thank you so much.

Tiago Matos.

2024-07-09 13-46-34
Tiago Oliveira Matos

Hi @Eric Bulters. One more thing, can you send us the oml that you did? I really appreciate your help. Thanks, 

Tiago Matos.

2018-10-18 08-34-00
Eric Bulters
 
MVP
Solution

Hi Tiago,

I added the .oml
Sadly I can't do this with pure CSS so I wrote a quick JS (that most certainly will have some room for improvement) that checks the size of the slider and tooltip and if it would cross the margin it moves it slightly in the opposite direction.
I call the function from the script I wrote in the RangeSliderOnChange event.

To make it feel a bit smoother the following css is crucial 


Kind regards,
Eric

ForumDemo.oml
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.