Question

我在bootstrap模板中实现了一个范围滑块：

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

范围值显示在标识为rangeprimary的文本字段中。

我想让这个范围滑块作为价格范围滑块运行，其中最低和最高范围将传递到两个文本字段

我见过的大多数价格区间滑块都不适用于使用的模板。

Answer 1

离子范围滑块是一个很好的选择，只需要Jquery。非常可定制，在Bootstrap中表现出色。还有优秀的文档。

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

基本演示页面上显示了使用此插件准确实现所需内容的单个滑块示例。

<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: "£"
});

要从中获取数据，您可以再次从网站上执行Onchange Function示例。

$("#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);
});

这将更新在滑块下方生成一条消息，并在更改滑块时选择值。

Answer 2

以下是价格滑块范围的链接。

1）Price Slider Shopping Carts（访问此链接）

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

Answer 3

您可以从javascript获取该元素，然后为其提供min和max属性，从两个文本字段中获取它们：

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

如何实现价格范围滑块

3 个答案: