<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
   @charset "UTF-8";
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

* {
  margin: 0;
  padding: 0;
}

body {
  padding: 50px;
}

img {
  max-width: 150px;
  float: left;
  margin-top: -50px;
}

h1 {
  display: block;
  float: left;
  width: calc(100% - 150px);
  font: 300 36px/1.2 sans-serif;
}

h1 + p {
  display: block;
  float: left;
}

caption {
  font: 700 18px sans-serif;
}

p, label, td {
  font: 300 16px sans-serif;
}

th {
  font: 700 16px sans-serif;
  cursor: pointer;
}

label {
  display: block;
}

input {
  float: right;
  width: calc(100% - 120px);
}

.valid {
  background: olive;
}

table {
  width: 49%;
  float: left;
  border-collapse: collapse;
  border: 1px solid #ccc;
}

caption {
  border: 1px solid #ccc;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom: 0;
  padding: 10px;
}

th {
  background: whitesmoke;
  padding: 10px;
  text-align: left;
}

td {
  background: #fafafa;
  padding: 10px;
}

tr {
  border: 1px solid #ccc;
}

pre {
  width: 49%;
  float: right;
  background: whitesmoke;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 10px;
}

hr {
  margin: 10px 0;
  clear: both;
}

[data-ng-if] {
  clear: both;
  margin: 30px 0;
  float: left;
  background: #e0353d;
  padding: 20px;
  width: 100%;
}

[data-ng-if] > p {
  display: block;
  width: 100%;
  text-align: center;
}

.acc:after {
  content: " ▲";
  color: #777;
  font-size: 8px;
  position: absolute;
  margin: 3px 8px;
}

.dec:after {
  content: " ▼";
  color: #777;
  font-size: 8px;
  position: absolute;
  margin: 3px 8px;
}
  </style>
 </head>
 <body translate="no">
  <div data-ng-app="App" data-ng-controller="AppCtrl">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68939/angular-logo.png"/>
   <h1>
    Angular Range Filter
   </h1>
   <p>
    Nothing fancy :-)
   </p>
   <hr/>
   <label>
    Min:{{ ui.min | currency }}
    <input data-ng-model="ui.min" max="1000" min="0" numeric="" type="range"/>
   </label>
   <hr/>
   <label>
    Max: {{ ui.max |  currency }}
    <input data-ng-model="ui.max" max="1000" min="0" numeric="" type="range"/>
   </label>
   <div data-ng-if="ui.min&gt;ui.max">
    <p>
     Min &gt; Max makes little sense – sorry this is not about great UI/UX/BuzzBuzz ;-)
    </p>
   </div>
   <hr/>
   <table>
    <caption>
     Products within price range
    </caption>
    <thead>
     <tr>
      <th data-ng-class="{'acc':(ui.sort=='name'), 'dec':(ui.sort=='-name')}" data-ng-click="ui.sort = ui.sort=='name'?'-name':'name'" scope="col">
       Name
      </th>
      <th data-ng-class="{'acc':(ui.sort=='price'), 'dec':(ui.sort=='-price')}" data-ng-click="ui.sort = ui.sort=='price'?'-price':'price'" scope="col">
       Price
      </th>
     </tr>
    </thead>
    <tr data-ng-repeat="product in model.products | rangeFilter:'price':ui.min:ui.max | orderBy:ui.sort ">
     <td>
      {{ ::product.name }}
     </td>
     <td>
      {{ ::product.price | currency }}
     </td>
    </tr>
   </table>
   <pre>model.products = {{ model.products | json}}</pre>
  </div>
 </body>
</html>
