A highly customisable circular slider written in QML.

Following is the list of properties of the Circular Slider.

  • trackWidth
  • progressWidth
  • handleWidth
  • handleHeight
  • handleRadius
  • startAngle
  • endAngle
  • minValue
  • maxValue
  • value
  • angle [readonly]
  • capStyle
  • trackColor
  • progressColor
  • handleColor
  • stepSize
  • snap
  • handle [Component]
  • pressed [readonly]
  • hideTrack
  • hideProgress

I have seen many Circular Dial implementation which were either written in C++ or using Canvas in QML. I thought of creating my own component where I can provide option to make it more customisable so that it can be used in all kind of applications.

I have decided to use Qt Quick Shapes to create the track and progress same as what I have done for my last component Circular Progress Bar. And provide customisation option not only limited to colors but also other properties like handle.

Let’s have look the anatomy of the Slider. Below is the image of the CircularSlider with basic properties.

  • The Track and Progress are created using Shape component with PathAngleArc.
  • Default handle is rounded rectangle which is loaded using a Loader inside the handleItem. By setting the property z to 2 we make sure that the handle is rendered always on top when we use any child item inside the slider for progress indicator.
  • A MouseArea is used which covers the whole component but only accepts mouse clicks along the slider track with a given minimum width.
  • A QtObject which is used to hide the internal details of the component from outside. This is the object inside which we hide all the internal properties and functions which are used for calculations.

Demo Screenshots

Basic properties Demo
Custom Handle Items
Custom Progress Indicator

SOURCE CODE:

https://github.com/arunpkqt/RadialBarDemo

CircularSlider is now available in Qt Marketplace. https://marketplace.qt.io/products/circularslider

12 thoughts on “QML Circular Slider

  1. wow! That’s absolutely amazing.

    Thank you so much for sharing such great content, Arunk.
    Your site is a great reference for the qml studies. We have almost nothing about the subject over the internet.

    Greetings from Brazil.

    Liked by 1 person

  2. Hi Arun,
    Thanks for the reference places.
    Do I need to move any other file to my project folder besides “CircularSlider.qml”? That’s the M16 error msg on the line 186 I have: “invalid property name “restoreMode”.

    Like

  3. It shouldn’t be making any issue.
    Still, you can use this approach

    change line 28: to
    import QtQml 2.15 as QQml

    and in line 186: to
    QQml.Binding {

    This should fix the warning.

    Liked by 1 person

  4. Didn’t work… This issue may has something to do to cpp file (I think) once I did open the file through your project and it has open with no warning… Otherwise if I copy just the CircularSlider.qml to my project folder, the issue comes again.

    Like

    1. hi Simon, have you tried the component with Qt 5.13.2? Does it show any errors or warnings? IIRC I haven’t used anything specific to Qt 5.15 so technically it should work with older versions as well.

      Like

    2. Contradicting to what I said earlier. I am using a new API mapToItem which was introduced in Qt 5.15 and restoreMode property of Binding which was introduced in Qt5.14. I will work on it to make it work with Qt 5.14.
      I hope you might be then able to backport it by removing restoreMode property to make it work with Qt 5.13.

      Like

  5. This is a very impressive body of work…thank you for creating it.

    I’m trying to modify the BasicPropertiesPage so the slider looks something like this:

    https://forum.qt.io/topic/127277/dial-style-progress-bars/8

    I tried modifying sliderProperties startAngle and endAngle, but it’s not properly oriented; if I do:

    property real startAngle: 45.0
    property real endAngle: 315.0

    Then it’s the right shape, just upside down. How best to remedy this?

    Thanks again…

    Like

    1. Thank you and glad that you found it useful :). You can simply set the property `rotation: 180` so that it looks the way you want. You can also take a look at the second CircularSlider in the CustomHandlePage in the demo. Please let me know if that didn’t work.

      Liked by 1 person

      1. Thanks, Arun – I didn’t realize that the Item component even had a rotation property. That works fine now.

        Great work…

        Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s