選擇選項作爲進度條和價格範圍

Question

我很有趣，我可以將選擇選項轉換爲進度條年份範圍。我想要實現的例子是avito_filters。在頂部的過濾器中點擊「Годвыпуска」，你會看到一個例子。但我很有趣，如何實現它。

<select class="filter" 
    <option value="771" selected="selected">от 1995 г.в.</option> 
    <option value="782">1970</option> 
    <option value="873">1980</option> 
    <option value="878">1985</option> 
    <option value="883">1990</option> 
    <option value="884">1991</option> 
    <option value="885">1992</option> 
    <option value="886">1993</option> 
    <option value="887">1994</option> 
    <option value="888">1995</option> 
    <option value="889">1996</option> 
    <option value="890">1997</option> 
    <option value="891">1998</option> 
    <option value="892">1999</option> 
    <option value="893">2000</option> 
    <option value="894">2001</option> 
    <option value="895">2002</option> 
    <option value="896">2003</option> 
    <option value="897">2004</option> 
    <option value="898">2005</option> 
    <option value="899">2006</option> 
    <option value="900">2007</option> 
    <option value="901">2008</option> 
    <option value="902">2009</option> 
    <option value="2844">2010</option> 
    <option value="2845">2011</option> 
    <option value="6045">2012</option> 
    <option value="8581">2013</option> 
    <option value="11017">2014</option> 
    <option value="13978">2015</option> 
    <option value="">Год выпуска</option> 
</select> 

Answer 1

更新2

jQRangeSlider看起來很酷！它似乎更強大和可定製的方式！

更新1

我已經更新了我的小提琴從<select>元素支持的值。它並不完美，只是一個證明的概念：

http://jsfiddle.net/UnsungHero97/ty8yaksm/13/

在演示中，滑塊將顯示從下拉列表裏，它會尊重這些年來的變化（即1980年後1970年，而不是1970年後的1971年，就像下降）。

我所做的只是跟蹤範圍滑塊中的索引，並將其映射到<select>中相應的<option>。這有點不好，我建議尋找更優雅的解決方案，但這是一個好的開始。

JS

$(function() { 

    var select = $('#years')[0]; 
    var options = select.options; 

    var minYear = parseInt(options[0].text); 
    var maxYear = parseInt(options[options.length - 1].text); 

    var prevMin = minYear, 
     prevMax = maxYear, 
     prevLeftIndex = 0, 
     prevRightIndex = options.length - 1; 

    $("#slider-range").slider({ 
     range: true, 
     min: 0, 
     max: options.length - 1, 
     values: [0, options.length - 1], 
     slide: function (event, ui) { 

      var left = ui.values[0], 
       right = ui.values[1], 
       newMin = minYear, 
       newMax = maxYear; 

      if (left === prevLeftIndex) { 
       newMax = options[right].text; 
       prevRightIndex = right; 
      } 
      else if (right === prevRightIndex) { 
       newMin = options[left].text; 
       prevLeftIndex = left; 
      } 

      $('#year-range').val("from: " + newMin + ", to: " + newMax); 
      $('#slider-range span').eq(0).text(newMin); 
      $('#slider-range span').eq(1).text(newMax); 
     } 
    }); 

    // initialize default values 
    $('#year-range').val("from: " + minYear + ", to: " + maxYear); 
    $('#slider-range span').eq(0).text(minYear); 
    $('#slider-range span').eq(1).text(maxYear); 

}); 

HTML

