JavaScript Price Range Slider Example

JavaScript price range slider example is created by using custom JavaScript, HTML, and CSS. We can also use it as a bootstrap range slider. Because here we have used a little bit of JavaScript. Make a dynamic range slider with JavaScript. Implement the JavaScript range slider in your project to filter the product prices, quantities, or any type of service.

HTML

<h2>JavaScript Price Range Slider</h2>
<div class="box">
    <div class="rangeSlider">
        <input type="range" class="circleRange" min="0" max="100" value="100">
    </div>
	<div class="value"></div>
</div>

CSS

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: arial;
}
h2 {
    text-align: center;
    margin: 50px 0px 20px;
    font-weight: normal;
    font-size: 30px;
}
.box {
    background-color: #fff;
    border-radius: 4px;
    padding: 30px;
}
.box .value {
    font-size: 38px;
    color: #e91e63;
    text-align: center;
    margin: 15px 0px;
}
.box .rangeSlider {
    width: 100%;
    height: 90px;
    border-radius: 10px;
    padding: 30px 20px;
    margin: 0px auto;
    box-shadow: 0px 0px 10px #c1c1c1;
}
.box .rangeSlider .circleRange{
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #F44336;
    outline: none;
    height: 3px;
}

.box .rangeSlider .circleRange::-webkit-slider-thumb{
    -webkit-appearance: none;
    background: #e91e63;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
.box .rangeSlider .circleRange::-moz-slider-thumb{
    -moz-appearance: none;
    background: #e91e63;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

JavaScript

const rangeSlider = document.querySelector("input");
const value = document.querySelector(".value");
value.textContent = rangeSlider.value;

rangeSlider.oninput = function(){
	value.textContent = this.value;
}