Skip to content

Instantly share code, notes, and snippets.

@pibi

pibi/index.html

Created April 23, 2015 18:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pibi/42acfbb88f60f65043d9 to your computer and use it in GitHub Desktop.
Save pibi/42acfbb88f60f65043d9 to your computer and use it in GitHub Desktop.
Download ZIP
Quantumui modal & slider
Raw
index.html
<!DOCTYPE html>
<html lang="en" ng-app="vtrack">
<head>
<!-- Bootstrap latest css[THIS IS REQUIRED IF YOU DON'T HAVE QUANTUMUI PRO SKIN]-->
<link rel="stylesheet" href="lib/bootstrap/bootstrap.min.css">
<!-- Light package of effect.css It is optional -->
<link rel="stylesheet" href="lib/quantumui/dist/css/addon/effect-light.min.css">
<!-- Latest compiled and minified CSS on head of your page -->
<link rel="stylesheet" href="lib/quantumui/dist/css/quantumui.min.css">
<!-- VENDORS -->
<!-- Required for Datepicker Component -->
<script src="lib/moment-with-locales.min.js"></script>
<!-- ANGULARS -->
<script src="lib/angular-1.3.15/angular.min.js"></script>
<script src="lib/angular-1.3.15/angular-sanitize.min.js"></script>
<script src="lib/angular-1.3.15/angular-animate.min.js"></script>
<!-- QuantumUI -->
<script src="lib/quantumui/dist/js/quantumui-nojq.js"></script>
</head>
<body ng-cloak ng-controller="SimpleController">
<button type="button" data-nq-modal="" class="btn btn-primary" data-qo-content-template="{{highlightsTemplate}}" ng-click="getHighlight()">Create</button>
<div data-ng-init="volume = 5">
<input data-nq-slider="" data-ng-model="volume" data-direction="vertical"
data-min="0" data-max="10" data-step="1" size="100" type="range" data-thumb-class="circle">
</div>
</body>
<script>
var app = angular.module('vtrack', [
'ngSanitize',
'ngAnimate',
'ngQuantum'
])
.controller('SimpleController', ['$rootScope','$scope', function ($rootScope,$scope) {
$scope.log=function(){
console.log.apply(console,arguments)
}
$scope.highlight = {
width : 15,
thumbnail : null,
startTime : 0
};
$scope.setHighlightWidth= function (value){
$scope.highlight.width = value;
}
$scope.getHighlight= function(){
}
$scope.highlightsTemplate = "simple.html"
}])
</script>
</html>
Raw
simple.html
<input type="range" data-ng-model="rangeSliderVer" data-nq-slider="" data-direction="vertical" size="120">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment