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. How to customize Slider?
Forum Updated to NodeBB v4.3 + New Features

How to customize Slider?

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
6 Posts 3 Posters 1.9k Views 2 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.
  • V Offline
    V Offline
    vishu_fcb
    wrote on last edited by A Former User
    #1

    I want a slider basically in which as the handler position moves forward the slider colour should change as the slider position progresses .
    I tried using binding and gradient technique but nothing worked. Can anyone please help me ?

    1 Reply Last reply
    0
    • ? Offline
      ? Offline
      A Former User
      wrote on last edited by
      #2

      Hi!

      Slider {
          id: control
          from: 0
          to: 1
          value: 0
      
          function colorFromValue(v) {
              return Qt.rgba(v, 0, 1-v)
          }
      
          handle: Rectangle {
              x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
              y: control.topPadding + control.availableHeight / 2 - height / 2
              implicitWidth: 26
              implicitHeight: 26
              radius: 13
              border.color: "#000"
              color: control.colorFromValue( control.valueAt(control.position) )
          }
      }
      
      V 2 Replies Last reply
      1
      • ? A Former User

        Hi!

        Slider {
            id: control
            from: 0
            to: 1
            value: 0
        
            function colorFromValue(v) {
                return Qt.rgba(v, 0, 1-v)
            }
        
            handle: Rectangle {
                x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
                y: control.topPadding + control.availableHeight / 2 - height / 2
                implicitWidth: 26
                implicitHeight: 26
                radius: 13
                border.color: "#000"
                color: control.colorFromValue( control.valueAt(control.position) )
            }
        }
        
        V Offline
        V Offline
        vishu_fcb
        wrote on last edited by
        #3

        @Wieland thanks a lot !! i ll try it once !!

        1 Reply Last reply
        0
        • ? A Former User

          Hi!

          Slider {
              id: control
              from: 0
              to: 1
              value: 0
          
              function colorFromValue(v) {
                  return Qt.rgba(v, 0, 1-v)
              }
          
              handle: Rectangle {
                  x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
                  y: control.topPadding + control.availableHeight / 2 - height / 2
                  implicitWidth: 26
                  implicitHeight: 26
                  radius: 13
                  border.color: "#000"
                  color: control.colorFromValue( control.valueAt(control.position) )
              }
          }
          
          V Offline
          V Offline
          vishu_fcb
          wrote on last edited by
          #4

          @Wieland this code dint work!!

          E 1 Reply Last reply
          0
          • V vishu_fcb

            @Wieland this code dint work!!

            E Offline
            E Offline
            Eeli K
            wrote on last edited by
            #5

            @vishu_fcb How it doesn't work? In that example it's the handle color that changes, you can of course customize your slider so that it's the background rectangle that changes. See "customizing slider" in the documentation and qml/QtQuick/Controls2/Slider.qml in your Qt installation. Wieland just gave the basic idea: the color is bind to the slider position via a function.

            V 1 Reply Last reply
            0
            • E Eeli K

              @vishu_fcb How it doesn't work? In that example it's the handle color that changes, you can of course customize your slider so that it's the background rectangle that changes. See "customizing slider" in the documentation and qml/QtQuick/Controls2/Slider.qml in your Qt installation. Wieland just gave the basic idea: the color is bind to the slider position via a function.

              V Offline
              V Offline
              vishu_fcb
              wrote on last edited by
              #6

              @Eeli-K Handler colour i am able to change . I ll try once again

              1 Reply Last reply
              0

              • Login

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