Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. QSlider
Forum Updated to NodeBB v4.3 + New Features

QSlider

Scheduled Pinned Locked Moved Unsolved General and Desktop
qslider
2 Posts 2 Posters 785 Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • G Offline
    G Offline
    GrahamLa
    wrote on last edited by
    #1

    Hi
    In my application I have a QSlider that has a styled handle
    These are my settings

    /* ONLY QSlider - BEGIN
    * NOTE: The syntax ".ClassName" allow us to select ONLY the "QSlider" objects and not subclass objects
    * (for example it will NOT select the "LeftRightSlider" objects)
    */
    .QSlider,
    Exercise--GUI--IosSlider,
    Exercise--GUI--BookmarksSlider
    {
        background-color: transparent;
    /*    background-color: red;*/
        /*singleStep: 1;*/
    }
    
    Exercise--GUI--IosSlider
    {
        qproperty-singleStepSize: 1;
    }
    
    .QSlider:horizontal,
    Exercise--GUI--IosSlider:horizontal,
    Exercise--GUI--BookmarksSlider:horizontal
    {
        min-height: 30px;
        min-width: 150px; /*vf*/
    }
    
    .QSlider:vertical,
    Exercise--GUI--IosSlider:vertical,
    Exercise--GUI--BookmarksSlider:vertical
    {
        min-width: 30px;
    }
    
    .QSlider::groove:horizontal,
    .QSlider::groove:vertical,
    Exercise--GUI--IosSlider::groove:horizontal,
    Exercise--GUI--IosSlider::groove:vertical,
    Exercise--GUI--BookmarksSlider::groove:horizontal,
    Exercise--GUI--BookmarksSlider::groove:vertical
    {
        /*border: 1px solid black;*/
        border-radius: 3px;
        border-bottom: 2px solid white;
        background-color: gray;
    }
    
    .QSlider::sub-page:horizontal,
    .QSlider::sub-page:vertical,
    Exercise--GUI--IosSlider::sub-page:horizontal,
    Exercise--GUI--IosSlider::sub-page:vertical,
    Exercise--GUI--BookmarksSlider::sub-page:horizontal,
    Exercise--GUI--BookmarksSlider::sub-page:vertical
    {
        /*border: 1px solid black;*/
        border: none;
        /*border-radius: 3px;*/
        border-bottom: 2px solid white;
    }
    
    .QSlider::handle:horizontal,
    .QSlider::handle:vertical,
    Exercise--GUI--IosSlider::handle:horizontal,
    Exercise--GUI--IosSlider::handle:vertical,
    Exercise--GUI--BookmarksSlider::handle:horizontal,
    Exercise--GUI--BookmarksSlider::handle:vertical
    {
        background-color: white;
        border: 1px solid transparent;
        border-radius: 2px;
    }
    
    .QSlider::add-page:horizontal,
    .QSlider::add-page:vertical,
    Exercise--GUI--IosSlider::add-page:horizontal,
    Exercise--GUI--IosSlider::add-page:vertical,
    Exercise--GUI--BookmarksSlider::add-page:horizontal,
    Exercise--GUI--BookmarksSlider::add-page:vertical
    {
        /*border: 1px solid black;*/
        border: none;
        border-radius: 3px;
        border-bottom: 2px solid white;
    }
    
    .QSlider::groove:horizontal,
    Exercise--GUI--IosSlider::groove:horizontal,
    Exercise--GUI--BookmarksSlider::groove:horizontal
    {
        /*height: 10px;*/
        height: 12px;
    }
    
    .QSlider::handle:horizontal,
    Exercise--GUI--IosSlider::handle:horizontal,
    Exercise--GUI--BookmarksSlider::handle:horizontal
    {
        width: 18px;
        margin: -3px 0px -3px 0px;
        position: relative;
        top: 6px;
    }
    
    .QSlider::groove:vertical,
    Exercise--GUI--IosSlider::groove:vertical,
    Exercise--GUI--BookmarksSlider::groove:vertical
    {
        width: 10px;
    }
    
    .QSlider::handle:vertical,
    Exercise--GUI--IosSlider::handle:vertical,
    Exercise--GUI--BookmarksSlider::handle:vertical
    {
        height: 20px;
        margin: -1px -8px -1px -8px; /* top right bottom left */
    }
    
    QSlider:horizontal[Short="true"]
    {
        min-width: 150px;
        max-width: 150px;
    }
    
    QSlider:horizontal[Medium="true"]
    {
        min-width: 250px;
        max-width: 250px;
    }
    
    QSlider:horizontal[Long="true"]
    {
        min-width: 550px;
        max-width: 550px;
    }
    /* ONLY QSlider - END */
    

    The problem is that when the slider is set to the end or being of the control the the groove is not completely filled or emptied. It looks as though it is filled to the center of the handle.
    0_1539862161092_49d57d2b-9c8d-48be-bd25-f73c45ac06ad-image.png

    Is there way around this

    Thanks

    1 Reply Last reply
    0
    • SGaistS Offline
      SGaistS Offline
      SGaist
      Lifetime Qt Champion
      wrote on last edited by
      #2

      Hi and welcome to devnet,

      Depending on the effect you want, you should consider implementing a subclass of QAbstractSlider and to the painting yourself.

      Interested in AI ? www.idiap.ch
      Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

      1 Reply Last reply
      0

      • Login

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved