Skip to content

Instantly share code, notes, and snippets.

@PauliusKrutkis
Created November 19, 2017 19:05
Show Gist options
  • Save PauliusKrutkis/6ae966f64e6f15f0c1630cf57d29d44e to your computer and use it in GitHub Desktop.
Save PauliusKrutkis/6ae966f64e6f15f0c1630cf57d29d44e to your computer and use it in GitHub Desktop.
jQuery range dropdown
var RangeDropdown = function () {
var $from, $to, $el, data;
function create($element) {
$el = $element;
data = $el.data('range-dropdown');
$from = $(data.from);
$to = $(data.to);
$from.on('click focus', init);
$to.on('click focus', init);
$from.on('change keyup', function () {
var value = $(this).val();
var id = $(this).attr('id');
changeSelected(id, value);
});
$to.on('change keyup', function () {
var value = $(this).val();
var id = $(this).attr('id');
changeSelected(id, value);
});
$('html').click(hideDropdown);
}
function changeSelected(id, value) {
var $parent = $el.find('[data-target="#' + id + '"]');
$parent.find('li').removeClass('selected');
$parent.find('[data-value="' + value + '"]')
.addClass('selected');
addInActive('#' + id, value);
}
function hideDropdown() {
$el.find('.range-dropdown-list').hide();
}
function showDropdown() {
$('.range-dropdown-list').hide();
$el.find('.range-dropdown-list').show();
}
function init(e) {
e.stopPropagation();
if ($el.attr('data-initialized')) {
showDropdown();
return;
}
var html = '<div class="range-dropdown-list">' + valuesHtml(data.from) + valuesHtml(data.to) + '</div>';
$el.append(html);
$el.attr('data-initialized', '1');
$el.find('[data-value]').click(toggleValue);
changeSelected(data.from.replace('#', ''), $(data.from).val());
changeSelected(data.to.replace('#', ''), $(data.to).val());
}
function toggleValue(e) {
e.stopPropagation();
var $parent = $(this).parent();
$parent.find('li').removeClass('selected');
if ($(this).hasClass('in-active')) {
$(this).removeClass('in-active');
deSelectValue($parent);
}
$(this).addClass('selected');
addInActive($parent.data('target'), $(this).data('value'));
changeValue($parent, $(this));
}
function deSelectValue($parent) {
var target = $parent.data('target');
if (target === data.from) {
// deselect data.to
$(data.to).val('');
changeSelected(data.to.replace('#', ''), $(data.to).val());
} else {
// deselect data.from
$(data.from).val('');
changeSelected(data.to.replace('#', ''), $(data.from).val());
}
}
function addInActive(target, value) {
if (!value) {
return;
}
if (target === data.from) {
// add inactive to data.to
var $items = $el.find('[data-target="' + data.to + '"] li');
$items.each(function () {
if ($(this).data('value') < value) {
$(this).addClass('in-active');
} else {
$(this).removeClass('in-active');
}
});
} else {
// add inactive to data.from
var $items = $el.find('[data-target="' + data.from + '"] li');
$items.each(function () {
if ($(this).data('value') > value) {
$(this).addClass('in-active');
} else {
$(this).removeClass('in-active');
}
});
}
}
function changeValue($parent, $listItem) {
var input = $($parent.data('target'));
input.val($listItem.data('value'));
}
function valuesHtml(target) {
var html = '<ul data-target="' + target + '">';
data.values.forEach(function (value) {
html += '<li data-value="' + value + '">' + value + '</li>';
});
return html += '</ul>';
}
return {
create: create
}
};
$('[data-range-dropdown]').each(function () {
var rangeDropdown = new RangeDropdown;
rangeDropdown.create($(this));
});
.range-dropdown {
position: relative;
}
.range-dropdown-list {
position: absolute;
width: 100%;
top: 35px;
border: 1px solid #000;
z-index: 10;
background-color: #fff;
}
.range-dropdown-list ul {
width: 50%;
float: left;
margin: 0;
padding: 0;
list-style-type: none;
max-height: 200px;
overflow: auto;
}
.range-dropdown-list li {
line-height: 36px;
padding: 0 10px;
border-bottom: 1px solid #000;
background-color: #fff;
}
.range-dropdown-list li:last-of-type {
border-bottom: 0;
}
.range-dropdown-list li.in-active {
opacity: 0.5;
}
.range-dropdown-list li.selected,
.range-dropdown-list li:hover {
background-color: lightgrey;
}
<div class="range-dropdown" data-range-dropdown='{
"from": "#price_from",
"to": "#price_to",
"values": <?php echo json_encode(range(1, 2000)) ?>
}'>
<input id="price_from" type="text">
<input id="price_to" type="text">
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment