Angularjs Price Range Slider dynamically manipulate content based on Min-Max

Question

I am new to AngularJS & I am using angular-slider for specifying a price range. I want to display the only elements specified by the range.

Here's the AngularJS Code-

var app = angular.module('myApp', ['rzModule']);
app.controller('SampleController', function($scope, $http) {
    $scope.elements = [1530,2100,2780,3323,3420,4680,5020,5300,5402];
});

app.controller('RangeController', RangeController);
function RangeController() {
    var vm = this;
    vm.changeListener = function() {
        minPrice = vm.slider.minValue;
        maxPrice = vm.slider.maxValue;
        console.log(minPrice + " " +maxPrice);
    };

    vm.slider = {
        minValue: 1500,
        maxValue: 5500,
        options: {
            floor: 1500,
            ceil: 5500,
            step: 500,
            translate: function(value) {
                return '₹' + value;
            },
            onChange:vm.changeListener
        }
    }   
}

HTML-

<body ng-app="myApp">
<div ng-controller="RangeController as vm">
    <rzslider rz-slider-model="vm.slider.minValue" rz-slider-high="vm.slider.maxValue" rz-slider-options="vm.slider.options"></rzslider>
</div>
<div ng-controller="SampleController">
    <div ng-repeat="x in elements">
        {{x}}
    </div>
</div>

I think it can be done using filters but I am not sure. Any Solutions?

Buh Buh · Accepted Answer · 2017-03-24 16:24:56Z

1

You can write a Custom AngularJS filter for this.

angular.module('myModule', [])
   .filter('inRange', function() {
        return function(array, min, max) {
            array = array.filter(function(element) {
                 return element >= min && element <= max;
            });
         };
    });
});

<div ng-repeat="x in elements | inRange:vm.slider.minValue:vm.slider.maxValue">

edited Mar 24, 2017 at 16:24

Buh Buh

7,5262 gold badges38 silver badges64 bronze badges

answered Mar 23, 2017 at 19:29

Ben

2,7261 gold badge15 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Abhishek Over a year ago

I tried but it didn't work. Probably due to controllers being different? I only defined the filter in 'myApp' instead of creating a new one.

Ben Over a year ago

Ah yes -- sorry. I just noticed elements and minValue / maxValue are in different controllers. Try moving elements into your other controller or find a way to share the data between controllers if you need to (perhaps through a service).

Abhishek Over a year ago

Thanks. I'll try angularjs service.

Collectives™ on Stack Overflow

Angularjs Price Range Slider dynamically manipulate content based on Min-Max

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related