How to Customise RangeSlider in qml

[divyadesh_777]

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls
Window {
    width: 800
    height: 480
    visible: true
    title: qsTr("Hello World")
    color: "Blue"
    property int first: control.first.value.toFixed(
                            0) <= 50 ? control.first.value.toFixed(
                                           0) : 100 - control.first.value.toFixed(
                                           0)
    property int second: (100 - control.second.value.toFixed(
                              0)) <= 50 ? 100 - control.second.value.toFixed(
                                              0) : control.second.value.toFixed(
                                              0)

    //Scale TODO
    Row{
        id:longLine
        spacing: 60-8
        x:65+8+54
        anchors{
            bottom: parent.bottom
        }
    Repeater {
        model: 11
    Rectangle {
        width: 2;
        height: 10
        color: "white"
        Row{
             spacing: 8.7
            // anchors.left: longLine.right
             anchors.bottom: parent.bottom
             visible: index*10===100 ?false:true
        Repeater {
            model: 5
        Rectangle {
            width: 2;
            height: 3
            color: "white"

          }
        }
        }
        Text {
              id:scalePara
              text: parseInt(index)<=5?parseInt(index*10):parseInt(100-index*10)
              font.pixelSize: 10
              color: "white"
              font.bold: true
              anchors{
                  bottom: parent.top
                  bottomMargin: 1
                  horizontalCenter: parent.horizontalCenter
              }

        }
        Text{
            visible:index<5
            anchors{
               right: scalePara.left
               rightMargin: 2
              verticalCenter: scalePara.verticalCenter
            }
            text: "◄"
            font.pixelSize: 12
            color: "white"
            font.bold: true
        }
        Text{
            visible:index>5
            anchors{
               left: scalePara.right
               leftMargin: 2
              verticalCenter: scalePara.verticalCenter
            }
            text: "►"
            font.pixelSize: 12
            color: "white"
            font.bold: true
        }

        }
      }
    }


    RangeSlider {
        x:50+65

        leftInset: -100
        rightInset: -100
        anchors{
            bottom: parent.bottom
        }
        width: 566
        height: 20
        id: control
        stepSize: 1
        from: 0
        to: 100

        first.value: (second.value).toFixed(0)>=0? first.value:0
        second.value:(first.value).toFixed(0)>=0? 100:second.value
        background: Rectangle {
            x: control.leftPadding
            y: control.topPadding + control.availableHeight / 2 - height / 2
            implicitWidth: 200 +100
            implicitHeight: 4
            width: control.availableWidth
            height: implicitHeight
            radius: 2
            color:"#bdbebf"
            Rectangle {
                x: control.first.visualPosition * parent.width
                width: control.second.visualPosition * parent.width - x
                height: parent.height
                color:"#21be2b"
                radius: 2
            }
        }
        first.handle: Rectangle {
            x: control.leftPadding + control.first.visualPosition * (control.availableWidth - width)
            y: control.topPadding + control.availableHeight / 2 - height / 2
            implicitWidth: 26
            implicitHeight: 26
            radius: 13
            color:control.first.pressed ? "#f0f0f0" : "#f6f6f6"
            border.color:"#bdbebf"

        }
        second.handle: Rectangle {
            x: control.leftPadding + control.second.visualPosition * (control.availableWidth - width)
            y: control.topPadding + control.availableHeight / 2 - height / 2
            implicitWidth: 26
            implicitHeight: 26
            radius: 13
            color:control.second.pressed ? "#f0f0f0" : "#f6f6f6"
            border.color:"#bdbebf"


            }
        first.onMoved: {
            control.setValues(first.value.toFixed(0),100)
            console.log("First Value :" + (first.value.toFixed(0)) )


        }
        second.onMoved: {
          control.setValues(0,second.value.toFixed(0))
             console.log("Second Value :"+second.value.toFixed(0))

        }

    }
}

We want to design one Rangle Slider with Scale
and we are facing one issue in our code that is --describe below

we want to first.handler value start from the zero the value start from the scale starting point and go to the scale end point of zero.

and same for second scale

But the problem is we can't modified range slider value .
can anyone suggest how to do this .

statement : when the ball or first slider outside the scale we don't want to slider give any value . when the slider first crosses to scale zero it start giving value and go at the end of scale

same for second Range slider

Thank you