How to make a slider widget with more than one slider and set color of line?

[Leon]

I saw this in one site:
!http://i.imgur.com/al3Ej.png(1)!

Is it possible to creating something like this with qt?

1. The color of the line
2. The slider widget as you can see in the screenshot has 2 sliders...

[utcenter]

It is possible, why wouldn't it be?

[broadpeak]

As I know Qt has no such a control, but: this can be a good starting point:
http://libqxt.bitbucket.org/doc/0.6/qxtspanslider.html

or you have to reimplement your custom control with this:
http://qt-project.org/doc/qt-4.8/qstyle.html#drawComplexControl

[Leon]

i can't
@#include <QxtSpanSlider>@

should i do aomething before including it?

[Aminos]

you can use Qt Style Sheets and add colors in your file qss

[broadpeak]

[quote author="Leon" date="1348750434"]i can't
@#include <QxtSpanSlider>@

should i do aomething before including it?[/quote]

Of course, "libqxt":http://libqxt.bitbucket.org/doc/tip/index.html is not a part of official Qt.
First you have to "download":http://dev.libqxt.org/libqxt/wiki/Home the libqxt package.
And read this: http://dev.libqxt.org/libqxt/wiki/user_guide

[Leon]

O ok, it was my first time installing an external lib of qt.. so sorry for my noobish previus question

i did this:
@ leon = new QxtSpanSlider(this);
leon->setFocusPolicy(Qt::NoFocus);
leon->setOrientation(Qt::Horizontal);
leon->setUpperPosition(30);
leon->setLowerPosition(10);
leon->setMaximum(40);@

and the result is:
!http://i48.tinypic.com/2ebsn5i.jpg(1)!

Questions:

1. What is that ugly thing in the left?
2. how can i set the maximum position of the lower at the current upper position-1? i mean in void value changed of slider it must say everytime something like lowerpositiion->setmaximum(uppercurrentposition-1).. but there isn't anything like this
3. The colors? How can left from the lowerposition the color is Qt:red, in middle Qt:yellow, and right from upperposition Qt:green?

[utcenter]

If you want custom functionality you have to implement it.

[Leon]

Ok so how do i implement a custom functionallity? Could you help me around with giving me some links?

[utcenter]

Well, implementing functionality IS programming LOL. If you want to change the drawing of the widget you have to reimplement its paint method and program it the way you want it to be.

Sometimes it may turn out that a component you want to modify is designed to make the modification you want difficult or even impossible. In this case you are better off creating your own component from scratch. This slider you want is not hard to implement at all.

Here is the method that draws the span, e.g. what you want to reimplement:

@void QxtSpanSliderPrivate::drawSpan(QStylePainter* painter, const QRect& rect) const
{
QStyleOptionSlider opt;
initStyleOption(&opt);
const QSlider* p = &qxt_p();

// area
QRect groove = p->style()->subControlRect(QStyle::CC_Slider, &opt, QStyle::SC_SliderGroove, p);
if (opt.orientation == Qt::Horizontal)
    groove.adjust(0, 0, -1, 0);
else
    groove.adjust(0, 0, 0, -1);

// pen & brush
painter->setPen(QPen(p->palette().color(QPalette::Dark).light(110), 0));
if (opt.orientation == Qt::Horizontal)
    setupPainter(painter, opt.orientation, groove.center().x(), groove.top(), groove.center().x(), groove.bottom());
else
    setupPainter(painter, opt.orientation, groove.left(), groove.center().y(), groove.right(), groove.center().y());

// draw groove
painter->drawRect(rect.intersected(groove));

}@

As you can see it only draws the central span with a given color. If you reimplement the method to draw three spans in the colors you want - you are done

You might also want to modify the paint event itself:

@void QxtSpanSlider::paintEvent(QPaintEvent* event)
{
Q_UNUSED(event);
QStylePainter painter(this);

// groove & ticks
QStyleOptionSlider opt;
qxt_d().initStyleOption(&opt);
opt.sliderValue = 0;
opt.sliderPosition = 0;
opt.subControls = QStyle::SC_SliderGroove | QStyle::SC_SliderTickmarks;
painter.drawComplexControl(QStyle::CC_Slider, opt);

// handle rects
opt.sliderPosition = qxt_d().lowerPos;
const QRect lr = style()->subControlRect(QStyle::CC_Slider, &opt, QStyle::SC_SliderHandle, this);
const int lrv  = qxt_d().pick(lr.center());
opt.sliderPosition = qxt_d().upperPos;
const QRect ur = style()->subControlRect(QStyle::CC_Slider, &opt, QStyle::SC_SliderHandle, this);
const int urv  = qxt_d().pick(ur.center());

// span
const int minv = qMin(lrv, urv);
const int maxv = qMax(lrv, urv);
const QPoint c = QRect(lr.center(), ur.center()).center();
QRect spanRect;
if (orientation() == Qt::Horizontal)
    spanRect = QRect(QPoint(minv, c.y() - 2), QPoint(maxv, c.y() + 1));
else
    spanRect = QRect(QPoint(c.x() - 2, minv), QPoint(c.x() + 1, maxv));
qxt_d().drawSpan(&painter, spanRect);

// handles
switch (qxt_d().lastPressed)
{
case QxtSpanSlider::LowerHandle:
    qxt_d().drawHandle(&painter, QxtSpanSlider::UpperHandle);
    qxt_d().drawHandle(&painter, QxtSpanSlider::LowerHandle);
    break;
case QxtSpanSlider::UpperHandle:
default:
    qxt_d().drawHandle(&painter, QxtSpanSlider::LowerHandle);
    qxt_d().drawHandle(&painter, QxtSpanSlider::UpperHandle);
    break;
}

}@