JQuery UI Slider - Possible to set a list of pre-determined values to choose from?

Question

I am wondering if it's possible to achieve this using the jQuery UI Slider.

Basically I want to put a slider in place for 6 age bands:

So far the problems I can see is that the age difference in the bands isn't consistent.

The easiest way might be if I can provide 6 predetermined values and then I can modify the values displayed, e.g:

Only let the user select 16, 22, 31, 41, 51 and 60 and then I can modify what's shown to the user by adding in the second part of the age band using an if statement, i.e. if 16 is selected, display 16-21 and so on.

At the moment this is what I have:

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

Any help is much appreciated.

UPDATE

Code is now the following:

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

The only thing now is when either of the sliders is moved is to get it to snap to the nearest age range but can't think how to achieve that. I know how to set the values but it's just the initial deciding why age range is closest that's causing me problems.

ANSWER

Hi all, this is what I did to resolve my problem.

Basically I was over thinking it, thinking that I needed two slider handles for the two values of each age group when all I had to do as this (age bands have changed slightly aswell):

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

score 3 · Accepted Answer · answered Mar 22 '12 at 15:16

3

I would leave the values out of the slider if possible:

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

Set your slider up with indexes to your ranges:

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

And get the range based on the slider index:

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

answered Mar 22 '12 at 15:16

JoshNaro

2,047
2
20
40

Thanks, I finally managed to get it a different way but I think along the same lines as your answer. Basically what I did in in the `slide` function was a few if statements to test the value of `ui.value` and set a variable to the age range it fell between and then just set the html of the element to the value of that variable. – martincarlin87 Mar 23 '12 at 10:43

score 1 · Answer 2 · answered Mar 22 '12 at 15:11

I did something similar here, assuming you're okay with the user selecting an age range and not their specific age:

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

Basically, you use the slider value as an "index" to an array of possible values. So if you have 10 age groups, set your slider min to 0 and slider max to 9. Then give it a callback function to use on each slide that does a lookup for your age range based on the index. The weight limit slider is more complicated then what you need, but the readability slider is pretty much dead-on.

Markup:

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

And the 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 - Possible to set a list of pre-determined values to choose from?

2 Answers2