更新2

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>

enter image description here

Answer 1

看看这个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方法获取函数并在用户滑动拇指时触发此函数。第一个参数是事件args，第二个参数是对它的引用。您可以使用ui.values[0]提取第一个拇指值，使用ui.values[1]提取第二个拇指。

可以使用.slider方法从任何其他位置访问这些值，首先需要两个参数"values"，第二个是值索引。

Answer 2

更新2

jQRangeSlider看起来很酷！它似乎更强大和可定制！

更新1

我已经更新了我的小提琴，以支持<select>元素的值。它并不完美，只是一个概念验证：

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

new slider

在演示中，滑块将显示下拉列表中的年份，并且它将尊重多年来的变化（即1970年之后的1980年，而不是1970年之后的1971年，如下拉列表中那样）。

我正在做的就是跟踪范围滑块中的索引，并将其映射到<option>中的相应<select>。这有点像hacky，我建议寻找一个更优雅的解决方案，但这是一个良好的开端。

<强> 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/

slider preview

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

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

3 个答案:

更新2

更新1