Important: Please read the Qt Code of Conduct -

How to set QSlider::handle to round ?

  • Why my handle is an ellipse, I want a circle handle.

    setStyleSheet("QSlider::sub-page:Horizontal { background-color: #9F2425; }"
                  "QSlider::add-page:Horizontal { background-color: #333333; }"
                  "QSlider::groove:Horizontal { background: transparent; height:4px; }"
                  "QSlider::handle:Horizontal { width:10px; border-radius:5px; background:#9F2425; margin: -5px 0px -5px 0px; }");


  • @sonichy This is how I achieved a circular handle:

    QSlider::groove:horizontal { 
    	background-color: black;
    	border: 0px solid #424242; 
    	height: 10px; 
    	border-radius: 4px;
    QSlider::handle:horizontal { 
    	background-color: red; 
    	border: 2px solid red; 
    	width: 16px; 
    	height: 20px; 
    	line-height: 20px; 
    	margin-top: -5px; 
    	margin-bottom: -5px; 
    	border-radius: 10px; 
    QSlider::handle:horizontal:hover { 
    	border-radius: 10px;

    The handle is a little larger than what you want but tweak the parameters where necessary.

  • @sonichy,

    Just adjust width and radius of slider handle
    width 11px; radius:5px;

Log in to reply