<html ng-app='angular-bootstrap-slider-test'>
<head>
    <title>Angular Bootstrap Slider test</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="node_modules/bootstrap-slider/dist/css/bootstrap-slider.css">
</head>
<body ng-controller="TestCtrl">

<div class="col-md-2 col-md-offset-2">

    <p>

        <label for="sliderId">Slider Id:</label>
        <input id="sliderId" type="text" ng-model="testOptions.sliderId">

        <label for="modelValue">Slider Value in ng-model:</label>
        <input id="modelValue" type="range" ng-model="model.first" min="{{testOptions.min}}" step="{{testOptions.step}}"
               max="{{testOptions.max}}">
        <input ng-model="model.first" class="form-control">

        <label for="value">Value:</label>
        <input id="value" type="number" ng-model="value.first" class="form-control">

        <label for="min">Min:</label>
        <input id="min" type="number" ng-model="testOptions.min" class="form-control">

        <label for="max">Max:</label>
        <input id="max" type="number" ng-model="testOptions.max" class="form-control">

        <label for="step">Step:</label>
        <input id="step" type="number" ng-model="testOptions.step" class="form-control">

        <label for="range">Range:</label>
        <input id="range" type="checkbox" ng-model="testOptions.range" class="form-control">

        <label for="precision">Precision:</label>
        <input id="precision" type="number" ng-model="testOptions.precision" class="form-control">

        <label for="reversed">Reversed:</label>
        <input id="reversed" type="checkbox" ng-model="testOptions.reversed" class="form-control">

        <label for="orientation">Orientation:</label>
        <select id="orientation" ng-model="testOptions.orientation" class="form-control">
            <option value="horizontal">Horizontal</option>
            <option value="vertical">Vertical</option>
        </select>

        <label for="handle">Handle:</label>
        <select id="handle" ng-model="testOptions.handle" class="form-control">
            <option value="round">Round</option>
            <option value="square">Square</option>
            <option value="triangle">Triangle</option>
            <option value="custom">Custom</option>
        </select>

        <label for="enabled">Enabled:</label>
        <input id="enabled" type="checkbox" ng-model="testOptions.enabled" class="form-control">

        <label for="ngDisabled">ngDisabled:</label>
        <input id="ngDisabled" type="checkbox" ng-model="testOptions.ngDisabled" class="form-control">

        <label for="naturalarrowkeys">Natural arrow keys:</label>
        <input id="naturalarrowkeys" type="checkbox" ng-model="testOptions.naturalarrowkeys" class="form-control">
    </p>

    Slider using tags<br>
    <slider slider-id="testOptions.sliderId"
            ng-model="model.first"
            value="value.first"
            min="testOptions.min"
            max="testOptions.max"
            step="testOptions.step"
            range="testOptions.range"
            precision="{{ testOptions.precision }}"
            reversed="{{ testOptions.reversed }}"
            orientation="{{ testOptions.orientation }}"
            handle="{{ testOptions.handle }}"
            enabled="{{ testOptions.enabled }}"
            ng-disabled="testOptions.ngDisabled"
            naturalarrowkeys="{{ testOptions.naturalarrowkeys }}"
            >
        If you can see this then slider did not get compiled by Angular.
        Check that all necessary files are included, did you run "bower install"?
    </slider>

    <br><br>

    <p>
        <label for="tooltipseparator">Tooltip separator:</label>
        <input id="tooltipseparator" type="text" ng-model="testOptions.tooltipseparator" class="form-control">

        <label for="tooltipsplit">Tooltip split:</label>
        <input id="tooltipsplit" type="checkbox" ng-model="testOptions.tooltipsplit" class="form-control">
    </p>

    Range slider<br>
	<span slider
          slider-id="rangeSlider"
          ng-model="model.second"
          value="value.second"
          min="testOptions.min"
          max="testOptions.max"
          range="range"
          tooltipseparator="{{ testOptions.tooltipseparator }}"
          tooltipsplit="{{ testOptions.tooltipsplit }}">
	</span>
    Model: {{model.second | json}}<br>
    Value: {{value.second | json}}<br>

    <br><br>

    <p>
        <label for="tooltip">Tooltip:</label>
        <select id="tooltip" ng-model="testOptions.tooltip" class="form-control">
            <option value="show">Show</option>
            <option value="hide">Hide</option>
            <option value="always">Always</option>
        </select>

        <label for="formatter_prefix">Formatter prefix:</label>
        <input id="formatter_prefix" type="text" ng-model="prefix" class="form-control">

        <label for="formatter_sufffix">Formatter suffix:</label>
        <input id="formatter_sufffix" type="text" ng-model="suffix" class="form-control">
        <button id="relayout-button" ng-click="$broadcast('slider:relayout')">Relayout</button>
    </p>

    Slider with configurable tooltip<br>
    <slider slider-id="tooltipSlider"
            ng-model="model.third"
            precision="{{ testOptions.precision }}"
            tooltip="{{ testOptions.tooltip }}"
            formatter="formatterFn(value)"
            >
    </slider>
    Model: {{model.third}}<br>

    <br><br>

    Slider using event expressions
    <slider ng-model="model.fourth"
            on-start-slide="status='started'"
            on-slide="status=$event.type"
            on-stop-slide="status='stopped'"
            >
    </slider>
    Model: {{model.fourth}}<br>
    Status: {{status}}<br>

    <br><br>

    Slider using event callbacks
	<span slider
          ng-model="model.fifth"
          on-start-slide="slideDelegate(value, $event)"
          on-slide="slideDelegate(value, $event)"
          on-stop-slide="slideDelegate(value, $event)"
            >
	</span>
    Model: {{model.fifth}}<br>
    Event type: {{delegateEvent.type}}<br>

    <br><br>

    Slider using mixed expressions and callbacks
	<span slider
          ng-model="model.sixth"
          on-start-slide="status2='started'"
          on-slide="slideDelegate(value)"
          on-stop-slide="status2=$event.type; slideDelegate(value, $event)"
            >
	</span>
    Model: {{model.sixth}}<br>
    Status: {{status2}}<br>
    Event type: {{delegateEvent.type}}<br>

    <br><br>

    Updates model on slide event by default
    <slider ng-model="model.seventh"></slider>
    Model: {{model.seventh}}<br>

    <br><br>

    Updates model only on slideStop event
    <slider ng-model="model.eighth" updateevent="slideStop"></slider>
    Model: {{model.eighth}}<br>

    <br><br>

    Updates model on slideStart and slideStop
    <span slider ng-model="model.ninth" updateevent='["slideStart","slideStop"]'></span>
    Model: {{model.ninth}}<br>

    <br><br>

    Updates model on all events
    <span slider ng-model="model.tenth"
          updateevent="[&quot;slideStop&quot;, &quot;slide&quot;, &quot;slideStart&quot;]"></span>
    Model: {{model.tenth}}
</div>


<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="node_modules/bootstrap-slider/dist/bootstrap-slider.js"></script>

<!-- angular-slider include -->
<script src="slider.js"></script>

<!-- test file include -->
<script src="test.js"></script>
</body>
</html>
