Qt 双滑块
 
需要做一个双滑块，用来调节。
 找到几个，却发现跟想要的还是有点差距，拿一个比较靠谱的自己改一下吧。
 
参考的工程 https://github.com/przemek83/wble
 选这个好处是：继承自QSlider的，完全支持样式表。
 增加了一个在线上也能拖拽的操作。
 
 
改完后的工程
 
https://github.com/BeyondXinXin/study_qt

在开发项目时，有需求要做双滑块的滑动条，本着能不造轮子就不造轮子的原则，去网上搜了一番，果然有Qt开源的拓展库，Qt Extension Library，有一个控件是QxtSpanSlider，实现了简单的双滑块，然而自定义了一些样式后，就各种问题。
 
于是又搜索相关的解决办法，有搜到一位博主的博客，url:https://blog.csdn.net/Ilson_/article/details/103960278,按照博主的方法，没有起左右，于是又花了C币去下载，还是不起作用。无奈之下，又不想自己写这个控件（我不会啊...），于是在源码基础上进行了一些猥琐的（聪明的）封装，最终实现了目的。
 
问题：
 
1、拖动一个滑块，另一个滑块轴的位置被span覆盖，而且两侧的颜色不特殊处理的话，颜色不对。sub-page和add-page要处理；
 
2、范围span的颜色控制不了，即使按照上面博主的修改方法也不行，当两侧的颜色有一定透明度时，也还是会把中间的span颜色蒙一层，UI走查的时候一眼就可以看出来，然后就该被深深低鄙视了，不就是改个颜色的事儿吗...
 
3、没有处理鼠标mousePressEvent，那么鼠标在某个位置按下的时候，滑块就不能定位到指定位置;
 
解决思路：
 
1、设置sub-page和add-page颜色一致，举例子：
 
QSlider#TwoSlider::sub-page:horizontal 
{
	background: rgba(0,0,0,0.1);
	height: 8px;
	border-radius: 4px;
}

QSlider#TwoSlider::add-page:horizontal 
{
	background: rgba(0,0,0,0.1);
	height: 8px;
	border-radius: 4px;
}
 
2、代码里设置颜色（没成功...）,具体修改位置如下：
 
void QxtSpanSliderPrivate::drawSpan(QStylePainter* painter, const QRect& rect) const
{
    QStyleOptionSlider opt;
    initStyleOption(&opt);
    const QSlider* p = q_ptr;

    // 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());*/

	// 相交得到的矩形宽度、高度少了1pixel,需要加上
	QRect rt = rect.intersected(groove);
	rt.adjust(0, -1, 1, 3);

	// 调用自写函数修改样式
	setupPainter(painter, opt.orientation, rt);

    // draw groove
    painter->drawRect(rt);
}
 
自己重载一个setupPainter函数
 
void QxtSpanSliderPrivate::setupPainter(QPainter* painter, Qt::Orientation orientation,QRect& rect) const
{
	painter->setBrush(QBrush(QColor(255, 96, 0)));
	painter->setPen(Qt::transparent);
}
 
这里面的颜色就是我想要的颜色。然而我这边的效果是被sub-page和add-page刷新覆盖了一层，如果sub-page和add-page是不带透明度的纯色，中间设置的就完全不起作用了。
 
而且，拖动一个滑块，另一个滑块坐标轴的位置就会被span覆盖掉，如果是同色还好，不同色的话就废了。
 
最后我想了一个猥琐的办法，增加三个单独的QWidget,覆盖在滑动条上，即两个滑块和中间span控件，并设置这个三个控件的显示不影响下面滑块控件的使用。 在滑动条刷新的时候，这三个控件也去更新位置和大小，效果还是相当完美的。
 
具体操作：
 
在滑块paintEvent里添加信号，方便我们封装的控件处理添加的三个控件
 
