Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Range Slider Colors



  • Hi guys,

    I've done some extensive research through Google to find a method for changing the colors on the range slider and have come up with zilch. Before I go experimenting, I thought I would ask the experts. Is changing the colors even possible? I'm assuming you have to use a style import that's prebuilt into QT, but is there a way to make my own? Thank you for any assistance you can give.


  • Lifetime Qt Champion

    Hi
    Is this QML, you talk about ?

    For QSlider, it supports stylesheet fine.



  • Yep, it's QML


  • Lifetime Qt Champion

    @BadeTech
    Ok. give it some time, the QML dudes seems on vacations :)



  • @mrjj

    Ok, so there's no way to change the colors? I'm just making sure before I call this solved


  • Lifetime Qt Champion

    @BadeTech
    I would give it one more day to see if anyone has idea.


  • Moderators

    Hi, I currently don‘t have access to my code base, I‘m on the road. But I have a Range slider with 3 different colors for the 3 sections, before. Value 1 between values and after value 2.

    I‘ll get back to you when I‘m back home, if someone else hasn‘t answered till than.

    Greetings


  • Moderators

    OK, I'm back :-), and I found the Ranged Slider code:

    RangeSlider{
            id: sliderRange
    
    	property alias colorSection1: section1.color
    	property alias colorSection2: section2.color
    	property alias colorSection3: section3.color
    
            background: Rectangle{
                x: sliderRange.leftPadding
                y: sliderRange.topPadding + sliderRange.availableHeight/2 - height /2
                width: sliderRange.availableWidth
    
                implicitHeight: 4
                height: implicitHeight
                radius: 2
                color: "#bdbebf"
    
                Rectangle{
                    id: section1
                    height: parent.height
                    width: sliderRange.first.visualPosition*parent.width
                }
    
                Rectangle{
                    id: section2
                    x: sliderRange.first.visualPosition * parent.width
                    height: parent.height
                    width: sliderRange.second.visualPosition*parent.width -x
                }
    
                Rectangle{
                    id: section3
                    x: sliderRange.second.visualPosition * parent.width
                    height: parent.height
                    width: parent.width -x
                }
            }
        }
    

Log in to reply