how to add an event in the angular range slider . i use ngchange but it is not working

Question

<div range-slider min="minPrice" max="maxPrice" modelmin="userMinPrice" model-max="userMaxPrice" step="5" ng-model="selectedPrice" ng-change="price()"></div>

当角度范围滑块值更改并调用函数时如何触发事件。ngchange不起作用。

Answer 1

Here you go, check out below code:

 angular.module('myApp', ['ui-rangeSlider']) .controller('MyController', function($scope) { $scope.rangeSlider = { minPrice: 10, maxPrice: 100 } $scope.userMinPrice = 50; $scope.userMaxPrice = 80; $scope.$watch('userMinPrice', function(newVal, oldVal) { if (newVal !== oldVal) { $scope.message = 'userMinPrice has changed from ' + oldVal + ' to ' + newVal; // To whatever you want here. } }); $scope.$watch('userMaxPrice', function(newVal, oldVal) { if (newVal !== oldVal) { $scope.message = 'userMaxPrice has changed from ' + oldVal + ' to ' + newVal;; // To whatever you want here. } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="http://danielcrisp.github.io/angular-rangeslider/angular.rangeSlider.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> <script src="http://danielcrisp.github.io/angular-rangeslider/angular.rangeSlider.js"></script> <div ng-app="myApp" ng-controller="MyController"> <div range-slider min="rangeSlider.minPrice" max="rangeSlider.maxPrice" model-min="userMinPrice" model-max="userMaxPrice" step="5"> </div> <div> {{ message }} </div> </div> 

Answer 2

This will help you

<div 
     range-slider min="0" 
     max="100" 
     model-max="demo7.valueB"  
     pin-handle="min" 
     on-handle-up="choosePrice(demo7.valueB)">

     </div>

In controller section (js file)

$scope.demo7 = { valueA: 0, valueB: 25 };

            $scope.choosePrice=function(val)
            {
                console.log(val);
            }

Answer 3

I get the solution. use on-handle-up

<div range-slider min="minPrice" max="maxPrice" model-min="userMinPrice" model-max="userMaxPrice" step="5" ng-model="selectedPrice" filter="currency" on-handle-up="choosePrice()"></div>