QSlider and UISwitch
This is how to write Qt stylesheet code to make QSlider just like iPhone UISwitch on/off toggle button.
1. In QDesigner, drag QSlider into your form.
2. Modify properties. Make “minimum” to be “0″, “maximum” to be “1″, “orientation” to be “Horizontal”, etc.
3. Insert following code into the stylesheet field.
QSlider {
min-width:80px;
min-height:27px;
max-width:80px;
max-height:27px;
}
QSlider::groove:horizontal {
background-image: url(:/images/slider_bg.png);
background-repeat: no-repeat;
background-position:center;
margin:0px;
border:0px;
padding:0px;
}
QSlider::sub-page:horizontal {
background-image: url(:/images/slider_on.png);
background-repeat: no-repeat;
background-position:left;
background-origin:content;
margin:0px;
border:0px;
padding-left:0px;
}
QSlider::add-page:horizontal {
background-image: url(:/images/slider_off.png);
background-repeat: no-repeat;
background-position:right;
background-origin:content;
margin:0px;
border:0px;
padding-right:0px;
}
QSlider::handle:horizontal {
background-image: url(:/images/slider_handle.png);
width:39px;
height:27px;
margin:0px;
border:0px;
padding:0px;
}
QSlider::sub-page:horizontal:disabled {
background-image: url(:/images/slider_on_disabled.png);
background-repeat: no-repeat;
background-position:left;
background-origin:content;
margin:0px;
border:0px;
padding-left:0px;
}
QSlider::add-page:horizontal:disabled {
background-image: url(:/images/slider_off_disabled.png);
background-repeat: no-repeat;
background-position:right;
background-origin:content;
margin:0px;
border:0px;
padding-right:0px;
}
QSlider::handle:horizontal:disabled {
background-image: url(:/images/slider_handle.png);
width:39px;
height:27px;
margin:0px;
border:0px;
padding:0px;
}
4. Create your own png files like following images.
slider_bg.png
slider_on.png
slider_off.png
slider_handle.png
5. Done.
