Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Best way to implement drag slider
Forum Updated to NodeBB v4.3 + New Features

Best way to implement drag slider

Scheduled Pinned Locked Moved QML and Qt Quick
5 Posts 3 Posters 4.4k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • K Offline
    K Offline
    kyleplattner
    wrote on 13 Jan 2011, 18:56 last edited by
    #1

    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?

    1 Reply Last reply
    0
    • D Offline
      D Offline
      dangelog
      wrote on 13 Jan 2011, 21:00 last edited by
      #2

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

      Software Engineer
      KDAB (UK) Ltd., a KDAB Group company

      1 Reply Last reply
      0
      • K Offline
        K Offline
        kyleplattner
        wrote on 13 Jan 2011, 21:02 last edited by
        #3

        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.

        1 Reply Last reply
        0
        • J Offline
          J Offline
          jech
          wrote on 14 Jan 2011, 15:09 last edited by
          #4

          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.

          1 Reply Last reply
          0
          • D Offline
            D Offline
            dangelog
            wrote on 14 Jan 2011, 15:25 last edited by
            #5

            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.

            Software Engineer
            KDAB (UK) Ltd., a KDAB Group company

            1 Reply Last reply
            0

            2/5

            13 Jan 2011, 21:00

            • Login

            • Login or register to search.
            2 out of 5
            • First post
              2/5
              Last post
            0
            • Categories
            • Recent
            • Tags
            • Popular
            • Users
            • Groups
            • Search
            • Get Qt Extensions
            • Unsolved