Implement Range slider in AngularJS

rani
 
on Jul 12, 2020 11:34 PM
Sample_949351.zip
1188 Views

How to use range slider in angularjs

I want to use this. How to implement.

http://angular-slider.github.io/angularjs-slider/

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jul 14, 2020 05:08 AM
on Jul 14, 2020 05:09 AM

Hi rani,

Using the below link i have created the example.

http://angular-slider.github.io/angularjs-slider/

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Index</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <link rel="stylesheet" href="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.css" />
    <script type="text/javascript" src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ['rzSlider']);
        app.controller('MyController', function ($scope, $window) {
            $scope.rangeSlider = {
                minValue: 10,
                maxValue: 90,
                options: {
                    floor: 0,
                    ceil: 100,
                    step: 1,
                    noSwitching: true
                }
            };
        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    Min Value:<input type="number" ng-model="rangeSlider.minValue" />
    <br />
    Max Value:<input type="number" ng-model="rangeSlider.maxValue" />
    <br />
    <rzslider rz-slider-model="rangeSlider.minValue" rz-slider-high="rangeSlider.maxValue"
        rz-slider-options="rangeSlider.options"></rzslider>
</body>
</html>

Demo