Search code examples
qtqmlslidermarker

How to add markers on QSlider according to slider value changes in Qt qml


In my application i am using QSlider from 1 to 100 range. I am changing slider value using slider handle. I want to plot a markers or tick where slider handle will locate after changing value. How can i plot the markers on slider when value is changed

  Slider {
    id:   maultipleSlider
    value: 0
    from: 100
    to: 0
    rotation: 90       // <--- rotation
    x: 50;
    y: 200     // x & y position
    ToolTip {
          parent: maultipleSlider.handle
          visible: maultipleSlider.pressed
          text: maultipleSlider.value.toFixed(2)
      }
    onValueChanged:
    {
        console.log("Slider value ",  maultipleSlider.value)
    }
       background: Rectangle {
        x:   maultipleSlider.leftPadding
        y:   maultipleSlider.topPadding +   maultipleSlider.availableHeight / 2 - height / 2
        implicitWidth: 400
        implicitHeight: 6
        width:   maultipleSlider.availableWidth
        height: implicitHeight
        radius: 5
        color: "#48B0E5"
        border.color: "white"
        Rectangle {
            width:   maultipleSlider.visualPosition * parent.width
            height: parent.height
            color: "#bdbebf"
            radius: 2
        }
    }
}

Solution

  • Use slider->setTickInterval(int)

    Or if you are in Qt Designer, in the property editor window, under QSlider there is a tickInterval property that can be set. There is another field, tickPosition that will display your tick marks in the selected position.

    See: https://doc.qt.io/qt-5/qslider.html