{"id":650,"date":"2010-03-10T14:48:21","date_gmt":"2010-03-10T21:48:21","guid":{"rendered":"http:\/\/thesmithfam.org\/blog\/?p=650"},"modified":"2019-08-12T07:15:31","modified_gmt":"2019-08-12T13:15:31","slug":"fancy-qslider-stylesheet","status":"publish","type":"post","link":"https:\/\/thesmithfam.org\/blog\/2010\/03\/10\/fancy-qslider-stylesheet\/","title":{"rendered":"Fancy QSlider Stylesheet"},"content":{"rendered":"<p>Seriously. I don&#8217;t know how I ever created a Qt user interface without using stylesheets. This was, by far, the best idea Trolltech ever had.<\/p>\n<p>For today&#8217;s show-and-tell, I give you a nifty-looking QSlider with some nice gradient style applied to it:<\/p>\n<p><img decoding=\"async\" src=\"\/images\/slider-stylized.png\" \/><\/p>\n<p>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.<\/p>\n<p>Here&#8217;s the stylesheet code (I used <a href=\"http:\/\/qt.nokia.com\/doc\/4.6\/stylesheet-examples.html#customizing-qslider\">Qt&#8217;s example<\/a> as a starting point).<\/p>\n<pre style=\"font-size: 9pt; border: 2px solid #016; padding: 5px; color: white; background: #333;\">\r\nQSlider::groove:horizontal {\r\nborder: 1px solid #bbb;\r\nbackground: white;\r\nheight: 10px;\r\nborder-radius: 4px;\r\n}\r\n\r\nQSlider::sub-page:horizontal {\r\nbackground: qlineargradient(x1: 0, y1: 0,    x2: 0, y2: 1,\r\n    stop: 0 #66e, stop: 1 #bbf);\r\nbackground: qlineargradient(x1: 0, y1: 0.2, x2: 1, y2: 1,\r\n    stop: 0 #bbf, stop: 1 #55f);\r\nborder: 1px solid #777;\r\nheight: 10px;\r\nborder-radius: 4px;\r\n}\r\n\r\nQSlider::add-page:horizontal {\r\nbackground: #fff;\r\nborder: 1px solid #777;\r\nheight: 10px;\r\nborder-radius: 4px;\r\n}\r\n\r\nQSlider::handle:horizontal {\r\nbackground: qlineargradient(x1:0, y1:0, x2:1, y2:1,\r\n    stop:0 #eee, stop:1 #ccc);\r\nborder: 1px solid #777;\r\nwidth: 13px;\r\nmargin-top: -2px;\r\nmargin-bottom: -2px;\r\nborder-radius: 4px;\r\n}\r\n\r\nQSlider::handle:horizontal:hover {\r\nbackground: qlineargradient(x1:0, y1:0, x2:1, y2:1,\r\n    stop:0 #fff, stop:1 #ddd);\r\nborder: 1px solid #444;\r\nborder-radius: 4px;\r\n}\r\n\r\nQSlider::sub-page:horizontal:disabled {\r\nbackground: #bbb;\r\nborder-color: #999;\r\n}\r\n\r\nQSlider::add-page:horizontal:disabled {\r\nbackground: #eee;\r\nborder-color: #999;\r\n}\r\n\r\nQSlider::handle:horizontal:disabled {\r\nbackground: #eee;\r\nborder: 1px solid #aaa;\r\nborder-radius: 4px;\r\n}\r\n<\/pre>\n<p>Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Seriously. I don&#8217;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&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-650","post","type-post","status-publish","format-standard","hentry","category-code-and-cruft"],"_links":{"self":[{"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/posts\/650","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/comments?post=650"}],"version-history":[{"count":10,"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/posts\/650\/revisions"}],"predecessor-version":[{"id":1524,"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/posts\/650\/revisions\/1524"}],"wp:attachment":[{"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/media?parent=650"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/categories?post=650"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/tags?post=650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}