title: How to restrict the mouseArea of a QML Slider to the handle only?
body: <p>I want to implement a <code>Slider</code> using QtQuick.Controls where only the <code>handle</code> is clickable and can be used to drag the <code>handle</code>. If you click the <code>groove</code>, nothing should happen, the <code>handle</code> should stay where it is. How can I restrict the <code>mouseArea</code> of the <code>Slider</code> to the <code>handle</code> only?</p>
  
  <p>In the below example the <code>Slider</code> is clickable on the whole <code>Slider</code> <code>width</code> and <code>height</code>:</p>
  
  <pre><code>import QtQuick 2.4
  import QtQuick.Window 2.2
  import QtQuick.Controls 1.3
  import QtQuick.Controls.Styles 1.3
  
  Window {
      id: mainItem
      width: 800
      height: 400
      visible: true
  
      Slider{
          id: autoSlider
          anchors.horizontalCenter: parent.horizontalCenter
          anchors.verticalCenter: parent.verticalCenter
          maximumValue: 1.0
          value: 0
          updateValueWhileDragging : false
  
          style: SliderStyle {
              groove: Rectangle {
                  implicitWidth: 350
                  implicitHeight: 8
                  color: "gray"
                  radius: 8
              }
              handle: Rectangle {
                  anchors.centerIn: parent
                  color: control.pressed ? "white" : "lightgray"
                  border.color: "gray"
                  border.width: 2
                  implicitWidth: 45
                  implicitHeight: 45
                  radius: 12
              }
          }
      }
  }
  </code></pre>
  
  <p>I thought about changing the <code>Slider.qml</code> template in the "..\qml\QtQuick\Controls" folder, but I couldn't really figure out what to do. </p>
  
  <p>All my search efforts lead to nothing. Any help would be greatly appreciated.</p>