void QxtSpanSlider::paintEvent(QPaintEvent* event)
{
    Q_UNUSED(event);
    QStylePainter painter(this);

    // groove & ticks
    QStyleOptionSlider opt;
    d_ptr->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 = d_ptr->lowerPos;
    const QRect lr = style()->subControlRect(QStyle::CC_Slider, &opt, QStyle::SC_SliderHandle, this);
    const int lrv  = d_ptr->pick(lr.center());
    opt.sliderPosition = d_ptr->upperPos;
    const QRect ur = style()->subControlRect(QStyle::CC_Slider, &opt, QStyle::SC_SliderHandle, this);
    const int urv  = d_ptr->pick(ur.center());
	emit updateHandle(lr,ur);
...
...
 
最后的信号即是我添加的，方便知道两个滑块的具体位置，然后在我封装的控件里，进行如下处理：
 
connect(m_Slider, &QxtSpanSlider::updateHandle, this, [this](const QRect &lRect, const QRect &uRect)
	{
		m_Span->move(lRect.x() + m_lWgdt->width(), 10);
		m_Span->setFixedWidth(uRect.x() - lRect.x()-m_lWgdt->width());
		m_Span->raise();
		for (auto &time : m_ValueVector)
		{
			time.circleWidget->raise();
		}

		m_lWgdt->move(lRect.x(), lRect.y());
		m_uWgdt->move(uRect.x(), uRect.y());
		m_lWgdt->raise();
		m_uWgdt->raise();
	});
 
time.circleWidget无需理会，是我实现更复杂的功能需要显示和处理的。这样就解决了最头疼的第二个问题；
 
3、鼠标点击事件，这个就相对好处理多了。不过你得事先跟产品经理通个气，看看点击某个位置，两个滑块怎么处理，就比如在中间点一下，是小值变大，还是大值变小，blabla...
 
我最终实现的代码：
 
bool DoubleSlider::eventFilter(QObject *obj, QEvent *event)
{
	if (obj == m_Slider)
	{
		if (event->type() == QEvent::MouseButtonPress)
		{
			QMouseEvent *mouseEvent = static_cast<QMouseEvent *>(event);
			if (mouseEvent->button() == Qt::LeftButton)
			{
				double pos = mouseEvent->pos().x() / (double)m_Slider->width();
				int value = (pos * (m_Slider->maximum() - m_Slider->minimum()) + m_Slider->minimum()) + 0.5;
				int lowerValue = m_Slider->lowerValue();
				int upperValue = m_Slider->upperValue();
				if (value < upperValue)
				{
					m_Slider->setLowerValue(value);
				}
				else if (value > upperValue)
				{
					m_Slider->setUpperValue(value);
				}
			}
		}
	}
	return QObject::eventFilter(obj, event);
}
 
最后就完美的解决问题了，给大家看下最后的效果图吧：
 
 
代码有时间整理后上传。
 
原创不易，且行且珍惜：
 

html代码：
 
<body>
    <div id="root"></div>
</body>
 
script代码：
 
<script type="text/babel">
    const root = document.querySelector('#root')
    class Comp extends React.Component {
        constructor(...args) {
            super(...args)
        }
        fn(ev) {
            // 获取鼠标点击的距离
            this.pageX = ev.changedTouches[0].pageX - ev.target.offsetLeft
            // 获取父级
            this.parentWidth = ev.target.parentNode.offsetWidth - ev.target.offsetWidth
            // 获取父级
            this.parent = ev.target.parentNode
            // 获取线条
            this.line = this.parent.children[2]


            // 获取左边小球
            this.oBall = this.parent.children[0]
            // 右边小球
            this.oBallTwo = this.parent.children[1]

            document.ontouchmove = this.fnMove.bind(this)
            document.ontouchend = this.fnEnd
        }
        fnMove(ev) {
            // 盒子偏移量 
            this.X = ev.changedTouches[0].pageX - this.pageX
            // 判断偏移量不能大于父盒子的宽
            if (this.X >= this.parentWidth) {
                this.X = this.parentWidth
            }
            // 判断不能小于0
            if (this.X <= 0) {
                this.X = 0
            }
            // 计算线条的宽  小球交互  计算绝对值就是线条的宽
            this.lineWidth = Math.abs(this.oBallTwo.offsetLeft - this.oBall.offsetLeft)
            // 线条的宽度
            this.line.style.width = this.lineWidth + 'px'
            // 小球距离左边的距离
            ev.target.style.left = this.X + 'px'
            // 判断右边小球的offsetLeft减掉左边小球的offsetLeft值 如果小于0就是 右边小球距离左边最近 取出它的offsetLeft值就是线条距离左边的值
            if(this.oBallTwo.offsetLeft-this.oBall.offsetLeft<0){
                this.line.style.left=this.oBallTwo.offsetLeft+'px'
            }else{
                this.line.style.left=this.oBall.offsetLeft+'px'
            }
        }
        fnEnd() {
            document.ontouchmove = null
            document.ontouchend = null
        }
        render() {
            return (<div className='box'>
                <div className='ball' onTouchStart={this.fn.bind(this)}></div>
                <div className='ball ac' onTouchStart={this.fn.bind(this)}></div>
                <div className='line'></div>
                <div className='lineT'></div>
            </div>)
        }
    }
    ReactDOM.render(<Comp />, root)

</script>
 
css样式：
 
  <style>
        body {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 500px;
            height: 40px;
            background: #999;
            position: relative;
            margin: auto;
            margin-top: 100px;
        }

        .ball {
            width: 40px;
            height: 40px;
            background: red;
            position: absolute;
            border-radius: 50%;
            z-index: 10;
        }

        .ball.ac {
            background: #0f0;
            right: 0;
        }

        .line {
            height: 5px;
            width: 500px;
            background: rgb(200, 110, 7);
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(0, -50%);
            z-index: 5;
        }

        .lineT {
            height: 5px;
            width: 500px;
            background: #fff;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(0, -50%);
        }
    </style>
 
第二种方式：点击链接查看第二种
 
 
 
https://blog.csdn.net/m0_58875967/article/details/119857178?spm=1001.2014.3001.5501
 

 
html实现双滑块取值功能
 
 代码：

 
html
 
<div id="slideToolCtrol">
	<div id="slideToolBorder">
	 	<div id="slideTitle">
	 		<span id="titleSpan">档位</span>
	 	</div>
	 	<div id="slideTool" class="slideTool">
	 		<div id="slideLeft" class="slideLeft">
	 			<span id="slider1" class="slider1">
	 				<span id="value1" value="01">01</span>
	 			</span>
	 		</div>
	 		<div id="slideRight" class="slideRight">
	 			<span id="slider2" class="slider2">
	 				<span id="value2" value="31">31</span>
	 			</span>
	 		</div>
	 	</div>
	 </div>
</div>
 
js
 
var slider1 =document.getElementById("slider1");
    var slider2 =document.getElementById("slider2");
    var slideTool =document.getElementById("slideTool");
    var slideLeft =document.getElementById("slideLeft");
    var slideRight =document.getElementById("slideRight");
    var P1 =document.getElementById("p1");
    //滑块1的鼠标按下事件
    slider1.onmousedown=function(e){
        var evt =e||event;
        var x =evt.offsetX;
        var y =evt.offsetY;
        console.log("leftMouseDown");
        //当触发滑块1鼠标按下事件时绑定鼠标移动事件
        document.onmousemove=function(e){
            var evt =e||event;
            //根据鼠标的位置和外层的相对偏移量设置滑块的位置
            slider1.style.left=evt.clientX-slideTool.offsetLeft-x+"px";
            if(evt.clientX-slideTool.offsetLeft-x<=0){
                slider1.style.left="0px";
            }
            if(evt.clientX-slideTool.offsetLeft-x>=300){
                slider1.style.left="300px";
            }
            if(slider1.offsetLeft >= slider2.offsetLeft-10){
                //slider1.style.left = slider2.style.left;
                slider1.style.left = slider2.offsetLeft - 10 + "px";
            }
            //根据滑块的偏移量计算数值
            var value = Math.floor(slider1.offsetLeft/10);
            slideLeft.style.width=slider1.offsetLeft+"px";
            value = value+1;
            if(parseInt(value) < 10){
                value = '0' + value;
            }
            $("#value1").text(value);
            $("#value1").attr("value",value);
        }
        //当鼠标按键抬起时解绑鼠标移动事件
        document.onmouseup=function(){
            document.onmousemove=null;
        }
    }
    slider2.onmousedown=function(e){
        var evt =e||event;
        var x =evt.offsetX;
        var y =evt.offsetY;
        document.onmousemove=function(e){
            var evt =e||event;
            slider2.style.left=evt.clientX-slideTool.offsetLeft-x+"px";
            if(evt.clientX-slideTool.offsetLeft-x<=0){
                slider2.style.left="0px";
            }
            if(evt.clientX-slideTool.offsetLeft-x>=300){
                slider2.style.left="300px";
            }
            if(slider2.offsetLeft-10 <= slider1.offsetLeft){
                //slider2.style.left = slider1.style.left;
                slider2.style.left = slider1.offsetLeft + 10 + "px";
            }
            var value = Math.floor(slider2.offsetLeft/10);
            slideRight.style.width=slider2.offsetLeft+"px";
            value = value+1 ;
            if(parseInt(value) < 10){
                value = '0' + value;
            }
            $("#value2").text(value);
            $("#value2").attr("value",value);
        }
        document.onmouseup=function(){
            document.onmousemove=null;
        }
    }
 
css
 
#slideTool{
    width: 305px;
    height: 3px;
    position: relative;
    background-color: lightgray;
    display: inline-block;
}
#slideLeft{width: 0px;height: 3px;background-color: lightgray;position: absolute;z-index: 20;}
#slideRight{width: 300px;height: 3px;background: #ab6969;position: absolute;}
#slider1{height: 15px;width: 15px;background: white;border: 1px solid #ab6969;display: block;border-radius: 10px;position: absolute;top: -6px;z-index: 20;}
#slider2{height: 15px;width: 15px;background: white;border: 1px solid #ab6969;display: block;border-radius: 10px;position: absolute;top: -6px;left:300px;z-index: 20;}
#value1{
    margin-top: -25px;
    position: absolute;
    width: 30px;
    background-color: black;
    color: white;
    text-align: center;
    margin-left: -20px;
    border-radius: 3px;
}
#value2{
    margin-top: -25px;
    position: absolute;
    width: 30px;
    background-color: black;
    color: white;
    text-align: center;
    border-radius: 3px;
}
#slideToolBorder{
    margin-left: 80px;
    margin-top: 50px;
    background-color: white;
    width: 400px;
    border: solid 1px brown;
}
#slideTitle{
    display: inline-block;
    background-color: #ab6969;
    height: 30px;
    width: 70px;
    text-align: center;
    line-height: 30px;
    /*border-left: solid 1px brown;*/
    border-right: solid 1px brown;
}
#titleSpan{
    color: white;
}
 
在调整位置的时候尽量不要使用 left top right bottom这些绝对布局属性，如果无可避免的话，需要根据设定的这些绝对布局的值来调整js代码中计算滑块偏移量和数值部分的代码，否则鼠标的位置和滑块的位置会有偏差，计算的数值也不会准确
 
效果图：