Get started with angularjs-slider CDN
MIT licensed
AngularJS Slider is a directive for creating interactive sliders in AngularJS applications.
Tags:- angular
- slider
Stable version
Copied!
How to start using angularjs-slider CDN
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.11/angular-material.min.css">
<link rel="stylesheet" href="https://cdn.cdnhub.io/angularjs-slider/7.1.0/rzSlider.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.11/angular-material.min.js"></script>
<script src="https://cdn.cdnhub.io/angularjs-slider/7.1.0/rzslider.min.js"></script>
<script>
angular.module('myApp', ['ngMaterial', 'rzSlider'])
.controller('SliderCtrl', function($scope) {
$scope.options = {
min: 0,
max: 100,
options: {
floor: 0,
ceil: 100,
showLabel: true,
showTicks: true,
step: 1,
bounds: {min: 0, max: 100}
}
};
$scope.onChange = function(value) {
console.log('New value: ' + value);
};
});
</script>
</head>
<body ng-app="myApp" ng-controller="SliderCtrl">
<md-content layout="column" layout-align="center center">
<rz-slider name="mySlider" ng-model="value" options="options" ng-change="onChange(value)"></rz-slider>
</md-content>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
All versions
1.0.0
1.1.0
2.0.0
2.1.0
2.10.2
2.10.3
2.10.4
2.11.0
2.12.0
2.13.0
2.14.0
2.2.0
2.3.0
2.4.0
2.4.1
2.5.0
2.6.0
2.7.0
2.7.1
2.8.0
2.9.0
3.0.0
4.0.0
4.0.1
4.0.2
4.1.0
5.0.0
5.0.1
5.1.0
5.1.1
5.2.0
5.3.0
5.4.0
5.4.2
5.4.3
5.5.0
5.5.1
5.6.0
5.7.0
5.8.0
5.8.1
5.8.2
5.8.3
5.8.4
5.8.5
5.8.6
5.8.7
5.8.8
5.8.9
5.9.0
6.0.0
6.0.1
6.0.2
6.1.0
6.1.1
6.1.2
6.2.0
6.2.1
6.2.2
6.2.3
6.3.0
6.4.0
6.4.1
6.4.2
6.4.3
6.4.4
6.5.0
6.5.1
6.6.0
6.6.1
6.7.0
7.0.0
7.0.1
*** 7.1.0