mfyz · October 25, 2015 22:15
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html ng-app="webApp">
 <head>
 	<title>Title</title>
 	<meta charset="utf-8">

 	<script src="jquery-1.11.3.min.js"></script>
 	<script src="jquery-ui-1.11.4/jquery-ui.min.js"></script>
 	<!-- http://ghusse.github.io/jQRangeSlider/ -->
 	<script src="jQRangeSlider-5.7.1/jQDateRangeSlider-min.js"></script>

 	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>

 	<link rel="stylesheet" href="jquery-ui-1.11.4/jquery-ui.css">
 	<link rel="stylesheet" href="jquery-ui-1.11.4/jquery-ui.theme.min.css">
 	<link rel="stylesheet" href="jQRangeSlider-5.7.1/css/classic-min.css">

 	<style>
 		body {
 			font-size: 14px;
 			font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 		}

 		#slider {
 			margin-right: 50px;
 		}

 		#slider .ui-rangeSlider-bar {
 			background-color: #1c94c4;
 			border-radius: 15px;

 		}

 		#slider .ui-rangeSlider-handle {
 			width: 15px;
 			background-color: #e78f08;
 		}

 		#slider .ui-rangeSlider-leftHandle {
 			border-radius: 5px 0 0 5px;
 		}

 		#slider .ui-rangeSlider-rightHandle {
 			border-radius: 0 5px 5px 0;
 		}
 	</style>
 </head>
 <body>

 <div ng-view></div>

 <script type="text/ng-template" id="slider.html">
 	<h1>{{title}}</h1>
 	<br/>
 	<div id="slider"></div>
 	<br/>
 	<a ng-href="javascript:;" ng-click="test('hey')">Test</a> &bull;
 	<a ng-href="javascript:;" ng-click="testChangeSliderValues()">Set Days 10-11</a> &bull;
 	<a ng-href="javascript:;" ng-click="testChangeSliderBounds()">Widen Selection to 2 Months</a>
 </script>

 <script>

 	var webApp = angular.module('webApp', ['ngRoute']);

 	webApp.config(['$routeProvider',
 		function($routeProvider) {
 			$routeProvider.
 				when('/slider', {
 					templateUrl: 'slider.html',
 					controller: 'IndexCtrl'
 				}).
 				otherwise({
 					redirectTo: '/slider'
 				});
 		}]);

 	webApp.controller('IndexCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
 		$scope.title = "Date Slider";
 		$scope.dateMin = new Date(2012, 1, 1);
 		$scope.dateMax = new Date(2012, 1, 31);
 		$scope.dateSelectedFrom = new Date(2012, 1, 5);
 		$scope.dateSelectedTo = new Date(2012, 1, 5);

 		$scope.sliderValueChanged = function(data){
 			$scope.dateSelectedFrom = data.values.min;
 			$scope.dateSelectedTo = data.values.max;
 			console.log("Something moved. min: " + data.values.min + " max: " + data.values.max);
 		};

 		$scope.initSlider = function(){
 			$("#slider").dateRangeSlider({
 				symmetricPositionning: true,
 				bounds: {
 					min: $scope.dateMin,
 					max: $scope.dateMax
 				},
 				defaultValues:{
 					min: $scope.dateSelectedFrom,
 					max: $scope.dateSelectedTo
 				},
 				range: {
 					//min: {days: 1}
 				},
 				formatter:function(val){
 					var days = val.getDate(),
 						month = val.getMonth() + 1,
 						year = val.getFullYear();
 					return month + "/" + days + "/" + year;
 				}
 			})
 			.bind("valuesChanging", function(e, data){
 				$timeout(function(){ $scope.sliderValueChanged(data); });
 			});
 		};

 		$scope.changeSliderValues = function(min, max){
 			$("#slider").dateRangeSlider("values", min, max);
 		};

 		$scope.changeSliderBounds = function(min, max){
 			$("#slider").dateRangeSlider("bounds", min, max);
 		};

 		$scope.test = function(param){ console.log(param); };

 		$scope.testChangeSliderValues = function(){
 			$scope.changeSliderValues(new Date(2012, 1, 10), new Date(2012, 1, 11));
 		};

 		$scope.testChangeSliderBounds = function(){
 			$scope.changeSliderBounds(new Date(2012, 1, 1), new Date(2012, 2, 28));
 		};

 		$scope.initSlider();
 	}]);

 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html ng-app="webApp">
	<head>
	<title>Title</title>
	<meta charset="utf-8">

	<script src="jquery-1.11.3.min.js"></script>
	<script src="jquery-ui-1.11.4/jquery-ui.min.js"></script>
	<!-- http://ghusse.github.io/jQRangeSlider/ -->
	<script src="jQRangeSlider-5.7.1/jQDateRangeSlider-min.js"></script>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>

	<link rel="stylesheet" href="jquery-ui-1.11.4/jquery-ui.css">
	<link rel="stylesheet" href="jquery-ui-1.11.4/jquery-ui.theme.min.css">
	<link rel="stylesheet" href="jQRangeSlider-5.7.1/css/classic-min.css">

	<style>
	body {
	font-size: 14px;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	}

	#slider {
	margin-right: 50px;
	}

	#slider .ui-rangeSlider-bar {
	background-color: #1c94c4;
	border-radius: 15px;

	}

	#slider .ui-rangeSlider-handle {
	width: 15px;
	background-color: #e78f08;
	}

	#slider .ui-rangeSlider-leftHandle {
	border-radius: 5px 0 0 5px;
	}

	#slider .ui-rangeSlider-rightHandle {
	border-radius: 0 5px 5px 0;
	}
	</style>
	</head>
	<body>

	<div ng-view></div>

	<script type="text/ng-template" id="slider.html">
	<h1>{{title}}</h1>
	<br/>
	<div id="slider"></div>
	<br/>
	<a ng-href="javascript:;" ng-click="test('hey')">Test</a> •
	<a ng-href="javascript:;" ng-click="testChangeSliderValues()">Set Days 10-11</a> •
	<a ng-href="javascript:;" ng-click="testChangeSliderBounds()">Widen Selection to 2 Months</a>
	</script>

	<script>

	var webApp = angular.module('webApp', ['ngRoute']);

	webApp.config(['$routeProvider',
	function($routeProvider) {
	$routeProvider.
	when('/slider', {
	templateUrl: 'slider.html',
	controller: 'IndexCtrl'
	}).
	otherwise({
	redirectTo: '/slider'
	});
	}]);

	webApp.controller('IndexCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
	$scope.title = "Date Slider";
	$scope.dateMin = new Date(2012, 1, 1);
	$scope.dateMax = new Date(2012, 1, 31);
	$scope.dateSelectedFrom = new Date(2012, 1, 5);
	$scope.dateSelectedTo = new Date(2012, 1, 5);

	$scope.sliderValueChanged = function(data){
	$scope.dateSelectedFrom = data.values.min;
	$scope.dateSelectedTo = data.values.max;
	console.log("Something moved. min: " + data.values.min + " max: " + data.values.max);
	};

	$scope.initSlider = function(){
	$("#slider").dateRangeSlider({
	symmetricPositionning: true,
	bounds: {
	min: $scope.dateMin,
	max: $scope.dateMax
	},
	defaultValues:{
	min: $scope.dateSelectedFrom,
	max: $scope.dateSelectedTo
	},
	range: {
	//min: {days: 1}
	},
	formatter:function(val){
	var days = val.getDate(),
	month = val.getMonth() + 1,
	year = val.getFullYear();
	return month + "/" + days + "/" + year;
	}
	})
	.bind("valuesChanging", function(e, data){
	$timeout(function(){ $scope.sliderValueChanged(data); });
	});
	};

	$scope.changeSliderValues = function(min, max){
	$("#slider").dateRangeSlider("values", min, max);
	};

	$scope.changeSliderBounds = function(min, max){
	$("#slider").dateRangeSlider("bounds", min, max);
	};

	$scope.test = function(param){ console.log(param); };

	$scope.testChangeSliderValues = function(){
	$scope.changeSliderValues(new Date(2012, 1, 10), new Date(2012, 1, 11));
	};

	$scope.testChangeSliderBounds = function(){
	$scope.changeSliderBounds(new Date(2012, 1, 1), new Date(2012, 2, 28));
	};

	$scope.initSlider();
	}]);

	</script>

	</body>
	</html>