angularjs-nouislider
Version:
An AngularJS wrapper for the noUiSlider range slider with minimal overhead.
51 lines (39 loc) • 1.31 kB
HTML
<html lang="en" ng-app="noUiSliderExamplesApp">
<head>
<meta charset="UTF-8">
<title>angularjs-nouislider</title>
</head>
<body ng-controller="examplesController">
<main>
<h1>angularjs-nouislider examples</h1>
<article>
<h2>Slider without ngModel</h2>
<div no-ui-slider
slider-options="optionsWithStart"
slider-created="onSliderCreated(api)"></div>
<angular-jsoneditor ng-model="optionsWithStart" options="jsonEditorOptions"></angular-jsoneditor>
</article>
<article>
<h2>Slider with ngModel</h2>
<div no-ui-slider
slider-options="optionsWithoutStart"
ng-model="sliderPositions"></div>
<angular-jsoneditor ng-model="optionsWithoutStart" options="jsonEditorOptions"></angular-jsoneditor>
<strong>Model:</strong>
<pre>{{ sliderPositions | json }}</pre>
</article>
<article>
<h2>Percentage slider</h2>
<div no-ui-slider
slider-options="optionsPercentage"
ng-model="percentage"
class="percentage-slider"
slider-created="onSliderCreated(api)"></div>
<angular-jsoneditor ng-model="optionsPercentage" options="jsonEditorOptions"></angular-jsoneditor>
<strong>Model:</strong>
<pre>{{ percentage | json }}</pre>
</article>
</main>
</body>
</html>