JQuery UI滑块-是否可以设置要从中选择的预定义值列表？

我想知道是否可以使用jQueryUI滑块来实现这一点

基本上，我想为6个年龄段设置一个滑块：

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>

现在唯一的一件事是当任何一个滑块被移动时，让它捕捉到最近的年龄范围，但不知道如何实现这一点。我知道如何设置这些值，但这只是最初决定为什么年龄范围最接近的问题

回答

大家好，这就是我为解决我的问题所做的

基本上我想得太多了，认为我需要为每个年龄组的两个值设置两个滑块手柄，而我所要做的就是这样（年龄段也发生了轻微的变化）：

$（'#年龄'）。滑块({
民:16,，
最高：50，
步骤：1，
动画：对，
价值：16，
幻灯片：功能（事件、用户界面）
{
如果（（ui.value>=16）&&（ui.value=25）&&（ui.value=30）&&（ui.value=40）&&（ui.value我在这里做了类似的事情，假设您同意用户选择一个年龄范围，而不是他们的具体年龄：


基本上，使用滑块值作为“索引”因此，如果您有10个年龄组，请将滑块最小值设置为0，滑块最大值设置为9。然后在每张幻灯片上使用一个回调函数，根据索引查找您的年龄范围。权重限制滑块比您需要的更复杂，但可读性滑块几乎是死板的

标记：

   <li class="slider-label"><label>2. Readability Limit:</label> <span id="readability-limit-result">.1mg</span>

       <input id="readability-limit" class="slider-input" name="ReadabilityLimit" type="hidden" value=".1mg" data-values='[".0001mg", ".0002mg", ".0005mg", ".001mg", ".002mg", ".005mg", ".01mg", ".02mg", ".05mg", ".1mg", ".2mg", ".5mg", "1mg", "2mg", "5mg", "10mg", "20mg", "50mg", "100mg"]' /></li>

   <li><div id="readability-limit-slider"></div></li>

如果可能，我会将这些值保留在滑块之外：

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

使用索引将滑块设置到您的范围：

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

并根据滑块索引获取范围：

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

谢谢，我最终设法以不同的方式得到了它，但我的想法与你的答案是一样的。基本上，我在
slide
函数中所做的是使用一些if语句来测试
ui.value的值，并将一个变量设置为它所处的年龄范围，然后将元素的html设置为该变量的值E
var ranges = ["16-21","22-30","31-40","41-50","51-60","60+"];

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

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