QSlider with with rounded ends can be done only via stylesheet.
Additionally added subpage for qSlider to change color of slider.
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; }
can you provide the source code and the image
Sure, i will update soon
Little delay still looking for image, to provide you complete source code. Stay tuned
Thanks for your reply,I am waiting…
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?
If you’re using Qt designer then right-click on slider and select change stylesheet option then simply paste the code
Hi,
for me is not :
background-image: url(:/slider-knob.png)
but
image: url(:/slider-knob.png)