Customizing the slider

Attachment 8283

I am trying to customize my QSlider. I've got it pretty much right by now, using css. One problem remains though - something which I believe is called "groove", although I am not so sure about this. In any case, it's that white line behind the handle. I would love to see it thinner than it is now, but so that it's size wouldn't affect on the size of the handle.

From what I've gathered, there seems to be two elements in my css directly affecting to the looks of this "groove": "add-page:horizontal" and "groove:horizontal". Not sure what these really are and why they are called what they are, but by changing the values there I've managed to get everything else work ok.

But it seems that many css values have absolutely zero effect on the result, like "height". No matter where I put "height" and to what value I assign it, there are no visible changes on my QSlider.

In my case, I have two different slider over each other, in order to make sort of a slider inside slider thingy (hard to explain, but I'll show an example).

this is how my code looks like:

Code:

---

QObject::connect(ui->slider,SIGNAL(valueChanged(int)),this,SLOT(changedValue(int)));

---

and

Code:

---

void MainWindow::changedValue(int chValue)
{
 
    ui->howFar->setMaximum(chValue);
         ui->howFar->setGeometry(QRect(53,249,chValue*.9-10,50));
}

---

And this is how my css looks like:

Code:

---

#slider::groove:horizontal {
     background:#000;
     padding-top:-20px;
     padding-bottom:-20px;
     height:45px;
 }
 
#slider::handle:horizontal {
     background:url(:/img/ball1.png);
     height:49px;
     width: 41px;
     margin: -3px 0;
 }
 
#slider::add-page:horizontal {
    background: #000;
 }
 
#howFar::groove:horizontal {
 
     padding-top:-20px;
     padding-bottom:-20px;
     height:2px;
 }
 
#howFar::handle:horizontal {
     background:url(:/img/handle.png);
     background-repeat:no-repeat;
 }
 
#howFar::add-page:horizontal {
    background: #000;
    height:2px;
 }

---

So, how can I make that white thin line presented on the picture even thinner (or thicker, if I get really crazzzy)? With css if possible, for everything more than that starts to get a bit too complicated for me...

Cheers!

Code:

---

#slider::groove:horizontal {
     background:#000;
     height:1px; // <-- (don't use padding)
 }

---