CODEWITHSUNDEEP
angularjsangularjs-filterangularjs-slider
Abhishek
Abhishek

Reputation: 95

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

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?

Upvotes: 0

Views: 929

Answers (1)

Ben
Ben

Reputation: 2706

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">

Upvotes: 1

Related Questions