How to set the size of the handle in a QSlider?

Question

I'm trying to add some style to a QSlider I want to use a custom image as the handle that the user drags back and forth. While I've figured out how to use style sheets to have a custom icon drawn where the handle should be, the image is being drawn much too small and I cannot figure out how to make it larger.

Setting width and height seem to do nothing. I've tried using image, border-image and background-image, but none give me the ability to set the size of the handle image. Does anyone know how to do this?

This is the style sheet that I've been adding to my QSlider in QtDesigner:

QSlider::handle:vertical {
    image: url(:/data/icons/mixer-slider-handle.svg);
    width:64px;
    height:64px;
}

This is the SVG:

<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   width="30"
   height="45"
   viewBox="0 0 7.9374997 11.90625"
   version="1.1"
   id="svg8"
>
  <defs
     id="defs2">
    <linearGradient
       id="linearGradient844"
       inkscape:collect="always">
      <stop
         id="stop840"
         offset="0"
         style="stop-color:#cecece;stop-opacity:1;" />
      <stop
         id="stop842"
         offset="1"
         style="stop-color:#ffffff;stop-opacity:1" />
    </linearGradient>
    <linearGradient
       inkscape:collect="always"
       id="linearGradient824">
      <stop
         style="stop-color:#cecece;stop-opacity:1;"
         offset="0"
         id="stop820" />
      <stop
         style="stop-color:#ffffff;stop-opacity:1"
         offset="1"
         id="stop822" />
    </linearGradient>
    <linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient824"
       id="linearGradient826"
       x1="-3.9103179"
       y1="297.24557"
       x2="-3.8304768"
       y2="285.38882"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(0.8683302,0,0,0.96503255,7.3827223,9.9179025)" />
    <linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient844"
       id="linearGradient838"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(0.86322913,0,0,0.81935486,7.5301966,52.317886)"
       x1="-3.8119318"
       y1="285.99686"
       x2="-3.7885454"
       y2="296.82458" />
  </defs>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-285.09375)">
    <rect
       style="fill:url(#linearGradient826);fill-opacity:1;stroke:#0e0e0e;stroke-width:0.1373108;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="rect818"
       width="5.157938"
       height="11.397007"
       x="1.453124"
       y="285.36124"
       ry="2.866178" />
    <rect
       style="opacity:1;fill:url(#linearGradient838);fill-opacity:1;stroke:none;stroke-width:0.12615089;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="rect828"
       width="4.6027613"
       height="8.9100981"
       x="1.7161824"
       y="286.60291"
       ry="2.184411" />
    <path
       style="fill:none;stroke:#000000;stroke-width:0.24780074px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 1.8804469,291.0695 4.3266789,0.047"
       id="path846"
       inkscape:connector-curvature="0" />
  </g>
</svg>

Answer 1

Looks like the answer is to set the margin attribute for both the groove and the handle to reflect the size of the handle you are using.

This worked for me:

.QSlider::groove:vertical {
    border: 1px solid #111;
    background-color: #333;
    width: 6px;
    margin: 24px 12px;
}

.QSlider::handle:vertical {
    image: url(:/data/icons/mixer-slider-handle.svg);
    margin: -24px -12px;
    height: -30px;
}