danielvianna
16th September 2015, 18:31
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;
}
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;
}