QSlider: Increase handle size -> How ?

[ArneBurghardt]

Hi,

i am designing a GUI for a touchscreen device (Plastique Style). So far everything is fine, except that it is very difficult to hit the slider handle, because it is way to small. Therefore i would like to increase the size of my slider handle.

My first try was to implement a style sheet for my vertical slider, like this one:

/* slider_pwm1 is the name of my slider */
#slider_pwm1::handle:vertical {
  min-width: 50px;
  width: 50px;
}

/* slider_pwm1 is the name of my slider */
#slider_pwm1::handle:vertical {
  min-width: 50px;
  width: 50px;
}

To copy to clipboard, switch view to plain text mode 

...but no success...

My second guess was to override the PixelMetric function:

// Override style for better Touchscreen handling
class MyProxyStyle : public QProxyStyle
{
  public:
    int pixelMetric ( PixelMetric metric, const QStyleOption * option = 0, const QWidget * widget = 0 ) const
    {
        switch(metric) {
          case PM_SliderControlThickness  : return 50;
          default                         : return (QProxyStyle::pixelMetric(metric,option,widget));
        }
    }
};
 
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QApplication::setStyle(new MyProxyStyle);
...
}

// Override style for better Touchscreen handling
class MyProxyStyle : public QProxyStyle
{
  public:
    int pixelMetric ( PixelMetric metric, const QStyleOption * option = 0, const QWidget * widget = 0 ) const
    {
        switch(metric) {
          case PM_SliderControlThickness  : return 50;
          default                         : return (QProxyStyle::pixelMetric(metric,option,widget));
        }
    }
};

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QApplication::setStyle(new MyProxyStyle);
...
}

To copy to clipboard, switch view to plain text mode 

And again i had no success...

Now i am running out of ideas... Does anybody out there has a clue/hint/link to solve this problem ?

Thank you for your help !

Arne

[Ginsengelf]

Hi, have you tried to use the "height" property in your style sheet instead of width?

Ginsengelf

[ArneBurghardt]

Yes, i have tried all combinations (min-width, width, min-height, height), but it had no visible effect.
But i am sure, that i address the style sheet correctly, because if i apply the following code from an Qt example...

#slider_pwm1:vertical {
     border: 1px solid grey;
      width: 50px;
      margin: 22px 0 22px 0;
}

#slider_pwm1:vertical {
     border: 1px solid grey;
      width: 50px;
      margin: 22px 0 22px 0;
}

To copy to clipboard, switch view to plain text mode 

...it draws a box around my slider.
I have already spent a lot of time searching for a solution, but i haven't found anything...
Therefore any help is really appreciated

[ArneBurghardt]

Ok, white flag....
I have given up to increase the size of the slider handle, but instead i am using a QDial widget. This works very well with touchscreens.

[seven7]

// Override style for better Touchscreen handling
class MyProxyStyle : public QProxyStyle
{
  public:
    int pixelMetric ( PixelMetric metric, const QStyleOption * option = 0, const QWidget * widget = 0 ) const
    {
        switch(metric) {
          case PM_SliderControlThickness  : return 50;
          default                         : return (QProxyStyle::pixelMetric(metric,option,widget));
        }
    }
};

// Override style for better Touchscreen handling
class MyProxyStyle : public QProxyStyle
{
  public:
    int pixelMetric ( PixelMetric metric, const QStyleOption * option = 0, const QWidget * widget = 0 ) const
    {
        switch(metric) {
          case PM_SliderControlThickness  : return 50;
          default                         : return (QProxyStyle::pixelMetric(metric,option,widget));
        }
    }
};

To copy to clipboard, switch view to plain text mode 

If someone is still looking for a solution:
use PM_SliderLength, not PM_SliderControlThickness (and I used QWindowsStyle, not QProxyStyle, but that doesn´t matter I guess)

[quimnuss]

I am looking for a solution. Is it possible to do it with stylesheets?

[mscheper]

I am looking for a solution. Is it possible to do it with stylesheets?

I finally worked it out. Counterintuitively, you need to mess with the groove, not the handle.

/* First, you'll need to do this, to make room for the bigger handles. */
QSlider:horizontal {
    min-height: 32px;
}
 
QSlider::groove:horizontal {
    margin: -2px 0; /* decrease this size (make it more negative)—I changed mine from –2px to –8px. */
}

/* First, you'll need to do this, to make room for the bigger handles. */
QSlider:horizontal {
    min-height: 32px;
}

QSlider::groove:horizontal {
    margin: -2px 0; /* decrease this size (make it more negative)—I changed mine from –2px to –8px. */
}

To copy to clipboard, switch view to plain text mode 

(Apologies for the syntax highlighting—there doesn't seem to be a way to tell BBCode to highlight for CSS. I guess 'Qt code' means C?)

Note that I'm working with horizontal sliders. If you're working with vertical sliders, you'll need to change 'horizontal' to 'vertical' in two places, and change the second argument (left/right) for the horizontal margin, not the first (top/bottom).