Menu Close

Price Range Slider with Min-Max Input using HTML, CSS and JavaScript

Roja Bharathi
range-slider

In this article, we are going to implement Price Range Slider using HTML, CSS, & JavaScript. Here, The user can move the meter on a price range slider to choose the suitable price range. To choose the right price range, the user can use a slider or input the minimum and maximum price values. Here,We will be using HTML for structure, CSS for designing purposes and JavaScript will be used to provide the required functionality.

Example: This example describes the basic implementation of the Price Range Slider with Min-Max Input using HTML, CSS, and JavaScript.

HTML:

<title>Custom Price Range Slider</title>
    
    <div class="main"> 
        <div class="cnd"> 
            <p>codeamend</p> 
        </div> 
        <div class="custom-wrapper"> 
  
            <div class="header"> 
                <h2 class="projtitle"> 
                      Price Range Slider 
                  </h2> 
            </div> 
  
            <div class="price-input-container"> 
                <div class="price-input"> 
                    <div class="price-field"> 
                        <span>Minimum Price</span> 
                         
                    </div> 
                    <div class="price-field"> 
                        <span>Maximum Price</span> 
                         
                    </div> 
                </div> 
                <div class="slider-container"> 
                    <div class="price-slider"> 
                    </div> 
                </div> 
            </div> 
  
            <!-- Slider -->
            <div class="range-input">                 
            </div> 
        </div> 
    </div>

css:

* { 
    margin: 0; 
    padding: 0; 
} 
  
body { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    min-height: 100vh; 
    background: #ffffff; 
    flex-direction: column; 
} 
  
.main { 
    background-color: #fff; 
    border-radius: 15px; 
    box-shadow: 0 0 20px
        rgba(0, 0, 0, 0.2); 
    padding: 20px; 
    transition: transform 0.2s; 
    width: 600px; 
} 
  
.main:hover { 
    transform: scale(1.05); 
} 
  
.cnd { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 24px; 
    font-weight: 600; 
    color: #3314be; 
} 
  
.custom-wrapper { 
    margin: 0; 
    width: 70%; 
    padding: 0px 25px 40px; 
    position: relative; 
    left: 63px; 
} 
  
.header h2 { 
    font-size: 30px; 
    color: #600dce; 
    display: flex; 
    justify-content: center; 
    padding: 20px; 
} 
  
/* Styles for the price input container */
.price-input-container { 
    width: 100%; 
} 
  
.price-input .price-field { 
    display: flex; 
    margin-bottom: 22px; 
} 
  
.price-field span { 
    margin-right: 10px; 
    margin-top: 6px; 
    font-size: 17px; 
} 
  
.price-field input { 
    flex: 1; 
    height: 35px; 
    font-size: 15px; 
    font-family: "DM Sans", sans-serif; 
    border-radius: 9px; 
    text-align: center; 
    border: 0px; 
    background: #e4e4e4; 
} 
  
.price-input { 
    width: 100%; 
    font-size: 19px; 
    color: #555; 
} 
  
/* Remove Arrows/Spinners */
input::-webkit-outer-spin-button, 
input::-webkit-inner-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
} 
  
.slider-container { 
    width: 100%; 
} 
  
.slider-container { 
    height: 6px; 
    position: relative; 
    background: #e4e4e4; 
    border-radius: 5px; 
} 
  
.slider-container .price-slider { 
    height: 100%; 
    left: 25%; 
    right: 15%; 
    position: absolute; 
    border-radius: 5px; 
    background: #ee0ab5; 
} 
  
.range-input { 
    position: relative; 
} 
  
.range-input input { 
    position: absolute; 
    width: 100%; 
    height: 5px; 
    background: none; 
    top: -5px; 
    pointer-events: none; 
    cursor: pointer; 
    -webkit-appearance: none; 
} 
  
/* Styles for the range thumb in WebKit browsers */
input[type="range"]::-webkit-slider-thumb { 
    height: 18px; 
    width: 18px; 
    border-radius: 70%; 
    background: #555; 
    pointer-events: auto; 
    -webkit-appearance: none; 
} 
  
@media screen and (max-width: 768px) { 
    .main { 
        width: 80%; 
        margin-right: 5px; 
    } 
  
    .custom-wrapper { 
        width: 100%; 
        left: 0; 
        padding: 0 10px; 
    } 
  
    .projtitle { 
        width: 100%; 
        position: relative; 
        right: 26px; 
    } 
  
    .price-input { 
        flex-direction: column; 
        align-items: center; 
    } 
  
    .price-field { 
        margin-bottom: 10px; 
    } 
}

JavaScript:

//  Script.js 
const rangevalue =  
    document.querySelector(".slider-container .price-slider"); 
const rangeInputvalue =  
    document.querySelectorAll(".range-input input"); 
  
// Set the price gap 
let priceGap = 500; 
  
// Adding event listners to price input elements 
const priceInputvalue =  
    document.querySelectorAll(".price-input input"); 
for (let i = 0; i  { 
  
        // Parse min and max values of the range input 
        let minp = parseInt(priceInputvalue[0].value); 
        let maxp = parseInt(priceInputvalue[1].value); 
        let diff = maxp - minp 
  
        if (minp  10000) { 
            alert("maximum price cannot be greater than 10000"); 
            priceInputvalue[1].value = 10000; 
            maxp = 10000; 
        } 
  
        if (minp &gt; maxp - priceGap) { 
            priceInputvalue[0].value = maxp - priceGap; 
            minp = maxp - priceGap; 
  
            if (minp = priceGap &amp;&amp; maxp &lt;= rangeInputvalue[1].max) { 
            if (e.target.className === &quot;min-input&quot;) { 
                rangeInputvalue[0].value = minp; 
                let value1 = rangeInputvalue[0].max; 
                rangevalue.style.left = `${(minp / value1) * 100}%`; 
            } 
            else { 
                rangeInputvalue[1].value = maxp; 
                let value2 = rangeInputvalue[1].max; 
                rangevalue.style.right =  
                    `${100 - (maxp / value2) * 100}%`; 
            } 
        } 
    }); 
  
    // Add event listeners to range input elements 
    for (let i = 0; i  { 
            let minVal =  
                parseInt(rangeInputvalue[0].value); 
            let maxVal =  
                parseInt(rangeInputvalue[1].value); 
  
            let diff = maxVal - minVal 
              
            // Check if the price gap is exceeded 
            if (diff &lt; priceGap) { 
              
                // Check if the input is the min range input 
                if (e.target.className === &quot;min-range&quot;) { 
                    rangeInputvalue[0].value = maxVal - priceGap; 
                } 
                else { 
                    rangeInputvalue[1].value = minVal + priceGap; 
                } 
            } 
            else { 
              
                // Update price inputs and range progress 
                priceInputvalue[0].value = minVal; 
                priceInputvalue[1].value = maxVal; 
                rangevalue.style.left = 
                    `${(minVal / rangeInputvalue[0].max) * 100}%`; 
                rangevalue.style.right = 
                    `${100 - (maxVal / rangeInputvalue[1].max) * 100}%`; 
            } 
        }); 
    } 
}

OUTPUT:

Custom-Price-Range-Slider-GFG
Popular Posts
Total Views: 110
Posted in CSS, HTML, JavaScript
Tagged , , , , , , , ,

You can also read...