Sulin

у меня напрашивается вывод.

даже сейчас flexbox создаёт проблемы в некоторых моментах (тот же float справился бы с ситуацией расположения блоков в примере, flexbox не кроссбраузерный, хромает IE сильно и хромает тот же андроид (стандартный браузер) версий 4.0 - 4.3 который занимает процентов 25% от всего андроида chezasite.com/android/android-stat-march-2016-9207...)

почему же flexbox так пиарят если на практике его даже сейчас сложно использовать хоть как-то....

В общем плагина я так и не нашел. набросал сам код на коленке. выглядит он конечно страшновато, да и я не особо в jquery то разбираюсь, поэтому если кто-то поучаствует в его облагораживании буду благодарен.

рабочий пример можно глянуть тут (пример в живую) Ссылка временная и пример там будет находит не долго.

сам код такой (по сути всё что он делает это даёт и убирает класс active нужным элементам, делает кучу проверок в if else и делает по сути однотипные записи в переменные ну и пишет в отдельный блок выбранный диапазон)
js:

var minIndex, maxIndex, minContent, maxContent;
$('.block_range .line').click(function(){
	var globParent = $(this).parents('.modal_cont');
	var parent = $(this).parents('.block_range');

	if(!$(this).hasClass('active')){
		if(parent.find('.line.active').size() == false){
			minIndex = $(this).index();
			minContent = $(this).attr('data-content');
			globParent.find('.from').text(minContent);
		}else if(parent.find('.line.active').size() == 1){
			if($(this).index() < minIndex){
				maxIndex = minIndex;
				minIndex = $(this).index();

				maxContent = minContent;
				minContent = $(this).attr('data-content');
				globParent.find('.from').text(minContent);
				globParent.find('.to').text(maxContent);
				parent.find('.line').slice(minIndex,maxIndex).addClass('active');
			}else{
				maxIndex = $(this).index();
				maxContent = $(this).attr('data-content');
				globParent.find('.to').text(maxContent);
				parent.find('.line').slice(minIndex,maxIndex).addClass('active');
			}
		}else if(parent.find('.line.active').size() > 1){
			if($(this).index() > maxIndex){
				maxIndex = $(this).index();
				maxContent = $(this).attr('data-content');
				globParent.find('.to').text(maxContent);
				parent.find('.line').slice(minIndex,maxIndex).addClass('active');
			}else if($(this).index() < minIndex){
				minIndex = $(this).index();
				minContent = $(this).attr('data-content');
				globParent.find('.from').text(minContent);
				parent.find('.line').slice(minIndex,maxIndex).addClass('active');
			}
		}

		$(this).addClass('active');
	}else{
		if($(this).index() < maxIndex && $(this).index() > minIndex){
			var minMinus = $(this).index()-minIndex;
			var maxMinus = maxIndex-$(this).index();

			if(minMinus < maxMinus){
				parent.find('.line').slice(minIndex,$(this).index()).removeClass('active');
				minIndex = $(this).index();
				minContent = $(this).attr('data-content');
				globParent.find('.from').text(minContent);
			}else{
				parent.find('.line').slice($(this).index()+1,maxIndex+1).removeClass('active');
				maxIndex = $(this).index();
				maxContent = $(this).attr('data-content');
				globParent.find('.to').text(maxContent);
			}
		}
	}
});

пример html

<div class="block_range">
	<div class="line" data-content="50">50</div>
	<div class="line" data-content="100">100</div>
	<div class="line" data-content="150">150</div>
	<div class="line" data-content="200">200</div>
	<div class="line" data-content="250">250</div>
	<div class="line" data-content="300">300</div>
	<div class="line" data-content="более">Более</div>
</div>

я пользуюсь таким вариантом на js для выравнивания высоты блоков.

jsfiddle.net/Sulim/t91Lm5ha

в функцию нужно передать или один селектор или перечисление через запятую как обычно в jquery.
только лучше вызывать функцию в $(window).load(function(){ ... }); а то может не ровно посчитать.