QML自定义可填充颜色的滑块
使用QML自定义一种滑块，可以通过滑动，填充滑动槽的颜色。
如图所示的一种效果：
自定义这种滑块，需要先定义4个Rectangle元素，分别作为面板、滑动槽，滑动按钮及颜色填充使用。
1、先定义面板，可设置宽高，也可通过Image元素设置面板的背景图片。
2、在面板上定义滑动槽，可以设置radius使滑动槽有圆弧的效果，通过设置
anchors.centerIn:Parent,来使滑动槽在面板中居中。
3、定义滑动按钮，可以定义成圆形或方形，也可通过Image元素设置背景图片。
滑动按钮需要滑动，要在滑动槽中滑动，可通过鼠标事件，drag来实现。
drag.axis:设置拖拽方向，可以是X方向,Y方向,XandY方向(drag.XAxis/drag.YAxis
/drag.XAndYAxis)。
4、定义滑动的颜色填充。
定义一个Rectangle，设置它的宽或者高，绑定到滑块按钮移动的距离上，滑块移动的距离，可以通过滑动槽的位置与滑动按钮的位置来计算出来。
比较关键的一点是要通过设置Z值，使滑动按钮要在颜色填充元素的上面。
示例代码如下：
import QtQuick 2.0
Rectangle
{
id:root
width: 40
height: 180
radius: 1
color: "#00000000"
Image {
id: image
width: 40
height: 180
source: "/pizhu/draw2.png"
}//定义面板背景图片
Rectangle
{
id:rect1
width: 36
height: 170
radius: 18
color: "gray"
anchors.centerIn: parent
//定义滑动槽
Rectangle
{
id:rect2
width: 36
height: 50
radius: 18
z:2//定义z值，z值越大，越位于上面
Image {
id: image1
width: 38
height: 50
source: "/pizhu/clearbutton.png"
}
MouseArea {
anchors.fill: parent
drag.target: rect2
drag.axis: Drag.YAxis
drag.minimumY: 0
drag.maximumY: 120
}//鼠标拖拽事件，从上往下拖拽，最大值应该是滑动槽的高-滑动按钮的高
}
Rectangle
{
z:1
width: 36
height:36+rect2.y
color:"steelblue"
radius: 18
}//颜色填充元素，位于滑动按钮的下面，高度随着移动距离儿变化，就形成了一种颜色填充的效果。
}
}