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. Custom spinbox with "classic" spinbox display
Forum Update on Monday, May 27th 2025

Custom spinbox with "classic" spinbox display

Scheduled Pinned Locked Moved Solved QML and Qt Quick
3 Posts 2 Posters 1.0k Views
  • 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.
  • F Offline
    F Offline
    Fheanor
    wrote on last edited by
    #1

    I need to use a double spinbox for my QML view and in this case, I based my spinbox on this example .

    SpinBox {
        id: spinbox
        from: 0
        value: 110
        to: 100 * 100
        stepSize: 100
        anchors.centerIn: parent
    
        property int decimals: 2
        property real realValue: value / 100
    
        validator: DoubleValidator {
            bottom: Math.min(spinbox.from, spinbox.to)
            top:  Math.max(spinbox.from, spinbox.to)
        }
    
        textFromValue: function(value, locale) {
            return Number(value / 100).toLocaleString(locale, 'f', spinbox.decimals)
        }
    
        valueFromText: function(text, locale) {
            return Number.fromLocaleString(locale, text) * 100
        }
    }
    

    It seems that when you use a custom spinbox, it is not displayed as a "classic" spinbox. It is displayed like this:

    enter image description here

    However, buttons are too big for my interface. I would like to know is there is a easy way to display the spinbox as a "classic" spinbox like this:

    enter image description here.

    Thanks a lot and have a good day !

    E 1 Reply Last reply
    0
    • F Fheanor

      I need to use a double spinbox for my QML view and in this case, I based my spinbox on this example .

      SpinBox {
          id: spinbox
          from: 0
          value: 110
          to: 100 * 100
          stepSize: 100
          anchors.centerIn: parent
      
          property int decimals: 2
          property real realValue: value / 100
      
          validator: DoubleValidator {
              bottom: Math.min(spinbox.from, spinbox.to)
              top:  Math.max(spinbox.from, spinbox.to)
          }
      
          textFromValue: function(value, locale) {
              return Number(value / 100).toLocaleString(locale, 'f', spinbox.decimals)
          }
      
          valueFromText: function(text, locale) {
              return Number.fromLocaleString(locale, text) * 100
          }
      }
      

      It seems that when you use a custom spinbox, it is not displayed as a "classic" spinbox. It is displayed like this:

      enter image description here

      However, buttons are too big for my interface. I would like to know is there is a easy way to display the spinbox as a "classic" spinbox like this:

      enter image description here.

      Thanks a lot and have a good day !

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

      @Fheanor It looks like you're using Controls 2. See the documentation for SpinBox; in the end of "Detailed description" there's a link to "Customizing SpinBox" like in all docs of Controls 2 types. You can change the location and size of the buttons. It's not necessarily "easy". Ask if you have some specific questions.

      F 1 Reply Last reply
      0
      • E Eeli K

        @Fheanor It looks like you're using Controls 2. See the documentation for SpinBox; in the end of "Detailed description" there's a link to "Customizing SpinBox" like in all docs of Controls 2 types. You can change the location and size of the buttons. It's not necessarily "easy". Ask if you have some specific questions.

        F Offline
        F Offline
        Fheanor
        wrote on last edited by
        #3

        @Eeli-K Thanks for your answer, I might try to set my own buttons but it is not so easy.

        I finally found a simple solution that allow me to use QtQuick.Controls.2.x:

        import QtQuick 2.7
        import QtQuick.Controls 2.0
        import QtQuick.Controls 1.4 as OldCtrl
        
        
        ApplicationWindow {  // Unprefixed, therefor from the new QtQuick.Controls 2.0
            id: root
            visible: true
            width: 400; height: 450
        
            OldCtrl.SpinBox {
                width: 100
                value: 20
                decimals: 2
            }
        }
        
        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