Question

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

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

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

最简单的方法可能是我可以提供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);
        }
    });
});

MARKUP

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

现在唯一的事情就是移动任何一个滑块是为了使它能够捕捉到最接近的年龄范围，但却无法想到如何实现这一目标。我知道如何设置值，但这只是最初决定为什么年龄范围最接近导致我出现问题。

ANSWER

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

基本上我一直在思考它，认为我需要两个滑块手柄来处理每个年龄组的两个值，因为我必须这样做（年龄段也有轻微改变）：

$('#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

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

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')];

Answer 2

我在这里做了类似的事情，假设您对用户选择年龄范围而不是他们的特定年龄感到满意：

http://www.dataweigh.com/cubis/

基本上，您使用滑块值作为可能值数组的“索引”。因此，如果您有10个年龄组，请将滑块min设置为0，将slider max设置为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>

和JS：

if ($("#readability-limit-slider").length) {
    var $readabilityLimit = $("#readability-limit");
    var $readabilityLimitResult = $("#readability-limit-result");
    var readabilityLimitData = $readabilityLimit.data();
    var readabilityLimitInitialValue = Math.round((readabilityLimitData.values.length - 2) / 2); // subtracting 2 makes it effectively round down

    $("#readability-limit-slider").slider({
        value: readabilityLimitInitialValue,
        min: 0,
        max: readabilityLimitData.values.length - 1,
        step: 1,
        slide: function (event, ui) {
            var newValue = readabilityLimitData.values[ui.value];
            $readabilityLimit.val(newValue);
            $readabilityLimitResult.text(newValue);
        }
    });

    $readabilityLimit.val(readabilityLimitData.values[readabilityLimitInitialValue]);
    $readabilityLimitResult.text(readabilityLimitData.values[readabilityLimitInitialValue]);
}

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

2 个答案: