Results 1 to 2 of 2

Thread: Creating a toggle button with the slider

  1. #1
    Senior Member
    Join Date
    Feb 2012
    Posts
    1,230

    Creating a toggle button with the slider

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

    Name:  toggle1.PNG
Views: 121
Size:  4.7 KBName:  toggle2.PNG
Views: 117
Size:  5.1 KB

    Herb

  2. #2
    Lianja MVP
    Join Date
    Feb 2012
    Location
    Berea, KY, USA
    Posts
    2,010
    Beautiful work, Herb.

Bookmarks

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Journey into the Cloud
Join us