«
»

Fancy QSlider Stylesheet

March 10th, 2010

Seriously. I don’t know how I ever created a Qt user interface without using stylesheets. This was, by far, the best idea Trolltech ever had.

For today’s show-and-tell, I give you a nifty-looking QSlider with some nice gradient style applied to it:

The handle has a nice hover effect, the bar has a moving gradient as you slide the slider, and it looks good when disabled. Notice also the rounded corners. No image files were harmed in the making of this widget.

Here’s the stylesheet code (I used Qt’s example as a starting point).

QSlider::groove:horizontal {
border: 1px solid #bbb;
background: white;
height: 10px;
border-radius: 4px;
}

QSlider::sub-page:horizontal {
background: qlineargradient(x1: 0, y1: 0,    x2: 0, y2: 1,
    stop: 0 #66e, stop: 1 #bbf);
background: qlineargradient(x1: 0, y1: 0.2, x2: 1, y2: 1,
    stop: 0 #bbf, stop: 1 #55f);
border: 1px solid #777;
height: 10px;
border-radius: 4px;
}

QSlider::add-page:horizontal {
background: #fff;
border: 1px solid #777;
height: 10px;
border-radius: 4px;
}

QSlider::handle:horizontal {
background: qlineargradient(x1:0, y1:0, x2:1, y2:1,
    stop:0 #eee, stop:1 #ccc);
border: 1px solid #777;
width: 13px;
margin-top: -2px;
margin-bottom: -2px;
border-radius: 4px;
}

QSlider::handle:horizontal:hover {
background: qlineargradient(x1:0, y1:0, x2:1, y2:1,
    stop:0 #fff, stop:1 #ddd);
border: 1px solid #444;
border-radius: 4px;
}

QSlider::sub-page:horizontal:disabled {
background: #bbb;
border-color: #999;
}

QSlider::add-page:horizontal:disabled {
background: #eee;
border-color: #999;
}

QSlider::handle:horizontal:disabled {
background: #eee;
border: 1px solid #aaa;
border-radius: 4px;
}

Enjoy!

This entry was posted on Wednesday, March 10th, 2010 at 2:48 pm and is filed under Code and Cruft. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

14 Responses to “Fancy QSlider Stylesheet”

  1. Jamie Says:
    March 11th, 2010 at 11:36 am

    I love it when you talk QT!!

  2. tom Says:
    June 22nd, 2010 at 11:31 pm

    thanks !!

    i adapted your stylesheet for a vertical slider, and made a small change in the colour gradient :

    QSlider::groove:horizontal
    {
    border: 1px solid #bbb;
    background: white;
    width: 10px;
    border-radius: 4px;
    }

    QSlider::sub-page:vertical
    {
    background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 #fff, stop: 0.4999 #eee, stop: 0.5 #ddd, stop: 1 #eee );
    border: 1px solid #777;
    width: 10px;
    border-radius: 4px;
    }

    QSlider::add-page:vertical {
    background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 #78d, stop: 0.4999 #46a, stop: 0.5 #45a, stop: 1 #238 );

    border: 1px solid #777;
    width: 10px;
    border-radius: 4px;
    }

    QSlider::handle:vertical {
    background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #eee, stop:1 #ccc);
    border: 1px solid #777;
    height: 13px;
    margin-top: -2px;
    margin-bottom: -2px;
    border-radius: 4px;
    }

    QSlider::handle:vertical:hover {
    background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #fff, stop:1 #ddd);
    border: 1px solid #444;
    border-radius: 4px;
    }

    QSlider::sub-page:vertical:disabled {
    background: #bbb;
    border-color: #999;
    }

    QSlider::add-page:vertical:disabled {
    background: #eee;
    border-color: #999;
    }

    QSlider::handle:vertical:disabled {
    background: #eee;
    border: 1px solid #aaa;
    border-radius: 4px;
    }

  3. giowck Says:
    July 18th, 2010 at 2:57 pm

    Hi, your tutorials about Qt Style Sheet are very good!

    thanks

  4. joro Says:
    August 20th, 2010 at 5:54 am

    yeah, very advanced example of the stylesheets of QSlider.

    Cheers :)

  5. ethnvine Says:
    September 1st, 2010 at 11:59 pm

    Excellent example!

  6. Thahir Says:
    November 4th, 2010 at 5:24 am

    thanks..great

  7. Multar Says:
    December 17th, 2010 at 2:08 am

    Big thanks!

  8. fr33mind Says:
    December 30th, 2010 at 4:04 pm

    Can i use this code under the GNU GPL?

    Thanks.

  9. Dave Says:
    December 30th, 2010 at 4:05 pm

    Use it under whatever license you like.

  10. Sergey Says:
    March 20th, 2011 at 7:47 pm

    thanks!

  11. Mohammad Says:
    April 18th, 2011 at 3:17 pm

    Thank you!

  12. Franco Says:
    June 16th, 2011 at 5:33 pm

    Hi,
    how can I modify your code to have some similar to the youtube volume slider?
    I can not achieve it.
    Regards,
    Franco

  13. Dave Says:
    June 20th, 2011 at 9:30 am

    Franco,

    What aspects of YouTube’s volume slider do you want to reproduce?

    The example in this article is *very* close to that. It should be straight forward to complete.

    –Dave

  14. Emmi Says:
    January 16th, 2012 at 3:03 am

    Thanks for the tutorials, they have been very helpful. I have had a lot of trouble customizing spinboxes, so is there any chance you would make a tutorial about them?

Leave a Reply