<html ng-app='angular-bootstrap-slider-test'>
<head>
	<title>Angular Bootstrap Slider test</title>
	<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
	<link rel="stylesheet" href="bower_components/seiyria-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 type="number" 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="formater_prefix">Formatter prefix:</label>
		<input id="formater_prefix" type="text" ng-model="prefix" class="form-control">

		<label for="formater_sufffix">Formatter suffix:</label>
		<input id="formater_sufffix" type="text" ng-model="suffix" class="form-control">
	</p>

	Slider with configurable tooltip<br>
	<slider slider-id="tooltipSlider"
	        ng-model="model.third"
	        precision="{{ testOptions.precision }}"
	        tooltip="{{ testOptions.tooltip }}"
	        formater="formaterFn"
					>
	</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="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/seiyria-bootstrap-slider/dist/bootstrap-slider.min.js"></script>

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

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