qtqtstylesheetsqslider
Change QSlider's add/sub page colors from the centre
I want to design a QSlider, which in the design sheet looks like this:
The slider groove color is the same for all slider parts, regardless of the slider handle being in its centre. In the design sheet, if the slider handle is moved to the left or right, it looks like this:
AFAIK, it is possible to change the slider's add/sub-page colors using style sheets.
However, I do not know how to change it in such a way that the change is done from the center, both to the left and right part, instead of the slider's leftmost point.
How could I achieve this?
Solution
Using A Stylesheet
While this is achievable using stylesheets, it is not recommended, the effort and complexity of the implementation is not worth the results, which are fragile and jagged. There are too many moving pieces for stylesheets to handle effectively while keeping a smooth, coherent look/behavior.
The basic idea is to use QLinearGradient for the sub-page/add-page sub controls, and separating the color stops with a small fraction (e.g, 0.00001). This achieves a segmented look.
The heavy work is done when trying to adjust the values each time the handle is moved.
#include <QApplication>
#include <QtWidgets>
class StyleSheetCenteredSlider : public QSlider
{
public:
StyleSheetCenteredSlider(QWidget *parent = nullptr) : QSlider(parent)
{
setOrientation(Qt::Horizontal);
setMinimum(0);
setMaximum(100);
setValue(50);
styleSheet = QString(
"QSlider::sub-page:horizontal { background: black;}"
"QSlider::add-page:horizontal { background: black;}"
"QSlider::groove:horizontal {"
"border: 1px solid black;"
"}");
connect(this, &QSlider::valueChanged, this, &StyleSheetCenteredSlider::updateSliderStyle);
}
void updateSliderStyle(int value)
{
qreal stopPosition = static_cast<qreal>(value) / maximum();
qreal progressScaledDownStartingPosition;
qreal backgroundColorPosition;
if(stopPosition < 0.5)
{
//scale down from the whole groove to the add page
/*
Black is half of the whole slider : 0.5
EXAMPLE
0 0.3 0.5 1
|-Black-|-white-|----Black-----|
0 x 1
|-white-|----Black-----|
The white part above = 0.2, which is 0.5 - 0.3
but 0.2 is taken from the whole groove,
so scale down to the add page (devide by the length of the add page, which is (1 - 0.3 (stopPosition)))
*/
progressScaledDownStartingPosition = ((qreal)0.5 - stopPosition) / (1 - stopPosition);
backgroundColorPosition = progressScaledDownStartingPosition + (qreal)0.000001;
styleSheet.replace(QRegularExpression("QSlider::add-page:horizontal \\{([^}]*)\\}"),
QString("QSlider::add-page:horizontal {"
"background: qlineargradient(x1:0, y1:0,"
"x2:1, y2:0,"
"stop:0 white,"
"stop:%1 white,"
"stop:%2 black,"
"stop:1 black);"
"}").arg(progressScaledDownStartingPosition)
.arg(backgroundColorPosition));
}
else
{
if(stopPosition > 0.5)
{
/*
Black is half of the whole slider : 0.5
EXAMPLE
0 0.5 0.6 1
|---Black----|-white--|---Black----|
0 x 1
|---Black----|-white--|
The white part above = 0.1, which is 0.6 - 0.5
but 0.1 is taken from the whole groove,
so again, scale down to the sub page (devide by the length of the sub page)
the scaled down position is to be subtracted from 1, which is the full length of the sub page
*/
progressScaledDownStartingPosition = 1 - ((stopPosition - 0.5) / stopPosition);
backgroundColorPosition = progressScaledDownStartingPosition + 0.000001;
styleSheet.replace(QRegularExpression("QSlider::sub-page:horizontal \\{([^}]*)\\}"),
QString(
"QSlider::sub-page:horizontal { "
"background: qlineargradient(x1:0, y1:0,"
"x2:1, y2:0,"
"stop:0 black,"
"stop:%1 black,"
"stop:%2 white,"
"stop:1 white);"
"}").arg(progressScaledDownStartingPosition)
.arg(backgroundColorPosition));
}
else
{
styleSheet.replace(QRegularExpression("QSlider::sub-page:horizontal \\{([^}]*)\\}"),
QString("QSlider::sub-page:horizontal { background: black;}"));
styleSheet.replace(QRegularExpression("QSlider::add-page:horizontal \\{([^}]*)\\}"),
QString("QSlider::add-page:horizontal { background: black;}"));
}
}
setStyleSheet(styleSheet);
}
QString styleSheet;
};
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
StyleSheetCenteredSlider styleSheetSlider;
styleSheetSlider.show();
styleSheetSlider.resize(500,100);
return a.exec();
}
Notice how the center is shaky:
That's without the handle, adding it makes things even more complicated:
#include <QApplication>
#include <QtWidgets>
class StyleSheetCenteredSlider : public QSlider
{
public:
StyleSheetCenteredSlider(QWidget *parent = nullptr) : QSlider(parent)
{
setOrientation(Qt::Horizontal);
setMinimum(0);
setMaximum(100);
setValue(50);
styleSheet = QString(
"QSlider::sub-page:horizontal { background: black;}"
"QSlider::add-page:horizontal { background: black;}"
"QSlider {"
"height: 20px;"
"background: rgb(50,50,50);"
"}"
"QSlider::groove:horizontal {"
"border: 1px solid #262626;"
"height: 5px;"
"margin: 0 12px;"
"}"
"QSlider::handle:horizontal {"
"background: cyan;"
"border: 1px solid black;"
"width: 23px;"
"border-radius: 12px;"
"height: 100px;"
"margin: -24px -12px;"
"}");
connect(this, &QSlider::valueChanged, this, &StyleSheetCenteredSlider::updateSliderStyle);
}
void updateSliderStyle(int value)
{
qreal stopPosition = static_cast<qreal>(value) / maximum();
qreal progressScaledDownStartingPosition;
qreal backgroundColorPosition;
if(stopPosition < 0.5)
{
//scale down from the whole groove to the add page
/*
Black is half of the whole slider : 0.5
EXAMPLE
0 0.3 0.5 1
|-Black-|-white-|----Black-----|
0 x 1
|-white-|----Black-----|
The white part above = 0.2, which is 0.5 - 0.3
but 0.2 is taken from the whole groove,
so scale down to the add page (devide by the length of the add page, which is (1 - 0.3 (stopPosition)))
*/
qreal whateverMargin = (8/(qreal)width());
progressScaledDownStartingPosition = std::max(((qreal)0.5 - stopPosition) / (1 - stopPosition) - whateverMargin, (qreal)0);
backgroundColorPosition = progressScaledDownStartingPosition + (qreal)0.000001;
styleSheet.replace(QRegularExpression("QSlider::add-page:horizontal \\{([^}]*)\\}"),
QString("QSlider::add-page:horizontal {"
"background: qlineargradient(x1:0, y1:0,"
"x2:1, y2:0,"
"stop:0 white,"
"stop:%1 white,"
"stop:%2 black,"
"stop:1 black);"
"}").arg(progressScaledDownStartingPosition)
.arg(backgroundColorPosition));
}
else
{
if(stopPosition > 0.5)
{
/*
Black is half of the whole slider : 0.5
EXAMPLE
0 0.5 0.6 1
|---Black----|-white--|---Black----|
0 x 1
|---Black----|-white--|
The white part above = 0.1, which is 0.6 - 0.5
but 0.1 is taken from the whole groove,
so again, scale down to the sub page (devide by the length of the sub page)
the scaled down position is to be subtracted from 1, which is the full length of the sub page
*/
qreal whateverMargin = (8/(qreal)width());
progressScaledDownStartingPosition = std::min(1 - ((stopPosition - 0.5) / stopPosition) + whateverMargin, (qreal)0.999999);
backgroundColorPosition = progressScaledDownStartingPosition + 0.000001;
styleSheet.replace(QRegularExpression("QSlider::sub-page:horizontal \\{([^}]*)\\}"),
QString(
"QSlider::sub-page:horizontal { "
"background: qlineargradient(x1:0, y1:0,"
"x2:1, y2:0,"
"stop:0 black,"
"stop:%1 black,"
"stop:%2 white,"
"stop:1 white);"
"}").arg(progressScaledDownStartingPosition)
.arg(backgroundColorPosition));
}
else
{
styleSheet.replace(QRegularExpression("QSlider::sub-page:horizontal \\{([^}]*)\\}"),
QString("QSlider::sub-page:horizontal { background: black;}"));
styleSheet.replace(QRegularExpression("QSlider::add-page:horizontal \\{([^}]*)\\}"),
QString("QSlider::add-page:horizontal { background: black;}"));
}
}
setStyleSheet(styleSheet);
}
QString styleSheet;
};
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
StyleSheetCenteredSlider styleSheetSlider;
styleSheetSlider.show();
styleSheetSlider.resize(500,100);
return a.exec();
}
Now there's a margin to take into account, and the center is off.
The details could possibly be corrected and finalised, but this approach is not worth it considering the results.
Using The Paint Event
A far better approach (in terms of implementation ease and end results) is using the paint event:
#include <QApplication>
#include <QtWidgets>
class PaintEventCenteredSlider : public QSlider
{
public:
PaintEventCenteredSlider(QWidget *parent = nullptr) : QSlider(parent) {}
protected:
void paintEvent(QPaintEvent *event) override
{
QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing, true);
QStyleOptionSlider option;
option.initFrom(this);
QRect grooveRect;
QRect handleRect;
QRect progressRect;
QPoint handlePoint;
int handlePos = 0;
if(orientation() == Qt::Horizontal)
{
QRect grooveRect = style()->subControlRect(QStyle::CC_Slider, &option, QStyle::SC_SliderGroove, this);
QRect handleRect = style()->subControlRect(QStyle::CC_Slider, &option, QStyle::SC_SliderHandle, this);
QPoint grooveCenter = grooveRect.center();
QRect progressRect = grooveRect;
//example
//440 = 0 + (( 500 - 15 ) * ( 90 - 0 ) / ( 99 - 0 ) )
//(value() - minimum()) / (maximum() - minimum()) -Example> ( 90 - 0 ) / ( 99 - 0 ) ) = 99/90 = 0.9
//basically just the percentage of progress
//grooveRect.left() is just in case we have a margin or something like that, it's usually 0
//grooveRect.width() is obvious, the full length, the distance
//handleRect.width() this is used to take into account the handle rect, without it, it will "go past the groove beyond the border"
//try to comment `- handleRect.width()`
handlePos = grooveRect.left() + ((grooveRect.width() - handleRect.width()) * (value() - minimum()) / (maximum() - minimum()));
//use the below to get more output in order to understand the above
qDebug()<<handlePos<< "=" << grooveRect.left() << "+" << "((" << grooveRect.width() << "-" << handleRect.width()<<")"<< "*"<< "("<<value() <<"-"<< minimum()<<")"<< "/"<< "("<<maximum() <<"-"<< minimum()<<")"<<")";
handlePoint = QPoint(handlePos, grooveCenter.y());
handleRect.moveLeft(handlePoint.x() );
//from the center
progressRect.setLeft(grooveCenter.x());
//to the handle's position
progressRect.setRight(handlePoint.x());
}
else
{
//the default value for QStyleOptionSlider::orientation is Qt::Horizontal
//we have to adjust it here to get the correct rects
option.orientation = Qt::Vertical;
grooveRect = style()->subControlRect(QStyle::CC_Slider, &option, QStyle::SC_SliderGroove, this);
handleRect = style()->subControlRect(QStyle::CC_Slider, &option, QStyle::SC_SliderHandle, this);
QPoint grooveCenter = grooveRect.center();
progressRect = grooveRect;
handlePos = grooveRect.top() + ((grooveRect.height() - handleRect.height()) * (value() - minimum()) / (maximum() - minimum()));
qDebug()<<handlePos<< "=" << grooveRect.left() << "+" << "((" << grooveRect.width() << "-" << handleRect.width()<<")"<< "*"<< "("<<value() <<"-"<< minimum()<<")"<< "/"<< "("<<maximum() <<"-"<< minimum()<<")"<<")";
handlePoint = QPoint(grooveCenter.x(), handlePos);
handleRect.moveTop(handlePoint.y() );
//from the center
progressRect.setTop(grooveCenter.y());
//to the handle's position
progressRect.setBottom(handlePoint.y());
}
//draw groove
painter.setBrush(Qt::black);
painter.setPen(Qt::black);
painter.drawRoundedRect(grooveRect, 3,3);
//draw progress
painter.setBrush(Qt::white);
painter.setPen(Qt::white);
painter.drawRect(progressRect);
//draw handle
painter.setBrush(Qt::cyan);
painter.setPen(Qt::cyan);
painter.drawEllipse(handleRect);
}
};
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
PaintEventCenteredSlider paintEventSlider;
paintEventSlider.setOrientation(Qt::Horizontal);
paintEventSlider.show();
paintEventSlider.resize(500,100);
return a.exec();
}
The center is stable, the margins are easier to calculate, and it works when added to layouts, unlike the stylesheets approach, which only gets worse:
For more about customizing QSlider:
- Iterating over a QMap with for
- QML Coverflow very slow
- How to remove Qt widget (with layout) space
- Removing extra spacing around QWidget
- Qt remove margins
- QT Excel - Open to Read/Write
- Drawing line to QImage
- How to make Toggle Functionality with QT?
- QtSerialPort: duplicate reads on Windows 7
- How to get the value of the distance between QPlainTextEdit's borders and its text
- Unable to edit QML files in designer mode
- Clear all widgets in a layout in pyqt
- Get relative path from a file in Qt
- Qml Text Size based on Container
- Autosizing the pixel size of text based on text length or size using fontSizeMode
- QTreeWidget right click menu
- Intellisense in Visual Studio 2022 with Docker Container does not recognize Qt libraries
- How to install wkhtmltopdf with patched qt?
- 'nmake' is not recognized as an internal or external command
- Qt GUI environment in a DLL (VST Plugin)
- How can I add an SQLite database permanently to the application
- copy constructor of derived QT class
- autoresize text in qml
- SQLite accent-insensitive search
- How to set user command in Qt Fakevim?
- Disable sorting of child items in QTreeView
- QtCreator breakpoint not reached in QML
- Run button is disabled in Qt Creator
- Minimal OpenGL offscreen rendering using Qt
- How to properly add a .h file to a project?