QTslider vertical handle customization problem - CSS

[danielvianna]

Hey guys, I'm a QT newbie and UI designer.

I'm experiencing a problem editing the slider handle in CSS. Basically I can't create a rounded handle for the vertical slider, but it works for the horizontal. I have no clue what I should do.

Here's a screenshot:

http://i.snag.gy/F9BPh.jpg
Note: I'm using the app plugin QSS Editor 0.5.6 to do my code.

I would like to avoid uploading an image for the handle if possible.

Here's my code:

/******** Qslider Horizontal ********/

QSlider::groove:horizontal {
border: 1px solid #bbb;
background: grey;
height: 6px;
border-radius: 4px;
}

QSlider::sub-page:horizontal {
background: #5bbdea;
border: 1px solid #777;
height: 10px;
border-radius: 4px;
}

QSlider::add-page:horizontal {
background: 474b59;
border: 1px solid #777;
height: 10px;
border-radius: 4px;
}

QSlider::handle:horizontal {
background: #ced7d9;
border: 1px solid #777;
width: 13px;
margin-top: -5px;
margin-bottom: -3px;
border-radius: 7px;
}

QSlider::handle:horizontal:hover {
background: white;
border: 1px solid #444;
border-radius: 50%;
width: 13px;
margin-top: -5px;
margin-bottom: -3px;
border-radius: 7px;
}

QSlider::sub-page:horizontal:disabled {
background: #bbb;
border-color: #999;
}

QSlider::add-page:horizontal:disabled {
background: #eee;
border-color: #999;
}

QSlider::handle:horizontal:disabled {
background: #eee;
border: 1px solid #aaa;
border-radius: 4px;
}

/******** Qslider Vertical ********/

QSlider::groove:vertical {
border: 1px solid #bbb;
background: grey;
width: 6px;
border-radius: 2px;
}

QSlider::sub-page:vertical {
background: #5bbdea;
border: 1px solid #777;
width:: 10px;
border-radius: 4px;
}

QSlider::add-page:vertical {
background: 474b59;
border: 1px solid #777;
width: 10px;
border-radius: 4px;
}

QSlider::handle:vertical {
background: #ced7d9;
border: 1px solid #777;
height: 10px;
margin-right: -5px;
margin-left: -5px;
margin-top: -1px;
border-radius: -5px;
}

QSlider::handle:vertical:hover {
background: white;
border: 1px solid #444;
border-radius: 50%;
width: 13px;
margin-top: -5px;
margin-bottom: -3px;
border-radius: 7px;
}

QSlider::sub-page:vertical:disabled {
background: #bbb;
border-color: #999;
}

QSlider::add-page:vertical:disabled {
background: #eee;
border-color: #999;
}

QSlider::handle:vertical:disabled {
background: #eee;
border: 1px solid #aaa;
border-radius: 4px;
}

[danielvianna]

This was solved:

I used an image for the handle.
For me it makes no sense to use margins to make the handle circular, what is the logic?


new code

/******** Qslider Horizontal ********/

QSlider::groove:horizontal {
border: none;
height: 6px;
background: grey;
margin: 1px;
border-radius: 2px;
}

QSlider::sub-page:horizontal {
background: #5bbdea;
height: 6px;
border-radius: 4px;
}

QSlider::add-page:horizontal {
background: #474b59;
height: 10px;
border-radius: 4px;
}

QSlider::handle:horizontal {
image : url(/Controls/slider_handle2.png);
width: 22px;
margin: -10px;
}


/******** Qslider Vertical ********/
QSlider::groove:vertical {
border: none;
width: 6px;
background: grey;
margin: 1px;
border-radius: 2px;
}

QSlider::sub-page:vertical {
background: #5bbdea;
height: 6px;
border-radius: 4px;
}

QSlider::add-page:vertical {
background: #474b59;
height: 10px;
border-radius: 4px;
}

QSlider::handle:vertical {
image : url(:/Controls/slider_handle2.png);
height: 22px;
margin: -10px;
}