How can I make the handle of a QSlider circular and taller than the groove?

andyP

For a touch screen GUI I would like a QSlider with a large circular handle.
So far I have managed to make this:

by using the following stylesheet:

QSlider::groove:horizontal { 
	background: #C9CDD0;
	height: 50px; 
	border-radius: 4px;
}

QSlider::handle:horizontal { 
	background-color: #51A0D5; 
	width: 50px; 
	height: 50px; 
	border-radius: 25px; 
}

I would like the groove to be only 15 pixels high while the handle stays the same shape.
How do I do this?
Reducing the height of the groove to 15px causes the handle to be "squashed" to the same height.
Oddly enough the handle in this case also becomes completely rectangular.
I know that there examples on this forum of how to make a circular handle that is taller than the groove.
However these examples are for smaller handles.
Whenever I try to adjust such an example to a larger handle it "breaks" and the handle becomes rectangular again, since I do not understand the logic behind these examples.

hskoglund

Hi, there's a similar topic where https://forum.qt.io/topic/135428/qt-4-8-qslider-handle-size/31 where I proposed a solution of using two QSliders on top of each other (you can use ->stackUnder() to select the z-order)

The top one has a stylesheet something like this:
QSlider::groove { background: transparent; height: 40px; } and a handle with any preferable size.
The bottom one has a vanilla, normal handle and a groove with any size you want.
You also need to make the bottom handle always follow the top handle so that it stays "invisible" (it's all in my code sample in the other post)

This might not be the easiest solution but by using two QSliders you "decouple" the dependencies between a single QSlider's handle and groove.

Nicolas.D

Quite late but styling can do it alone, no need of stacking two sliders.
You have to allow the handle to expand outside of the groove, using the margin property (as indicated in QSlider styling sample):

QSlider::groove:horizontal { 
	background: #C9CDD0;
	height: 15px; 
	border-radius: 4px;
}
QSlider::handle:horizontal { 
	background-color: #51A0D5; 
	width: 50px; 
	height: 50px; 
	/* Handle is placed by default on the contents rect of the groove. Expand outside of the groove.
	   Required offset is -ceil((handle height - groove height) / 2.) = -ceil((50 - 15) / 2.) = -18 */
	margin: -18px 0px;
	border-radius: 25px; 
}