<label for="year-range"></label> 
<input id="year-range" type="text" readonly/> 
<br/> 
<select id="years" readonly> 
    <option value="782">1970</option> 
    <option value="873">1980</option> 
    <option value="878">1985</option> 
    <option value="883">1990</option> 
    <option value="884">1991</option> 
    <option value="885">1992</option> 
    <option value="886">1993</option> 
    <option value="887">1994</option> 
    <option value="888">1995</option> 
    <option value="889">1996</option> 
    <option value="890">1997</option> 
    <option value="891">1998</option> 
    <option value="892">1999</option> 
    <option value="893">2000</option> 
    <option value="894">2001</option> 
    <option value="895">2002</option> 
    <option value="896">2003</option> 
    <option value="897">2004</option> 
    <option value="898">2005</option> 
    <option value="899">2006</option> 
    <option value="900">2007</option> 
    <option value="901">2008</option> 
    <option value="902">2009</option> 
    <option value="2844">2010</option> 
    <option value="2845">2011</option> 
    <option value="6045">2012</option> 
    <option value="8581">2013</option> 
    <option value="11017">2014</option> 
    <option value="13978">2015</option> 
</select> 
<div id="slider-range"></div> 

CSS

input { 
    border: 0px; 
    font-weight: bold; 
} 
#slider-range { 
    width: 500px; 
    margin: auto; 
} 
.ui-slider .ui-slider-handle { 
    width: auto; 
    padding: 0px 4px; 
} 

---

你沒有提到任何具體的，所以直到你告訴我們，你的要求是什麼，你可以看看的jQuery UI的滑塊：

http://jqueryui.com/slider/#range

對於<option>演示，看看這個滑塊（綁定到<select>元素）：

http://jqueryui.com/slider/#hotelrooms

我把一個快速和骯髒的演示給你的，你如何使用這個滑塊的例子：

http://jsfiddle.net/UnsungHero97/ty8yaksm/4/

JS

$(function() { 

    // initialize the slider 
    $("#slider-range").slider({ 
     range: true, 
     min: 0, 
     max: 100, 
     values: [16, 64], 
     slide: function (event, ui) { 
      $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]); 
      $('#slider-range span').eq(0).text(ui.values[0]); 
      $('#slider-range span').eq(1).text(ui.values[1]); 
     } 
    }); 

    // initialize default values 
    var leftAmount = $("#slider-range").slider("values", 0); 
    var rightAmount = $("#slider-range").slider("values", 1); 
    $("#amount").val("$" + leftAmount + " - $" + rightAmount); 
    $('#slider-range span').eq(0).text(leftAmount); 
    $('#slider-range span').eq(1).text(rightAmount); 

}); 

HTML

<p> 
    <label for="amount">Range:</label> 
    <input type="text" id="amount" readonly> 
</p> 
<div id="slider-range"></div> 

CSS

.ui-slider .ui-slider-handle { 
    width: auto; 
    padding: 0px 4px; 
} 

Answer 2

在這個jQuery UI Range Selector

$(function() { 
    $("#slider-range").slider({ 
     range: true, 
     min: 0, 
     max: 500, 
     values: [ 75, 300 ], 
     slide: function(event, ui) { 
      $("#amount").val("$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ]); 
     } 
}); 

$("#amount").val("$" + $("#slider-range").slider("values", 0) + 
    " - $" + $("#slider-range").slider("values", 1)); 
}); 

看看在上面的代碼中看到.slider功能轉向一個div到一系列選擇，但你應該指定的參數。

如果你想選擇一個範圍，你應該定義range : true，否則它是一個簡單的選擇器。

使用min和max標識符，您可以定義最小值和最大值。

在values部分，您應該定義一個包含兩個元素的數組來指定默認的選定值。

最後一部分是slide獲取函數並在用戶滑動拇指時觸發該函數的方法。第一個參數是針對事件參數的，第二個參數是對它的參考。您可以使用ui.values[0]提取第一個拇指值，使用ui.values[1]提取第二個拇指值。

這些值可以從.slider方法的任何其他地方訪問，兩個參數首先是您需要的"values"，第二個是值索引。

Answer 3

您可以使用jQuery's .each()構建一個數組，然後將該數組傳遞給jQuery's .slider()。

//build the array 
var years= [] 

//add each year to the array 
$("option").each(function(index,value) { 
    years.push(value); 
}); 

//create the slider and pass the array in 
$(".selector").slider({ 
    values: years; 
});