<!-- Plik: r13/directive-slider/index.html -->
<html>
<head>
  <meta charset="utf-8">
  <title>Aplikacja z suwakiem</title>
  <link rel="stylesheet" href="jquery.nouislider.css">
  <style type="text/css">
    .slider {
      display: block;
      height: 20px;
      margin: 20px;
    }
  </style>
</head>
<body ng-app="sliderApp">

  <div ng-controller="MainCtrl as mainCtrl">

    <div>
      Aktualna wartość suwaka: {{mainCtrl.selectedValue}}
    </div>

    <no-ui-slider class="slider"
                 ng-model="mainCtrl.selectedValue"
                 range-min="500"
                 range-max="5000">

    </no-ui-slider>

    <div>
      <input type="number"
             ng-model="mainCtrl.textValue"
             min="500"
             max="5000"
             placeholder="Ustaw wartość">
      <button ng-click="mainCtrl.setSelectedValue()">
        Ustaw wartość paska przewijania
      </button>
    </div>
  </div>

  <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  <script src="jquery.nouislider.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js"></script>
  <script src="app.js"></script>
  <script src="noui-slider.js"></script>
</body>
</html>
