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>

how to fire an event when angular range slider value change and call a function.ngchange is not working.

If you are using this one https://github.com/danielcrisp/angular-rangeslider and looking at the docs I don't think 'range-slider' supports `ng-model` or `ng-change` — Gaurav, Feb 25 '17 at 10:29
You can add watches and if you want I can provide a demo code. — Gaurav, Feb 25 '17 at 10:32

score 1 · Answer 1 · answered Feb 25 '17 at 10:39

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>

score 1 · Answer 2 · answered Jun 06 '18 at 05:59

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);
            }

score 0 · Answer 3 · edited Feb 25 '17 at 12:17

0

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>

edited Feb 25 '17 at 12:17

Joe C

15,324
8
38
50

answered Feb 25 '17 at 10:42

karthika v nair

41
1
5

Yep, that could also serve the purpose. – Gaurav Feb 25 '17 at 10:45

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

3 Answers3