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:

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

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

Answer 1

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