Results 1 to 2 of 2

Thread: Customizing the slider

  1. #1
    Join Date
    Aug 2012
    Qt products

    Default Customizing the slider


    I am trying to customize my QSlider. I've got it pretty much right by now, using css. One problem remains though - something which I believe is called "groove", although I am not so sure about this. In any case, it's that white line behind the handle. I would love to see it thinner than it is now, but so that it's size wouldn't affect on the size of the handle.

    From what I've gathered, there seems to be two elements in my css directly affecting to the looks of this "groove": "add-page:horizontal" and "groove:horizontal". Not sure what these really are and why they are called what they are, but by changing the values there I've managed to get everything else work ok.

    But it seems that many css values have absolutely zero effect on the result, like "height". No matter where I put "height" and to what value I assign it, there are no visible changes on my QSlider.

    In my case, I have two different slider over each other, in order to make sort of a slider inside slider thingy (hard to explain, but I'll show an example).

    this is how my code looks like:

    Qt Code:
    1. QObject::connect(ui->slider,SIGNAL(valueChanged(int)),this,SLOT(changedValue(int)));
    To copy to clipboard, switch view to plain text mode 


    Qt Code:
    1. void MainWindow::changedValue(int chValue)
    2. {
    4. ui->howFar->setMaximum(chValue);
    5. ui->howFar->setGeometry(QRect(53,249,chValue*.9-10,50));
    6. }
    To copy to clipboard, switch view to plain text mode 

    And this is how my css looks like:

    Qt Code:
    1. #slider::groove:horizontal {
    2. background:#000;
    3. padding-top:-20px;
    4. padding-bottom:-20px;
    5. height:45px;
    6. }
    8. #slider::handle:horizontal {
    9. background:url(:/img/ball1.png);
    10. height:49px;
    11. width: 41px;
    12. margin: -3px 0;
    13. }
    15. #slider::add-page:horizontal {
    16. background: #000;
    17. }
    19. #howFar::groove:horizontal {
    21. padding-top:-20px;
    22. padding-bottom:-20px;
    23. height:2px;
    24. }
    26. #howFar::handle:horizontal {
    27. background:url(:/img/handle.png);
    28. background-repeat:no-repeat;
    29. }
    31. #howFar::add-page:horizontal {
    32. background: #000;
    33. height:2px;
    34. }
    To copy to clipboard, switch view to plain text mode 

    So, how can I make that white thin line presented on the picture even thinner (or thicker, if I get really crazzzy)? With css if possible, for everything more than that starts to get a bit too complicated for me...

    Last edited by Don_Hannes; 4th October 2012 at 16:00.

  2. #2
    Join Date
    Jan 2006
    Warsaw, Poland
    Thanked 5,014 Times in 4,792 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits

    Default Re: Customizing the slider

    css Code:
    1. #slider::groove:horizontal {
    2. background:#000;
    3. height:1px; // <-- (don't use padding)
    4. }
    To copy to clipboard, switch view to plain text mode 
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.

Similar Threads

  1. Customizing QFileDialog
    By ScabrusMantra in forum Qt Programming
    Replies: 8
    Last Post: 22nd July 2011, 12:03
  2. Replies: 2
    Last Post: 21st March 2010, 09:01
  3. customizing QScrollbar
    By MarkoSan in forum Qt Programming
    Replies: 7
    Last Post: 15th October 2009, 18:51
  4. Customizing Sorting
    By delalaym in forum Qt Programming
    Replies: 2
    Last Post: 12th March 2009, 00:22
  5. Customizing QScrollBar
    By Jimmy2775 in forum Qt Programming
    Replies: 2
    Last Post: 2nd February 2006, 18:01

Tags for this Thread


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.