16-QSlider

/********************************************QSlider*********************************************************/
/*常规设置*/
QSlider{
background:transparent;
}
QSlider::groove:vertical{
background:transparent;
width:4px;
border-radius:2px;
}
/*未划过的部分*/
QSlider::add-page:vertical{
background-color:#FFFFFF;
width:4px;
border-radius:2px;
}
/*已划过的部分*/
QSlider::sub-page:vertical{
background-color:rgba(196, 196, 196, 0.5);
width:4px;
border-radius:2px;
}
/*中间的滑块*/
QSlider::handle:vertical{
height:20px;
width:20px;
border-image:url(:/images/handle.png);
margin-top:0px;
margin-bottom:0px;
margin-left:-8px;
margin-right:-8px;
}
/*鼠标经过中间的滑块*/
QSlider::handle:vertical:hover{
height:20px;width:20px;
border-image:url(:/images/plus.png);
margin-top:0px;
margin-bottom:0px;
margin-left:-8px;
margin-right:-8px;
}
/*鼠标按下中间的滑块*/
QSlider::handle:vertical:pressed{
height:20px;width:20px;
border-image:url(:/images/plus.png);
margin-top:0px;
margin-bottom:0px;
margin-left:-8px;margin-right:-8px;
}

注意：

因为使用了border-image这种样式，因此groove宽度+扩展宽度最好不小于图片宽度，否则会宽度会缩放。如果使用background-image样式，可能显示位置不对。