<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="["slideStop", "slide", "slideStart"]"></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>