I'm currently working on implementing an AngularJS slider bar that I found through a Google search. I've been able to filter it based on my slider selection, but I'm struggling to display the minimum and maximum range values at the beginning and end of the slider bar (either on top or at the starting/ending points).
Here's an example:
https://i.sstatic.net/XAmkT.png
If I use something like:
<slider floor="0" ceiling="50" ng-model-low="lower_price_bound" ng-model-high="upper_price_bound"></slider>However, if I try something like:
<slider floor="0" ceiling="50" ng-model-low="lower_price_bound" ng-model-high="upper_price_bound" ng-model="itemrange.maxvalue"></slider>ng-model="itemrange.maxvalue".
A demo link is available at Fiddle.
Here's the HTML code snippet:
<body ng-controller='PriceCtrl'>
<slider floor="0" ceiling="50" ng-model-low="lower_price_bound" ng-model-high="upper_price_bound" ng-model="itemrange.maxvalue"></slider>
lower_price_bound: <strong>{{lower_price_bound}}</strong>
upper_price_bound: <strong>{{upper_price_bound}}</strong>
<hr>
<table border="1">
<thead>
<th>Name</th>
<th>Min Price</th>
<th>Max Price</th>
</thead>
<tbody>
<tr ng-repeat='item in items | filter:priceRange'>
<td>{{item.name}}</td>
<td>{{item['min-acceptable-price']}}</td>
<td>{{item['max-acceptable-price']}}</td>
</tr>
</tbody>
</table>
</body>
And here's the associated JavaScript code (app.js):
var app = angular.module('prices', ['uiSlider']);
app.controller('PriceCtrl', function ($scope){
$scope.itemrange = {
maxvalue: 50
};
$scope.items = [{name: "item 1", "min-acceptable-price": "10",
"max-acceptable-price": "50"},
{name: "item 2", "min-acceptable-price": "5",
"max-acceptable-price": "40"},
{name: "item 3", "min-acceptable-price": "15",
"max-acceptable-price": "30"}];
$scope.lower_price_bound = 0;
$scope.upper_price_bound = 50;
$scope.priceRange = function(item) {
return (parseInt(item['min-acceptable-price']) >= $scope.lower_price_bound && parseInt(item['max-acceptable-price']) <= $scope.upper_price_bound);
};
});
I'd appreciate any insights on what I might be doing wrong. Thank you in advance.