how to implement a price range slider

Question

I am implementing a range slider within the bootstrap template:

<input type="range" name="range" step="50000" min="100000" max="1000000" value="" onchange="rangePrimary.value=value">
<input type="text" id="rangePrimary" />

The range value is displayed in the text-field with id rangeprimary.

I want to make this range slider work as a price range slider, where the lowest and highest ranges would be passed into two text-fields

Most of the price range sliders I have seen don't work well with the template am using.

so you want the max and min values of a slider to be changable by a input — , Apr 14 '17 at 10:42
no, i want two sliders on my my range field one displaying the min and the other displaying max figures — Tee Famakin, Apr 14 '17 at 10:44

Andy Donegan · Accepted Answer · 2017-04-14T15:16:35.750

Ion Range Slider is an excellent option, requiring only Jquery. Very customizable and works excellently in Bootstrap. Also has excellent documentation.

http://ionden.com/a/plugins/ion.rangeSlider/en.html

An example of a single slider implementing exactly what you require using this plugin is shown on the Basic Demo Page.

<input type="text" id="rangePrimary" name="rangePrimary" value="" />
<p id="priceRangeSelected"></P>

$("#rangePrimary").ionRangeSlider({
    type: "double",
    grid: true,
    min: 0,
    max: 1000,
    from: 200,
    to: 800,
    prefix: "£"
});

To then get the data from it you can do an Onchange Function example again from the web site.

$("#rangePrimary").on("change", function () {
    var $this = $(this),
        value = $this.prop("value").split(";");
        var minPrice = value[0];
        var maxPrice = value[1];
        $("#priceRangeSelected").text("Lower Price Range = £" + minPrice + " , Upper Price Range = £" + maxPrice);
});

This will update produce a message below the slider with the value selected on change of the sliders.

thanks, bt am really nt gud at javascript, i just coppy and use, can u do a full example with the textfiels for min and max please — Tee Famakin, Apr 14 '17 at 15:08
@Tee Famakin I have added a text block to show the values returned from the slider. I really do recommend that you check out the link for the range slider there is a full working demo of exactly what you are requiring with excellent documentation. — Andy Donegan, Apr 14 '17 at 15:17

Aniket Jha · Answer 2 · 2018-02-01T19:12:54.573

Here is a link to a price slider range.

1)Price Slider Shopping Carts(Visit this link)

HTML

   <div id="rangeBox">    
         <div id="sliderBox">
             <input type="range" id="slider0to50" step="5" min="0" max="50">
             <input type="range" id="slider51to100" step="5" min="50" max="100">
         </div>
         <div id="inputRange">
             <input type="number" step="5" min="0" max="50" placeholder="Min" id="min" >
             <input type="number" step="5" min="51" max="100" placeholder="Max" id="max">
         </div>
    </div>

CSS

#rangeBox{ /* carry complete  range box*/
    width:300px;
    height:100px;

    }
    #sliderBox{
    position:relative;
    top:0%;
    width:300px;  /*2x width*/
    }
    #slider0to50{
    width:150px;/*1x width*/
    position:absolute;
    left:0%;
    }
    #slider51to100{
    width:150px;/*1x width*/
    position:absolute;
    left:50%;
    }
    #inputRange{
    position:relative;
    top:50%;
    }
    #inputRange::after{
    content:"";
    clear:both;
    display:block
    }
    #inputRange #min{
     width:40%;
    float:left;
     }   
    #inputRange #max{
     width:40%;
    float:right;
    }

JS

var sliderLeft=document.getElementById("slider0to50");
 var sliderRight=document.getElementById("slider51to100");
 var inputMin=document.getElementById("min");
 var inputMax=document.getElementById("max");

///value updation from input to slider
//function input update to slider
function sliderLeftInput(){//input udate slider left
    sliderLeft.value=inputMin.value;
}
function sliderRightInput(){//input update slider right
    sliderRight.value=(inputMax.value);//chnage in input max updated in slider right
}

//calling function on change of inputs to update in slider
inputMin.addEventListener("change",sliderLeftInput);
inputMax.addEventListener("change",sliderRightInput);


///value updation from slider to input
//functions to update from slider to inputs 
function inputMinSliderLeft(){//slider update inputs
    inputMin.value=sliderLeft.value;
}
function inputMaxSliderRight(){//slider update inputs
    inputMax.value=sliderRight.value;
}
sliderLeft.addEventListener("change",inputMinSliderLeft);
sliderRight.addEventListener("change",inputMaxSliderRight);

2)Multiple Thumb Slider Shopping Carts Advance

score 0 · Answer 3 · answered Apr 14 '17 at 10:35

0

You can get the element from javascript and then give it the properties min and max getting them from the two textfields:

var x = document.getElementById('rangePrimary');
x.min = the value you get from the first textfield
x.max = the value you

answered Apr 14 '17 at 10:35

Giovanni Filannino

25
4

am nt that good wif javascript can u shw an implemnetation so that there wud be two sliders on the range and they both work for min and max – Tee Famakin Apr 14 '17 at 10:36

how to implement a price range slider

3 Answers3

Linked