By Vishal Basumatary in javascript — Mar 24, 2023

price range slider bootstrap 4

Price Range Slider Bootstrap 4

If you are looking for a price range slider in Bootstrap 4, there are different ways to implement it. One of the most common solutions is to use the noUiSlider plugin, which is a lightweight and flexible range slider.

Step 1: Download and Include noUiSlider Files

You can download the noUiSlider files from their website or from their GitHub repository. Once you have the files, include the CSS and JavaScript files in your HTML code:

<head>
    <link rel="stylesheet" href="path/to/nouislider.min.css">
    <script src="path/to/nouislider.min.js"></script>
</head>

Step 2: Create HTML Markup

Create a div element with an id to contain the slider. You can also add labels for the minimum and maximum values:

<div id="price-slider"></div>
<p>Price Range: <span id="slider-value"></span></p>
<p>Min: <span id="slider-min"></span>, Max: <span id="slider-max"></span></p>

Step 3: Initialize noUiSlider

In your JavaScript code, initialize the noUiSlider with the desired options. For example, you can set the range of values, the initial values, the step size, the orientation, and the format of the labels:

var slider = document.getElementById('price-slider');
var valueMin = document.getElementById('slider-min');
var valueMax = document.getElementById('slider-max');
var valueSpan = document.getElementById('slider-value');

noUiSlider.create(slider, {
    start: [100, 500],
    connect: true,
    step: 10,
    range: {
        'min': 0,
        'max': 1000
    },
    orientation: 'horizontal',
    format: wNumb({
        decimals: 0,
        thousand: ','
    })
});

slider.noUiSlider.on('update', function (values, handle) {
    var value = values[handle];
    if (handle) {
        valueMax.innerHTML = value;
    } else {
        valueMin.innerHTML = value;
    }
    valueSpan.innerHTML = slider.noUiSlider.get();
});

Step 4: Style the Slider

You can customize the appearance of the slider by adding CSS rules. For example, you can change the color of the handles and the track, add a border, or change the font size of the labels.

#price-slider {
    height: 10px;
    margin: 30px 0;
    background-color: #ddd;
}

.noUi-connect {
    background-color: #007bff;
    border-radius: 5px;
}

.noUi-handle {
    width: 20px;
    height: 20px;
    border: 2px solid #007bff;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

That's it! You now have a price range slider in your Bootstrap 4 website or web application.