Min-max values slider

by Vallek

HTML

<form class="filter"  action="" method="GET">
  <input type="range" name="minPrice" min="0" max="30000" step="500" value="0" oninput="this.nextElementSibling.value=this.value" />
  <input type="number" name="minPriceOut" min="0" max="30000" value="0" oninput="this.previousElementSibling.value=this.value" />
  <input type="range" name="maxPrice" min="0" max="30000" step="500" value="15000" oninput="this.nextElementSibling.value=this.value" />
  <input type="number" name="maxPriceOut" min="0" max="30000" value="15000" oninput="this.previousElementSibling.value=this.value" />
</form>

CSS

.filter {
	position: relative;
  width: 260px;
}

.filter input[type="range"] {
	width: 50%;
}

.filter input[name="maxPrice"] {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-3px);
}

JavaScript

let minInput = document.querySelector('input[name="minPrice"]');
let maxInput = document.querySelector('input[name="maxPrice"]');
var currentMinValue = minInput.value;
var currentMaxValue = maxInput.value;

minInput.addEventListener('input', setMin);
maxInput.addEventListener('input', setMax);

function setMin(item) {
	var currentMinValue = item.target.value;
	maxInput.min = currentMinValue;
}

function setMax(item) {
	var currentMaxValue = item.target.value;
	minInput.max = currentMaxValue;
}