Giacomo Balli profile picture

Giacomo Balli

Innovation consultant specializing in mobile strategy

Let's Chat

CSS Range Double Slider


This code sample will allow you to implement a double range slider so the user can specify both minimum and maximum (not normally supported by the browser). On Cruiseable.com we use it for our price filter.


[caption id="attachment_2594" align="alignright" width="432"]cruiseable app price range slider cruiseable app price range slider[/caption]



HTML
<div class="price-slider">
<input value="0" min="0" max="100" step="0.5" type="range" oninput="updatePriceLabels()">
<input value="100" min="0" max="100" step="0.5" type="range" oninput="updatePriceLabels()">
</div>

CSS
.price-slider {
position: relative;
width: 800px;
margin: 0 auto 20px;
height: 35px;
text-align: center;
}

.price-slider input {
pointer-events: none;
position: absolute;
left: 0;
top: 15px;
width: 100%;
outline: none;
height: 18px;
margin: 0;
padding: 0;
border-radius: 8px;
}

.price-slider input::-webkit-slider-thumb {
pointer-events: all;
position: relative;
z-index: 1;
outline: 0;
-webkit-appearance: none;
height: 24px;
width: 24px;
border-radius: 12px;
background-color: white;
border: 2px solid black;
}

JavaScript
function updatePriceLabels() {
//avoids slider overlap
var sliders = document.querySelectorAll(".price-slider input");
var val1 = parseInt(sliders[0].value);
var val2 = parseInt(sliders[1].value);
if (val1 >= val2) {
sliders[0].value = val2 - 3;
return;
}
if (val2 <= val1) {
sliders[1].value = val1 + 3;
return;
}

//adds color when a range is selected
if (val1 > 0 || val2 < 99) {
sliders[0].style.background = sliders[1].style.background = "-webkit-gradient(linear, 0 0,100% 0, color-stop(0, white), color-stop(" + (val1 / 100) + ", white),color-stop(" + (val1 / 100) + ", #f0f0f0), color-stop(" + (val2 / 100) + ", #f0f0f0), color-stop(" + (val2 / 100) + ", white))";
} else {
sliders[0].style.background = sliders[1].style.background = '';
}
}

Directions:

- just add all HTML, CSS and JavaScript to your project.


Note:
This snippet focuses on iOS development. Make sure to verify/adapt any vendor prefixes.

Back to main listing.

Published: Mon, 11 Jan 2016 02:48:52 +0000