Best way to implement drag slider

kyleplattner

So I have 9 images that each represent a different notch on a slider. How can I have the user drag along the slider and change the image to the next notch when he drags over the next notch? In other words, the slider will not be smooth in motion but only represent 8 different options. Does this make sense?

dangelog

Sure, just use a slider ranging from 0 to 8 with step 1.

kyleplattner

Peppe,
I don't know if I understand what you are suggesting. You described what I am trying to accomplish but I am wanting to know how to accomplish it with QML.

jech

This is a slider component I'm using:

@import Qt 4.7

Rectangle {

function setPosition(progress) {
    if (!handleMouseArea.drag.active) handle.x = Math.round(progress*(slider.width-handle.width))
}
id: slider
signal dragged
property int handlePosition: 0
property bool immediate: false
property int value: Math.round(handle.x*100/(slider.width-handle.width))
property int rad: height/2-1
color: "#00000000"
radius: rad
border.width: 4
border.color: "#ffffff"

MouseArea {
    property int position
    anchors.fill: parent
    onClicked: {
        position = mouse.x - slider.height/2
        handle.x = position<0?0:position>slider.width-handle.width?slider.width-handle.width:position
        slider.dragged()
    }
}

Rectangle {
    anchors.fill: parent
    anchors.rightMargin: slider.width-handle.x-slider.height
    color: "#60ffffff"
    radius: slider.rad
}

Rectangle {
    id: handle; width: parent.height; height: parent.height
    x: slider.handlePosition*(slider.width-slider.height)/100
    color: "#ffffff"
    radius: slider.rad
    MouseArea {
        id: handleMouseArea
        anchors.fill: parent
        drag.target: parent; drag.axis: "XAxis"
        drag.minimumX: 0; drag.maximumX: slider.width - handle.width
        onPositionChanged: {
            if (immediate) {
                slider.dragged()
            }
        }            
        onReleased: {
            slider.dragged()
        }
    }
}

}
@

You use it this way:

@ Slider {
id: sampleSlider
handlePosition: 50
immediate: true
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
height: 40
onDragged: {
console.log(value)
}
}
@

Property handlePosition sets the initial postition of the slider (0-100%). Property immediate sets, if you want to be informed about the movement immediately or only after the user releases the slider.

Now what you need to do is to send a different signal for onRelease event and move the slider to the nearest notch. This should be pretty simple to do.

dangelog

Of course I didn't notice which forum were we in :-)

You need a MouseArea and some components to draw the slider+the notch, plus a small piece of javascript to set the notch to "fixed" positions based on where the mouse is moving.