QSlider with absolute and chunked gradient - c++

Question

I am trying to make a QSlider that has an absolute gradient and a chunked style in the QSlider::add-page part of the slider.
Following Style Sheet code:
QSlider::groove:vertical {
background: #021017;
BORDER-radius: 5px;
position: absolute;
left: 10px;
right: 10px;
}
QSlider::handle:vertical {
height: 10px;
background: #0b1707;
border: 1px solid #46992b;
margin: 0px -10px;
/* expand outside the groove */
border-radius: 5px;
}
QSlider::add-page:vertical {
BORDER-radius: 5px;
border: 1px solid #0e566d;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #46992b, stop: 0.5 #0e566d, stop: 1 #d16a4b);
}
QSlider::sub-page:vertical {
background: #021017;
BORDER-radius: 5px;
border: 1px solid #0e566d;
margin: 0px 1px 0px 1px;
}
QSlider::handle:vertical:hover {
background-color: #46992b;
}
And I get the following output:
But as I move the handle the gradient changes based on the height from the bottom of the slider to the handle. I would like the gradient to be based on the height from the bottom of the slider to the top. Meaning changing the handle position will not change the look of it.
Also is it possible to have a chunked out gradient-- like this progress bar?

Answer 1

For the first question: yes, it is possible. I adjusted the style sheet you provided (uncommented things, you will notice them):
QSlider::groove:vertical {
width: 10px;
/* background: #021017;*/
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #46992b, stop: 0.5 #0e566d, stop: 1 #d16a4b);
border-radius: 5px;
position: absolute;
left: 10px;
right: 10px;
}
QSlider::handle:vertical {
height: 10px;
background: #0b1707;
border: 1px solid #46992b;
margin: 0px -10px;
/* expand outside the groove */
border-radius: 5px;
}
QSlider::add-page:vertical {
border-radius: 5px;
border: 1px solid #0e566d;
/*background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #46992b, stop: 0.5 #0e566d, stop: 1 #d16a4b);*/
}
QSlider::sub-page:vertical {
background: #021017;
border-radius: 5px;
border: 1px solid #0e566d;
margin: 0px 1px 0px 1px;
}
QSlider::handle:vertical:hover {
background-color: #46992b;
}
Summary: style the groove with the gradient and skip the add-page background color.
For the second question, ::chunk is not working, so I think it is not working with the default QSlider. Feel free to implement your own class, which can handle chunks.