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

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

我已经更新了我的 fiddle 以支持来自 <select> 的值元素。它并不完美，只是一个概念验证:

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

在演示中， slider 将显示下拉列表中的年份，并且会尊重年份的变化(即 1980 年跟随 1970 年，而不是 1971 年跟随 1970 年，就像在下拉列表中一样)。

我所做的就是跟踪范围 slider 中的索引，并将其映射到相应的 <option>在<select> .这有点老套，我建议研究更优雅的解决方案，但这是一个好的开始。

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 的 slider :

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

对于 <option>演示，看看这个 slider (绑定(bind)到 <select> 元素):

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

我整理了一个快速演示，向您展示了如何使用此 slider 的示例:

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