smart-create,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.max {
background-color: hsla(300, 100%, 50%, 1);
}
.min{
background-color: hsla(210, 100%, 56%, 1);
}
.min.max{
background-color: hsla(90, 100%, 49%, 1);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var temp = {};
$("[data-for]").each(function(indx, el) {
var data = $(el).data("for"),
num = +$(el).text();
if (!temp[data]) temp[data] = {
min: el,
max: el
};
var min = temp[data].min,
max = temp[data].max;
if (+min.textContent > num) {
min.classList.remove("min");
min = temp[data].min = el
}
if (+max.textContent < num) {
max.classList.remove("max");
max = temp[data].max = el
}
min.classList.add("min");
max.classList.add("max")
})
});
</script>
</head>
<body>
<div class="container--filter">
<span class="filter">Высота подачи:</span>
<span class="number_filter" data-for="Высота подачи">10</span>
<span class="number_filter" data-for="Высота подачи">11</span>
<span class="number_filter" data-for="Высота подачи">15</span>
<span class="filter">Гарантия:</span>
<span class="number_filter" data-for="Гарантия">3</span>
<span class="filter">Мощность:</span>
<span class="number_filter" data-for="Мощность">120</span>
<span class="number_filter" data-for="Мощность">370</span>
<span class="number_filter" data-for="Мощность">90</span>
<span class="filter">Производительность:</span>
<span class="number_filter" data-for="Производительность">18</span>
<span class="number_filter" data-for="Производительность">21</span>
<span class="number_filter" data-for="Производительность">24</span>
</div>
</body>
</html>