Best way to implement drag slider
-
wrote on 13 Jan 2011, 18:56 last edited by
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?
-
wrote on 13 Jan 2011, 21:00 last edited by
Sure, just use a slider ranging from 0 to 8 with step 1.
-
wrote on 13 Jan 2011, 21:02 last edited by
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. -
wrote on 14 Jan 2011, 15:09 last edited by
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.
-
wrote on 14 Jan 2011, 15:25 last edited by
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.
1/5