Fancy QSlider Stylesheet
March 10th, 2010Seriously. 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!
March 11th, 2010 at 11:36 am
I love it when you talk QT!!
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;
}
July 18th, 2010 at 2:57 pm
Hi, your tutorials about Qt Style Sheet are very good!
thanks
August 20th, 2010 at 5:54 am
yeah, very advanced example of the stylesheets of QSlider.
Cheers :)
September 1st, 2010 at 11:59 pm
Excellent example!
November 4th, 2010 at 5:24 am
thanks..great
December 17th, 2010 at 2:08 am
Big thanks!
December 30th, 2010 at 4:04 pm
Can i use this code under the GNU GPL?
Thanks.
December 30th, 2010 at 4:05 pm
Use it under whatever license you like.
March 20th, 2011 at 7:47 pm
thanks!
April 18th, 2011 at 3:17 pm
Thank you!
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
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
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?