QSlider handle ignores border radius when height is reduced

Question

I am trying to create a gui application to control the volume level of my machine using Qt5 and C++. This is what I kind of want to achieve.

So, I created the basic layouts and added the QSlider, and then used the following stylesheet to style it:

QSlider::groove:horizontal
{
    height: 16px;
    background: yellow;
    margin: 2px;
}
QSlider::handle:horizontal
{
    background: blue;
    width: 16px;
    height: 16px;
    margin: -5px 6px -5px 6px;
    border-radius:11px;
    border: 3px solid #ffffff;
}

I got the following result:

First the handle is an eclipse, and not a circle. But I wanted to reduce the height of the groove, so I modified the above stylesheet:

QSlider::groove:horizontal
{
    height: 10px; // modified here
    background: yellow;
    margin: 2px;
}
QSlider::handle:horizontal
{
    background: blue;
    width: 16px;
    height: 16px;
    margin: -5px 6px -5px 6px;
    border-radius:11px;
    border: 3px solid #ffffff;
}

And now, the handle of the slider became a rectangle.

Can anyone please answer what's causing it to behave like this, or point me to some docs.

Answer 1

your border-radius should be proportional to the length and width to become a circle.

Try this style :

QSlider::groove:horizontal {
    border-radius: 1px;
    height: 3px;
    margin: 0px;
    background-color: rgb(52, 59, 72);
}
QSlider::groove:horizontal:hover {
    background-color: rgb(55, 62, 76);
}
QSlider::handle:horizontal {
    background-color: rgb(85, 170, 255);
    border: none;
    height: 40px;
    width: 40px;
    margin: -20px 0;
    border-radius: 20px;
    padding: -20px 0px;
}
QSlider::handle:horizontal:hover {
    background-color: rgb(155, 180, 255);
}
QSlider::handle:horizontal:pressed {
    background-color: rgb(65, 255, 195);
}

And This is for your style (I change margin and padding)

QSlider::groove:horizontal
{
    height: 16px;
    background: yellow;
    margin: 2px;
}
QSlider::handle:horizontal
{
    background: blue;
    width: 16px;
    height: 16px;
    margin: -4px 0;
    padding: -4px 0px;
    border-radius:11px;
    border: 3px solid #ffffff;
}