Back to Blog home

Styling QSlider, QHeaderView

Published on Friday June 29, 2007 by Girish Ramakrishnan in Qt KDE | Comments

QSlider
I have been avoiding QSlider for sometime now. Sliding the QSlider would have been straightforward if the code was correct :). You need this teeny weeny patch against 4.3 (If you are using a week old 4.3 snapshot, you are good). Comments inline.


QSlider::groove:horizontal {
border: 1px solid #999999;
height: 8px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);
}
QSlider::handle:horizontal {
background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);
border: 1px solid #5c5c5c;
width: 18px;
margin: -2px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
border-radius: 3px;
}

Here's how it looks:
Slider

If you require more control, play around with something like this (note that this is a vertical slider):

QSlider::groove:vertical {
background: red;
position: absolute; /* absolutely position 4px from the left and right of the widget. setting margins on the widget should work too... */
left: 4px; right: 4px;
}
QSlider::handle:vertical {
height: 10px;
background: green;
margin: 0 -4px; /* expand outside the groove */
}
QSlider::add-page:vertical {
background: white;
}
QSlider::sub-page:vertical {
background: pink;
}

QHeaderView
I thought I will have a go at something that looks like the header view in this plasmoid and show some advanced usage of the new pseudo states but I gotta run (and this posts been sitting as a draft for way too long).


QHeaderView::section {
background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #616161, stop: 0.5 #505050, stop: 0.6 #434343, stop:1 #656565);
color: white;
padding-left: 4px;
border: 1px solid #6c6c6c;
}

Here's how it looks:
Header view

Subscribe to Our Blog

Stay up to date with the latest marketing, sales and service tips and news.

We are updating our comment system and you could face some issues. Please write to us at feedback@qt.io to report issues/bugs.