demos/declarative/flickr/common/Slider.qml
changeset 37 758a864f9613
parent 30 5dc02b23752f
equal deleted inserted replaced
36:ef0373b55136 37:758a864f9613
    43 
    43 
    44 Item {
    44 Item {
    45     id: slider; width: 400; height: 16
    45     id: slider; width: 400; height: 16
    46 
    46 
    47     // value is read/write.
    47     // value is read/write.
    48     property real value
    48     property real value: 1
    49     onValueChanged: { handle.x = 2 + (value - minimum) * slider.xMax / (maximum - minimum); }
    49     onValueChanged: updatePos();
    50     property real maximum: 1
    50     property real maximum: 1
    51     property real minimum: 1
    51     property real minimum: 1
    52     property int xMax: slider.width - handle.width - 4
    52     property int xMax: width - handle.width - 4
       
    53     onXMaxChanged: updatePos();
       
    54     onMinimumChanged: updatePos();
       
    55 
       
    56     function updatePos() {
       
    57         if (maximum > minimum) {
       
    58             var pos = 2 + (value - minimum) * slider.xMax / (maximum - minimum);
       
    59             pos = Math.min(pos, width - handle.width - 2);
       
    60             pos = Math.max(pos, 2);
       
    61             handle.x = pos;
       
    62         } else {
       
    63             handle.x = 2;
       
    64         }
       
    65     }
    53 
    66 
    54     Rectangle {
    67     Rectangle {
    55         anchors.fill: parent
    68         anchors.fill: parent
    56         border.color: "white"; border.width: 0; radius: 8
    69         border.color: "white"; border.width: 0; radius: 8
    57         gradient: Gradient {
    70         gradient: Gradient {
    60         }
    73         }
    61     }
    74     }
    62 
    75 
    63     Rectangle {
    76     Rectangle {
    64         id: handle; smooth: true
    77         id: handle; smooth: true
    65         x: slider.width / 2 - handle.width / 2; y: 2; width: 30; height: slider.height-4; radius: 6
    78         y: 2; width: 30; height: slider.height-4; radius: 6
    66         gradient: Gradient {
    79         gradient: Gradient {
    67             GradientStop { position: 0.0; color: "lightgray" }
    80             GradientStop { position: 0.0; color: "lightgray" }
    68             GradientStop { position: 1.0; color: "gray" }
    81             GradientStop { position: 1.0; color: "gray" }
    69         }
    82         }
    70 
    83 
    71         MouseArea {
    84         MouseArea {
       
    85             id: mouse
    72             anchors.fill: parent; drag.target: parent
    86             anchors.fill: parent; drag.target: parent
    73             drag.axis: Drag.XAxis; drag.minimumX: 2; drag.maximumX: slider.xMax+2
    87             drag.axis: Drag.XAxis; drag.minimumX: 2; drag.maximumX: slider.xMax+2
    74             onPositionChanged: { value = (maximum - minimum) * (handle.x-2) / slider.xMax + minimum; }
    88             onPositionChanged: { value = (maximum - minimum) * (handle.x-2) / slider.xMax + minimum; }
    75         }
    89         }
    76     }
    90     }