Creating a toggle button with the slider

**hmischel@diligentsystems.com** · 2020-07-01, 14: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.

Code:

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:

Code:

toggle ="1"

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

Here is the CSS.

Code:

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; 
    }