Dragging the range of a RangeSlider

Question

In my Qt project for viewing logfiles with charts, I need a range slider for easy navigation on the time axis.

What I need is support for dragging both handles; when clicking and dragingg in between the handles, both handles are moved together. The behaviour of the RangeSlider is to position the nearest handle to the clicked position, and I cant find any way of changing this from any properties.

When the provided controls is not providing the required functionality, I wonder if the only approach is to create a new component from scratch, or if there is any way of customizing the existing controls?

Answer 1

What you want is certainly possible:

RangeSlider {
    id: sli
    width: 300
    from: 0
    to: 1000
    first.value: 300
    second.value: 700
    Rectangle {
      anchors.left: sli.first.handle.right
      anchors.right: sli.second.handle.left
      anchors.verticalCenter: sli.verticalCenter
      height: sli.first.handle.height
      color: "red"
      MouseArea {
        anchors.fill: parent
        property real dx: 0
        onPressed: dx = mouseX
        onPositionChanged: {
          var d = ((mouseX - dx) / sli.width) * Math.abs(sli.to - sli.from)
          if ((d + sli.first.value) < sli.from) d = sli.from - sli.first.value
          if ((d + sli.second.value) > sli.to) d = sli.to - sli.second.value
          sli.first.value += d
          sli.second.value += d
          dx = mouseX
        }
      }
    }
  }

The red rectangle is actually redundant, I merely put it there as a visual aid.