如何实现价格范围滑块

Question

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

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

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

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

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

原文由 Tee Famakin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Ion Range Slider 是一个很好的选择，只需要 Jquery。非常可定制，并且在 Bootstrap 中表现出色。也有优秀的文档。

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

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

然后要从中获取数据，您可以从网站上再次执行一个 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);
});

这将更新在滑块下方产生一条消息，其中包含在滑块更改时选择的值。

原文由 Andy Donegan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是价格滑块范围的链接。

1. 价格滑块购物车（访问此链接）

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） 多拇指滑块购物车前进

原文由 Aniket Jha 发布，翻译遵循 CC BY-SA 3.0 许可协议