Qt World Summit: Register Today!

[SOLVED] - QSlider - Adding a "target" zone?

  • I would like to achieve something similar to this :

    Basically, just a normal QSlider, where the Slider represent the current value of a real time data (i.e : Heart rate)
    the colored "zone" area would be the target to achieve.

    I'm not sure if QSlider can achieve this, Is there a way to change a specific segment on the QSlider to a different color? I have not found any stylesheet example that does this, it use pixel but I would need precise values.

    My value would are in percentage
    For example.
    Zone to achieve : [5-10%] (colored zone)
    Current Value : 15% (slider)

    Any idea/help appreciated, I'm also considering QProgressBar, not sure which widget is the best to use for this use-case.
    Thank you!

  • With the QtStylesheet Example, I achieved this :

    It's almost what I want, but the "zone" area is draw with stylesheet, I think it could work in my program, but the zone will change at runtime so updating the zone could be a pain, will try and post result

    @ QSlider::groove:horizontal {
    border: 1px solid #999999;
    height: 25px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */
    background: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0.0 white, stop:0.20 white, stop:0.21 pink, stop:0.39 pink, stop:0.40 white, stop:1.0 white);
    margin: 2px 0;

    QSlider::handle:horizontal {
    background: red;
    border: 1px solid #5c5c5c;
    width: 18px;
    margin: -2px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
    border-radius: 3px;

  • Stylesheet FTW!

    void BalanceWidget::setZone(int low, int high) {

    zoneLow = low;
    zoneHigh  = high;
    double zoneLow_d = low / 100.0;
    double zoneHigh_d = high / 100.0;
    double beforeZoneLow;
    double afterZoneHigh;
    if (zoneLow_d == 0.0) {
        beforeZoneLow = zoneLow_d;
    else {
        beforeZoneLow = zoneLow_d - 0.01;
    if (zoneHigh_d == 1.0) {
        afterZoneHigh = zoneHigh_d;
    else {
        afterZoneHigh = zoneHigh_d + 0.01;
    qDebug() << "beforeZoneLow Is:" << QString::number(beforeZoneLow);
    ui->horizontalSlider->setStyleSheet("QSlider::groove:horizontal { background: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0.0 white, stop:"+ QString::number(beforeZoneLow) + " white, stop:"+ QString::number(zoneLow_d) + " blue, stop:"+ QString::number(zoneHigh_d) + " blue, stop:"+ QString::number(afterZoneHigh) + " white, stop:1.0 white); }");


Log in to reply