Best way to implement drag slider



  • 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?



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



  • 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.



  • 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.



  • 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.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.