QT之qss教程-QSlider

1、水平方向，如图

/* 滑动槽设置 */
QSlider::groove:horizontal {
	border:2px solid #999999;
	height:20px;
	background:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);
	margin:2px 0;
}

/* 滑块设置 */
QSlider::handle:horizontal {
	background:qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);
	border:2px solid #5C5C5C;
	border-radius:5px;
	width:18px;
	
	/* 滑块上下边与滑道重合 */
	margin:-2px 0;
}

2、垂直方向，如图

/* 滑道设置 */
QSlider::groove:vertical {
	background:red;
	
	/* 绝对位置 */
	position:absolute;
	
	/* absolutely position 4px from the left and right of the widget */
	left:4px;
	right:4px;
}

/* 滑块设置 */
QSlider::handle:vertical {
	height:10px;
	background:#112F58;
	
	/* 滑块宽度超过滑道宽度 */
	/* expand outside the groove */
	margin:0 -4px;
}

/* 滑块两侧滑道的颜色 */
QSlider::add-page:vertical {
	background:blue;
}

QSlider::sub-page:vertical {
	background:green;
}