如何实现价格范围滑块

Question

我正在引导模板中实现一个范围滑块：

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

范围值显示在 id rangeprimary 的文本字段中。

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

我看到的大多数价格范围滑块都不能很好地与正在使用的模板配合使用。

Answer 1

Ion Range Slider 是一个很好的选择，只需要 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 函数示例。

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