Important: Please read the Qt Code of Conduct -

Using a stylesheet to customize a QSlider

  • Consider the following code snippet that creates a single QSlider:
    MainWindow::MainWindow(QWidget *parent) :
    resize(700, 800);
    setStyleSheet("QSlider { width: 40px }"
    "QSlider::groove:horizontal {"
    "border: 1px solid #999999;"
    "background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);"
    "height: 50px;"
    "margin: 0 0 0 0;}"
    "QSlider::handle:horizontal {"
    "background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);"
    "border: 1px solid #5c5c5c;"
    "width: 50px;"
    "margin: -5px 0 -5px 0;"
    "border-radius: 3px;}");

    QSlider *slider;
    // Here are two ways of creating a qslider
    // the following line of code makes a slider of about 120 pixels in width
    // changing the first width & height in the stylesheet have no effect
    // but changing the last width (handle width) does work

    // slider = new QSlider(Qt::Horizontal, this);

    // the following two lines of code make a slider that's much wider (around 650 pixels)
    // changing the first width in the stylesheet has no effect
    // but changing the groove height and handle width do take effect

    // slider = new QSlider(Qt::Horizontal);
    // slider->setParent(this);

    slider->move(25, 100);

    Ultimately, I'd like to make this QSlider vertical, but for right now, I'm wondering why the two ways of instantiating the slider behave so differently. I looked around for a good explanation of what's going on but couldn't find any.

Log in to reply