1

On MacOS 10.6, the default handle of QSlider is a ball, if a QSlider has ticks, then the handle changes its appearence (one side arrow shape), I want this kind of handle, but I don't like the ticks Qt provides. So, I'd like to store that picture of handle as qrc resource and use stylesheet to customize the look of qslider. That's the only way I can figure out.

Could anyone tell me how to write the style sheet, I mean that everything keep the same but only the handle changes.

BTW, there's another question. For a default QSlider on MacOS, the handle can't reach to the most left and most right position of the groove, how to use stylesheet to adjust it?

Royt
  • 199
  • 4
  • 14

2 Answers2

2

You must change entire QSlider to manage such things. Otherwise it will fallback into default Mac OS X painting style. So you must change border and background of QSlider and handle itself. Take a look at this example

Kamil Klimek
  • 12,884
  • 2
  • 43
  • 58
  • Thanks, now I know that many attributes should change together to make the customized look take effect. But, how to write the style sheet to make a qslider look like a native mac slider? – Royt Apr 25 '12 at 08:26
  • Well, I would use some graphics to do so. But why do you want to change native behaviour of slider on Mac OS X? – Kamil Klimek Apr 25 '12 at 08:40
  • Because I want to draw the ticks for slider by myself, but not use the dufault ticks Qt provides. So I should know the begin points and end points of the handle. But in a native Mac slider, the handle can't reach the most left and most right places, there is some offset, since the qt use Mac API to draw the Mac-style qslider, so I can't get the details. I want to custom it by style sheet and make it look like native control. – Royt Apr 26 '12 at 01:28
  • Then use some graphics to provide "quite native" look'n'feel – Kamil Klimek Apr 27 '12 at 12:03
2

Add an image of the handle you want in your resources (.qrc) file. It should be quite easy to Photoshop the handle you like (or use some other program). Then try adding this in your code

setStyleSheet("QSlider::handle {image: url(:/resources/image.png);}");

You might need to experiment a bit with the padding and margins to get the slider positioned the way you want.

Anthony
  • 8,570
  • 3
  • 38
  • 46
  • After I set the picture of handle, I found that other properties cannot take effect, such as "margin", by set the handle's margin the handle can expand outside the groove or leave an offset. – Royt Apr 26 '12 at 08:04
  • I tried on Windows, QSlider::handle:horizontal {background-image: url(:/images/handle.png); } could work, while "image" property can't. but when use "background-image" property, the height and width can't work, if the image is small, it will be painted many times. And I tried padding-left and padding-right, they have no effect. – Royt May 09 '12 at 02:13
  • @Royt padding works fine for me on Windows. I'm using `setStyleSheet("QSlider::handle {image: url(:/resources/image.png); padding-left: 5px;}");`. Regarding the background image tiling itself, I think that is normal. If you don't want it to tile, you can subclass QWidget, give it a QImage for the background (not using style sheets), and then put a QSlider on top. You can remove the background of the QSlider however you like, e.g., using style sheets, since the QImage will serve as the new background, and can be resized however you like. – Anthony May 09 '12 at 02:44