9
Views
8
Comments
RangeSlider with rounded corners

Hi everyone,


 Quick issue we are having here right now with the range slider.

 We would like to achieve something like this:


Where the left side of the slider is rounded!

Now, if we don't do anything to the slider filling it looks like this:

And if we add a border-radius:20px ( for example) to it, then, because the width of the blue filling part grows and shrinks with a transform, the border radius also is morphed because of it, instead of having a constant look to it.


Does anyone know how to fix this issue?


Greetings,
Guilherme Menescal Dantas.



mvp_badge
MVP
Rank: #89

Hi Guilherme,

Could you please mentioned the type of application you are working with?

Traditional/Reactive/Mobile application?


Regards,

Benjith Sam

mvp_badge
MVP
Rank: #15

Hi Guilherme,

You also need to add the border radius to the element that fills the range slider. In Outsystems UI that class is noUi-connects 

Regards,

Marcelo

So this is a mobile application!

As for the element that fills it, if I add the border radius to the element that fills the range slider I get the issue that we cannot solve, it goes as follows:


1- we add the css to the element that fills the slider


2- this border-radius is applied, and then the user can move the slider. Let's look at a picture when the slider is more to the beginning and the end

As you can see, with the radius set it does affect the radius of the element we want to affect, but, because the transform is there, affecting the filling element, it affects the the radius as well! How can we make sure that the radius is not affected by the transform??

As an indication of what I mean with the transform, you can notice it in the first picture in the console, the scale goes up and down as the user uses the slider!


thanks


mvp_badge
MVP
Rank: #15

Hi Guilherme,

You should add the border radius to noUi-connects and not noUi-connect. My suggestion ends with a s. The div above the one with the transform.

Regards,

Marcelo  

Thanks for the help Marcelo! I actually tried what you said but it still does not work, look! 

Is this not the right place to put it?


Greetings,

Guilherme Menescal Dantas

mvp_badge
MVP
Rank: #89

Hi Guilherme,

Could you please try with the below mentioned CSS definition..

.noUi-connects, 
.range-slider .noUi-connect {
    height: 50px;
    border-radius: 100px;
}


Hope this helps you!


Regards,

Benjith Sam

Rank: #611

Hi Guilherme, 

Try to enclose this widget inside the container and make width of element as "Fill", then inside the style property of container put CSS as mention below

border-radius:20px;

Hope this will help you

Regards,

Vipasha


mvp_badge
MVP
Rank: #15

Hi Guilherme,

You have 2 Border-radius with important for same class. You need to fix this. Can you share this in a simple solution that we can look at?

Regards,

Marcelo