如何實現一個價格區間滑塊

-2

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

範圍值顯示在文本字段ID爲rangeprimary。

我想使這個範圍內滑塊工作作爲一個價格區間滑塊，其中最低和最高的範圍將被傳遞到兩個文本字段

大部分的價格範圍滑塊我已經看到了效果不好的與正在使用的模板。

來源

2017-04-14 Tee Famakin

所以你想通過輸入 – 2017-04-14 10:42:26

可變更滑塊的最大和最小值不，我想我的範圍字段之一兩個滑塊顯示最小值，另一個顯示最大值數字 –

離子範圍欄是一個很好的選擇，只需要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); 
});

這將更新在滑塊下面產生一個消息，其中更改滑塊時選擇的值。

來源

2017-04-14 14:01:34

感謝，BT真的很NT在JavaScript的GUD都工作，我只是coppy和使用，ü可以做的textfiels用於分鐘的完整示例並請最大 –

@Tee Famakin我添加了一個文本塊來顯示從滑塊返回的值。我真的建議你檢查一下範圍滑塊的鏈接，這裏有一個完整的工作演示，其中包含你需要的優秀文檔。 –

你可以從JavaScript元素，然後給它的屬性的最小值和最大值，讓他們從兩個文本框：

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

來源

2017-04-14 10:35:19

nt好的wif javascript可以üSHW的implemnetation以便有WUD是對範圍內的兩個滑塊，它們的最小和最大 –

這裏是一個價格滑塊範圍的鏈接。

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; 
    }

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

來源

2018-01-27 16:18:44

如何實現一個價格區間滑塊

回答

相關問題