JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.js"></script>
<div ng-app="app" ng-controller="dummy">
    <p>All items: {{items|json}}</p>
    <p>Filtered: </p>
    <div ng-repeat="item in items | myfilter: { min: slider.min, max: slider.max }">
        <p>{{item|json}}</p>
    </div>
    <p>Filters: {{slider|json}}</p>
</div>

CSS

li a{
  background-color: red !important;
  border: 1px solid red !important;
}

li a:before{
border-left-color: red !important;
}

.green {
    background-color: green !important;
}

JavaScript

var app = angular.module("app", []);
app.controller('dummy', function($scope, $sce) {
    $scope.slider = {min: 185, max: 500};
    $scope.items = [{name: 'hello', cost: 100}, {name: 'world', cost: 200}]
});
app.filter('myfilter', function() {
   return function( items, condition) {
    var filtered = [];

    if(condition === undefined || condition === ''){
      return items;
    }

    angular.forEach(items, function(item) {          
       if(item.cost >= condition.min && item.cost <= condition.max){
         filtered.push(item);
       }
    });

    return filtered;
  };
});