This range slider works on mobile browsers as well as web browsers and utilizes a simple animation to show content being added/removed. The CSS is fluid so it should work and look fine between browser sizes. I built this range slider for an older version of foodcount.com and decided to give out the code as someone might find it useful.
Create a custom range slider that lets you filter an array. Drag the scrubber left or right to change the time input. Your food items will appear or disappear if they belong or not.
Include AngularJS, NgAnimate and NgTouch
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-animate.js"></script>
<script src="http://code.angularjs.org/1.2.23/angular-touch.min.js"></script>
Add the Ranger directive and your ng-repeat list for your items. As you slide the range items will appear or disappear. You can also click on the "bits" to jump to a range. You can customize your ranges (if you add more/less then 5 you have to edit CSS and Javascript) as well as what number you start at.
<ranger options="rangeOpts" start="rangeNum"></ranger>
<div class="item-list" ng-repeat="item in items | filter:prepTimeFilter">
{{item.name}} ({{item.time}})
</div>
Copy and paste this to your controller
$scope.items=[{"name":"Apples","time":30},{"name":"Oranges","time":45},{"name":"Grapes","time":30},{"name":"Bananas","time":15},{"name":"Kiwi","time":5},{"name":"Watermelon","time":15},{"name":"Pear","time":10},{"name":"Avocado","time":45},{"name":"Mango","time":10},{"name":"Papaya","time":15},]
$scope.rangeOpts=[5,10,15,30,45];
$scope.rangeNum=45;
$scope.prepTimeFilter = function (location) {
return location.time <= $scope.rangeNum;
};
The Ranger directive will work with Mouse and Touch events. It will also scale with your browser window.
View the demo or download the source code above to view all of the code
To customize you'll need to edit css and javascript. This is more of a friendly example of some cool things you can do with AngularJs. If there is enough interest I can build a more customizable directive.
Hopefully this was a helpful AngularJS tutorial, send feedback to my twitter or on reddit.
Follow me for more @dombruno