QSlider handle ignores border radius when height is reduced - c++

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;
}