带有两个滑块的QSlider

带有两个滑块的QSlider

项目中用到了一组范围，可是Qt中自带的QSlider只有一个滑块，不满足需求，需要实现一个带有两个滑块的Slider。

2019-03-19_120604.jpg

经过一番搜索，发现了一个叫做 Qt Extension Library的库，其中包含了一个QxtSpanSlider的QSlider的重写实现，这个类满足了需求。

使用方法

首先在界面上引用一个QSlider类，如下图

2019-03-19_121840.jpg

然后在QSlider上，右键：

2019-03-19_122030.jpg 2019-03-19_122101.jpg

提升类的名称填入QxtSpanSlider，头文件自动生成的为小写，改为QxtSpanSlider.h

2019-03-19_122222.jpg

点击添加，提升后运行程序：

2019-03-19_122512.jpg

代码

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    ui->lineEdit->setText("10");
    ui->lineEdit_2->setText("200");
    ui->horizontalSlider->setHandleMovementMode(QxtSpanSlider::NoOverlapping);//设置两个滑块的模式
    ui->horizontalSlider->setMaximum(200);//最大值设置
    ui->horizontalSlider->setLowerValue(10);//初始化小滑块的值
    ui->horizontalSlider->setUpperValue(200);//初始化大滑块的值
    connect(ui->horizontalSlider,SIGNAL(lowerValueChanged(int)),this,SLOT(lowerValueChangedSlot(int)));
    connect(ui->horizontalSlider,SIGNAL(upperValueChanged(int)),this,SLOT(upperValueChangedSlot(int)));
    connect(ui->lineEdit,SIGNAL(textChanged(QString)),this,SLOT(lowerTextChangedSlot(QString)));
    connect(ui->lineEdit_2,SIGNAL(textChanged(QString)),this,SLOT(upperTextChangedSlot(QString)));
}

• setHandleMovementMode

 enum HandleMovementMode
    {
        FreeMovement,//两个滑块自由移动
        NoCrossing,  //左侧滑块不能越过右侧滑块，但是两个滑块可以重叠
        NoOverlapping //左侧不能越过右侧，且不能重叠
    };

• lowerValueChanged

滑块的两个值改变后会发出信号lowerValueChanged和upperValueChanged

测试程序源码地址