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
