title: How to set initial value of a custom slider in qml?
body: <p>I am using Qt 5.4.1. I have made a custom slider element to be used in other qml components like so:</p>
  <code>Slider.qml</code>
  <pre><code>import QtQuick 2.4
  import QtQuick.Controls 1.3
  import QtQuick.Controls.Styles 1.3
  
  Item {
      id: root
      width: 150
      height: 30
  
      property int val: slider.value
      property int maxVal: slider.maximumValue
      property int minVal: slider.minimumValue
      property int step: slider.stepSize
  
      Slider {
          id: slider
          anchors.margins: 20
          stepSize: step
          maximumValue: maxVal
          minimumValue: minVal
          style: customStyle
  //      onValueChanged: print(&quot;From Slider.qml&quot; ,value)
      }
  
      Component {
          id: customStyle
          SliderStyle {
              handle: Rectangle {
                  width: 20
                  height: 12
                  antialiasing: true
                  color: Qt.lighter(&quot;#468bb7&quot;, 1.2)
              }
  
              groove: Item {
                  implicitHeight: root.height
                  implicitWidth: root.width
                  Rectangle {
                      height: 8
                      width: parent.width
                      anchors.verticalCenter: parent.verticalCenter
                      color: &quot;#847878&quot;
                      opacity: 0.8
                      Rectangle {
                          antialiasing: true
                          radius: 1
                          color: &quot;#1a0d0d&quot;
                          height: parent.height
                          width: parent.width * control.value / control.maximumValue
                      }
                  }
              }
          }
      }
  }
  </code></pre>
  <p>And in another file <code>test.qml</code> I am using this slider like so</p>
  <code>test.qml</code>
  <pre><code>import QtQuick 2.3
  
  Rectangle {
      id: test
  
      width: 640; height: 480
  
      Slider {
          id: slider
          width: 300
          height: 30
          anchors.centerIn: parent
          maxVal: 1000
          minVal: 0
          step: 50
          val: 500 // when commented out, onValChanged is triggered on sliding
          onValChanged: print(val)
      }
  }
  </code></pre>
  <p>I want to set the slider to an initial value when instantiated in <code>test.qml</code>, using the property <code>val</code>. But when I set initial value, <code>onValChanged</code> does not get triggered when sliding the slider. But when I comment that line out (<code>val: 500</code>), <code>onValChanged</code> is triggered when the slider is slid, but the slider starts with initial value of 0 which I don't want. I don't understand what I am doing wrong here!</p>