PDA

View Full Version : Creating a toggle button with the slider



hmischel@diligentsystems.com
2020-07-01, 15:38
I needed a toggle button control for my toolbar. It came out just as I wanted, so I thought I would put it out there in case anyone else has a need.

As you can see in the images attached, I also need a normal slider, so the the css for this one includes a property selector.


Here is the class definition.



define class toggleslider as slider
toggle ="1"

function interactivechange()
lianja.console('ic')
if this.value = 0
this.style = "QSlider::handle:horizontal{background-color: rgb(4, 4, 4);}"
else
this.style = "QSlider::handle:horizontal{background-color: rgb(255, 250, 255);}"
endif
endfunc
enddefine


notice the value:

toggle ="1"
We need this to distinguish which sliders will act as toggle buttons.

Here is the CSS.



QSlider::groove:horizontal[toggle = "1"]{
background-color: rgb(150, 144, 144);
border: 0px solid #424242;
height: 10px;
border-radius: 4px;
}
QSlider::handle:horizontal[toggle="1"] {
background-color: rgb(15, 14, 14);
border: 1px solid rgb(150, 144, 144);
border-radius: 50%;
height: 25px;
width: 25px;
margin: -15 0px;
line-height: 20px;
margin-top: -5px;
margin-bottom: -5px;
border-radius: 10px;
}



22622263

Herb

HankFay
2020-07-02, 00:23
Beautiful work, Herb.