Qmlスライダスタイル、スライダのハンドルの前後に異なる溝の色を割り当てる

Question

デフォルトのスライダスタイルに似たスライダスタイルを作成したいと思いましたが、アプリケーションスタイルに合わせることができましたが、スライダーのハンドルの前と後に色を設定します。私はこのようなハンドル位置に固定スライダー、中に2つの長方形を置くために、大まかな回避策を試してみました

Slider{ 
      id: widthSlider 
      style: SliderStyle { 
        groove: Rectangle { 
         height: widthSlider.height*0.17 
         width: widthSlider.width 
         color: "black" 
         radius: 8 
        } 
        handle: Rectangle { 
         color: "grey" 
        } 
       } 
     } 

：ここ

はグラデーション、アンカーポイントおよびその他のプロパティなしで、私のコードの簡易版です。

Slider{ 
      id: widthSlider 
      Rectangle { 
       anchors.left: widthSlider.left 
       anchors.right: widthSlider.__handlePos 
       color: "black" 
      } 
      Rectangle { 
       anchors.left: widthSlider.__handlePos 
       anchors.right: widthSlider.right 
       color: "white" 
      } 
    ... 
} 

が、それはちょうど（私はエラーを取得する：QQuickAnchorLineにダブル割り当てることができません）、二重なので、私はハンドルの位置に固定することはできません。

Qmlでこれをどのように行うことができるのでしょうか？

Answer 1

これは何か？

Slider { 
    anchors.centerIn: parent 
    value: 0.5 
    width: 400 
    style: SliderStyle { 
     groove: Item { 
      implicitHeight: 10 
      LinearGradient { 
       anchors.fill: parent 
       start: Qt.point(0, control.height/2) 
       end: Qt.point(control.width, control.height/2) 
       gradient: Gradient { 
        GradientStop { position: 0.0; color: "orange" } 
        GradientStop { position: control.value; color: "brown" } 
        GradientStop { position: 1.0; color: "orange" } 
       } 
      } 
     } 
    } 
} 

または：本当に

Slider { 
    anchors.centerIn: parent 
    value: 0.5 
    width: 400 
    style: SliderStyle { 
     groove: Rectangle { 
      implicitHeight: 10 
      color: "lightgrey" 
      border { 
       color: "#999" 
       width: 1 
      } 
      Rectangle { 
       implicitHeight: 10 
       color: "orange" 
       implicitWidth: control.value * parent.width 
       border { 
        color: "#999" 
        width: 1 
       } 
      } 
     } 
    } 
}