Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. QSlider with Text at tick marks
Forum Updated to NodeBB v4.3 + New Features

QSlider with Text at tick marks

Scheduled Pinned Locked Moved Unsolved General and Desktop
5 Posts 2 Posters 5.6k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • S Offline
    S Offline
    Smeeth
    wrote on last edited by
    #1

    I have some horizontal QSliders in my Qt application with 4-5 ticks marks. How can I add QLabels above the slider ticks to reflect the value at each of the ticks?

    I suspect the best way to do this is to create a subclass of QSlider and override the paintEvent() method like this answer describes. But how would I add QLabels based on the position of the ticks?

    1 Reply Last reply
    0
    • S Offline
      S Offline
      Smeeth
      wrote on last edited by Smeeth
      #2

      I am going to answer my own question. The solution is to override the paintEvent method and use drawText() to write the text on screen.

      Code taken from this answer

      void MySlider::painEvent(...) {
          QSlider::paintEvent(ev);
      
          auto painter = new QPainter(this);
          painter->setPen(QPen(Qt::black));
      
          auto rect = this->geometry();
      
          int numTicks = (maximum() - minimum())/tickInterval();
      
          QFontMetrics fontMetrics = QFontMetrics(this->font());
      
          if (this->orientation() == Qt::Horizontal) {
      
              int fontHeight = fontMetrics.height();
      
              for (int i=0; i<=numTicks; i++){
      
                  int tickNum = minimum() + (tickInterval() * i);
      
                  auto tickX = ((rect.width()/numTicks) * i) - (fontMetrics.width(QString::number(tickNum))/2);
                  auto tickY = rect.height() - fontHeight;
      
                  painter->drawText(QPoint(tickX, tickY),
                                    QString::number(tickNum));
              }
      
          } else if (this->orientation() == Qt::Vertical) {
      
              //do something else for vertical here, I haven't implemented it because I don't need it
          } else {
              return;
          }
      
          painter->drawRect(rect);
      }
      
      1 Reply Last reply
      2
      • Kent-DorfmanK Offline
        Kent-DorfmanK Offline
        Kent-Dorfman
        wrote on last edited by
        #3

        you are correct...that's pretty much as I have done. My approach though is to do a tickless slider and a completely custom background in painEvent(). As you've guessed, the challenge is correctly locating and scaling the background elements based on a widget that can change sizes.

        S 1 Reply Last reply
        0
        • Kent-DorfmanK Kent-Dorfman

          you are correct...that's pretty much as I have done. My approach though is to do a tickless slider and a completely custom background in painEvent(). As you've guessed, the challenge is correctly locating and scaling the background elements based on a widget that can change sizes.

          S Offline
          S Offline
          Smeeth
          wrote on last edited by Smeeth
          #4

          @Kent-Dorfman

          Thanks,

          I've implemented a custom paint method like the one I described above. The only problem I have is that when the font is large enough, and the text would extend outside the geometry of the QSlider, it gets cut off (as you would expect, since it is outside the geometry of the Slider widget.)

          0_1554306376880_3ef42f5c-6632-41ae-9d4a-f203a46cf0f8-image.png

          How can I rectify this? I tried setting the padding on the QSlider to 100px but that did not help. Is this something I can fix with a stylesheet option?

          1 Reply Last reply
          0
          • Kent-DorfmanK Offline
            Kent-DorfmanK Offline
            Kent-Dorfman
            wrote on last edited by Kent-Dorfman
            #5

            Change QSlider vertical size policy and have the parent control the space available to QSlider? Maybe subclass QWidget and add the QSlider as a member object instead of a direct parent class. I assume you turned off AutoFillBackground as expected?

            1 Reply Last reply
            0

            • Login

            • Login or register to search.
            • First post
              Last post
            0
            • Categories
            • Recent
            • Tags
            • Popular
            • Users
            • Groups
            • Search
            • Get Qt Extensions
            • Unsolved