Important: Please read the Qt Code of Conduct -

QSlider stylesheet with circle handle

  • Hi,
    I want to create a QSlider, with a big circle as handle (for touchscreen use).
    I'm using a normal vertical handle with the following stylesheet:

    .QSlider {
        min-width: 100px;
        max-width: 100px;
        background: #5F4141;
    .QSlider::groove:vertical {
        border: 1px solid #262626;
        width: 10px;
        background: #393939;
        margin: 0 12px;
    .QSlider::handle:vertical {
        background: #22B14C;
        border: 5px solid #B5E61D;
        height: 50px;
        margin: -30px -30px;
    	border-radius: 30px;


    • My current handle cuts, when it reaches the end of the groove:
      0_1536133440905_Qt 37.png

    • So, because the handle gets cut at the ends, the handle slides faster then the pulling mouse does. So it kind of slides under the pressed mouse "away".

    • And last but not least, when I try to make a circle out of it by setting the border-radius of the handle in the stylesheet, the border is only rounded outside the groove:
      0_1536134427177_Qt 38.png
      Im using Qt 5.9.1 running on Windows 10.
      Is it even possible to do what I want just by modifying the stylesheet and the settings of the slider?
      Thanks for answers!

  • Lifetime Qt Champion


    This thread might get you further.

  • @SGaist
    Yes, thank you!
    So, the problem with the faster sliding handle and the cutted handle at the ends got solved now (it just was the mistake I did in the handle-stylesheet, where I set the x-margin to -30, it sould be 0), but I still can't make the handle round, because in the other thread it only works because of the bigger groove (I don't want the groove to be as wide as the handle, it should be narrower)

  • Lifetime Qt Champion

    Then you might want to consider implementing your own QAbstractSlider subclass and paint the groove yourself, you'll have more control on its look.

Log in to reply