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