Use qss to custom QSlider.

[sven1991]

I want to use qss to custom QSlider, and I want to use border-radius property to make QSlider to rounded corners, my code as below.

QSlider::groove:horizontal {
border: 1px solid #FFFFFF;
border-radius: 20px;
}

QSlider::sub-page:horizontal {
background: rgb(90,49,255);
border-radius: 20px;
}

QSlider::add-page:horizontal {
background: transparent;
}
 
QSlider::handle:horizontal {
    width: 0px;                 
    height: 0px;                
    background-color: transparent;    
}

It when the progress bar gets very small, it turns into a rectangle. How can I fix it?
I simply want QSlider to support rounded corners, what are the alternatives?

[Bonnie]

@sven1991 You can't have 20px radius rounded corners when the width/height is less than 20px.

[sven1991]

@Bonnie Thanks for you reply. What should I do? I just want to use QSlider with rounded corner.

[JonB]

@sven1991
Well at some point the width becomes too small to have a 20px rounded corner. I guess if you really want something which works then you'll have to reduce your 20px, by dynamically adding a stylesheet to the slider with a new QSlider::sub-page:horizontal rule with a smaller radius. Or possibly doing it via a dynamic property.

[hskoglund]

You could try using the "white curtains" trick:

extend the progressbar 20px to the left
create a white inert QWidget with the same height and left coord as the progressbar but only 20px width, set to have the same parent widget as the progressbar (so they are siblings).
Then call a stackUnder(QWidget) for the progressbar so that the QWidget sits on top of the first 20px of the progressbar.

You have to remember to skip over the first couple of percent of progress before the progressbar is visible, but the rounded corners will look nice :-)

[Bonnie]

@sven1991 Besides the good suggestions from @JonB and @hskoglund , I also feel that your animation looks more like a QProgressBar than a QSlider. Why would you need a slider with transparent handle and sub-page?
But even with QProgressBar, the radius problem is still as the same as QSlider.