选择选项作为进度条和价格范围

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