JQuery UI Slider - 可以设置一个预先确定的值列表以供选择吗？

Question

我想知道是否可以使用 jQuery UI Slider 来实现这一点。

基本上我想为 6 个年龄段放置一个 slider :

16-21
22-30
31-40
41-50
51-60
60+

到目前为止，我看到的问题是乐队的年龄差异不一致。

最简单的方法可能是我可以提供 6 个预定值，然后我可以修改显示的值，例如:

仅让用户选择 16、22、31、41、51 和 60，然后我可以通过使用 if 语句添加年龄范围的第二部分来修改向用户显示的内容，即如果选择16，则显示16-21，依此类推。

目前这就是我所拥有的:

$(document).ready(function() {
    $('#age').slider({
        min: 16,
        max: 60,
        step: 1,
        animate: true,
        value: 16,
        slide:function(event,ui)
        {
          // value shown to the user
          $('#age-value').html(ui.value);

          // hidden form input where value is stored
          $('#customer-age').val(ui.value);
        }
    });
});

标记

<tr>
    <td>
        <label class="wide" for="age">What age group do you come under?</label>
    </td>
    <td>
        <div id="age"></div>
    </td>
</tr>
<tr>
    <td>
        &nbsp;
    </td>
    <td>
        <div id="age-value">16-21</div>
    </td>
</tr>

非常感谢任何帮助。

更新

代码现在如下:

$('#age').slider({
    range: true,
    min: 16,
    max: 60,
    step: 1,
    animate: true,
    values: [16, 21],
    slide:function(event,ui)
    {
      $('#age-value').html(ui.value);
      $('#customer-age').val(ui.value);

      $("#age-value").html('Age Group: ' + ui.values[0] + ' - ' + ui.values[1]);

    }
});
$("#age-value").html('Age Group: ' + $("#age").slider("values", 0) + ' - ' + $("#age").slider("values", 1));

现在唯一的事情是当两个 slider 移动时，让它捕捉到最接近的年龄范围，但不知道如何实现这一点。我知道如何设置这些值，但这只是最初决定年龄范围最接近的原因，这给我带来了问题。

回答

大家好，这就是我解决问题的方法。

基本上我想得太多了，认为我需要两个 slider handle 来表示每个年龄组的两个值，而我所要做的就是这样(年龄组也略有变化):

$('#age').slider({
    min: 16,
    max: 50,
    step: 1,
    animate: true,
    value: 16,
    slide:function(event,ui)
    {
        if((ui.value>=16) && (ui.value<= 24))
        {
            agerange = '16 - 24';
        }
        else if((ui.value>=25)&& (ui.value<= 29))
        {
            agerange = '25 - 29';
        }
        else if((ui.value>=30) && (ui.value<=39))
        {
            agerange = '30 - 39';
        }
        else if((ui.value>=40) && (ui.value<= 49))
        {
            agerange = '40 - 49';
        }
        else if(ui.value==50)
        {
            agerange = '50 +';
        }
        $('#age-value').html(agerange);
        $('#customer-age').val(agerange);
    }
});

Answer 1

如果可能的话，我会将这些值保留在 slider 之外:

var ranges = ["16-21","22-30","31-40","41-50","51-60","60+"];

使用范围索引设置 slider :

{    
min: 0,
max: ranges.length-1,
step: 1,
animate: true,
}

并根据 slider 索引获取范围:

var range = ranges[$('slider').slider('value')];