[Qt] How to customise QSlider

QSlider with with rounded ends can be done only via stylesheet.

Additionally added subpage for qSlider to change color of slider.

 

slider-screen

QSlider::groove:horizontal {
border: 1px solid #999999;
height: 18px;

border-radius: 9px;
}

QSlider::handle:horizontal {
width: 18px;
 background-image: url(:/slider-knob.png)
}

QSlider::add-page:qlineargradient {
background: lightgrey;
border-top-right-radius: 9px;
border-bottom-right-radius: 9px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}

QSlider::sub-page:qlineargradient {
background: blue;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 9px;
border-bottom-left-radius: 9px;
}

About glframebuffer

just another guy.
This entry was posted in Qt and tagged , , , , . Bookmark the permalink.

7 Responses to [Qt] How to customise QSlider

  1. abdosayed says:

    can you provide the source code and the image

  2. ph says:

    Nicely done! A question for you. How would you make this CSS apply to “normal” sliders AND those where “invertedAppearance” is enabled in QT Creator? ie. I want to use this stylesheet for ALL of my sliders (where blue is the “progress”, or “add-page”) but have the two “pages” reversed as well? It seems that if you enable “invertedAppearance”, while the slider behaves as expected, the “wrong side” holds the progress color (ie. blue, sub-page in your example)

    Do you know what I mean?

  3. Lucio Santinelli says:

    Hi,
    for me is not :
    background-image: url(:/slider-knob.png)
    but
    image: url(:/slider-knob.png)

Leave a comment