The range slider seems to not start at 0, even though the value is 0. See the gif below:



I haven't applied any CSS to the slider or container that would change the behavior. Below is the properties of the slider:

Why is the slider behaving in this manner?

Hello Jason, I just solved this exact problem on my RangeSlider.

Basically what i did was changing the "left" CSS parameter of the noUI-handle class from the default "-10px" value to "-50%"


The class appears when you inspect here:


The solution is on the imege bellow:


NOTE: To be able to edit this CSS class I had to copy it from the Base Theme CSS to the UI module's CSS.


I hope this works for you! Good luck :)


Hi,


I'm interested in this, can you send me the oml so i can check that bug?

I tried to replicate it multiple time on a test app and couldn't do it.

Interesting. Thanks for the input, but it still didn't work. 

By making that change it did move the slider over a bit, but it still doesn't start from 0. 


How did you come across your solution initially? Does it work in both portrait and landscape views?

Hugo Duarte wrote:

Hi,


I'm interested in this, can you send me the oml so i can check that bug?

I tried to replicate it multiple time on a test app and couldn't do it.

Interestingly enough, if I copy that screen and paste it into a new test app, it works fine. 



Jason Matti wrote:

Interesting. Thanks for the input, but it still didn't work. 

By making that change it did move the slider over a bit, but it still doesn't start from 0. 


How did you come across your solution initially? Does it work in both portrait and landscape views?


I tried to dig the RangeSlider widget on the OutSystemsUIMobile and find anything that would configure the handle object. I didn't find anything so i started to see what changed when i moved the handle. I noticed that a "left" property was being manipulated by the handle movement.



Then, I went to the previous refered CSS class and changed the left parameter to -50% (which for me makes sense because if the handle is stuck in the middle of the bar and being interpreted as a 0 in the value, -50% would send it half bar backwards. But this is just a vague guess, I believe there is some javascript error behind this).


At the end, this solution worked out fine for me and works in both orientations. It's a shame it is not working for you as it is for me. But considering your answer, I'd try to change the left parameter to something like -75% and play around the inspector to see if the issue is fexed. (Even though this can be a "hammered" solution...)


Solution

I have found a (probably accidental) solution. 

Looks like when I copied over the screen to the new test app, it defaulted all of the containers to Left Aligned, which most were center aligned in the original app. 

When I switched the containers in the original app to left aligned, it fixed my issue. 

So my theory is, the slider's handle was also affected by the container's center alignment, thus moving it to the center. Changing the parent container's alignment to Left align allowed the handle to start at 0.

Solution

Jason Matti wrote:

I have found a (probably accidental) solution. 

Looks like when I copied over the screen to the new test app, it defaulted all of the containers to Left Aligned, which most were center aligned in the original app. 

When I switched the containers in the original app to left aligned, it fixed my issue. 

So my theory is, the slider's handle was also affected by the container's center alignment, thus moving it to the center. Changing the parent container's alignment to Left align allowed the handle to start at 0.


I also did that in mine and it worked! It actually makes sense to be solved that way.

Glad we came to a solution! :)