Make jQuery UI Slider values work as links

Question

How can I make the jQuery slider values work as links. Like if someone scrolles to for example 1920, it redirects them to another page.

I have inserted the code in a fiddle: http://jsfiddle.net/up6Bx/

Hope you can help me.

Thanks in advance.

HTML:

<div id="slider-range-max"></div>

jquery:

$(function() {
    var araObj = new Array( 1900, 1920, 1960, 1975, 1976 );

    $("#slider-range-max").slider({
            min: 0,
            max: araObj.length,
            value: 0,
            create: function() {

                for (i=0;i<=araObj.length;i++)
                {
                    $(this).append($('<span></span>').css("left",((i+0.85)*(100/araObj.length))+"%").addClass("slider-digit").text(araObj[i]));
                };
            }
        });

    console.log(araObj);
});

Answer 1

Try this

$(function() {
    var araObj = new Array( 1900, 1920, 1960, 1975, 1976 );

    $("#slider-range-max").slider({
            min: 0,
            max: araObj.length,
            value: 0,
            create: function() {

                for (i=0;i<=araObj.length;i++)
                {
                    $(this).append($('<span></span>').css("left",((i+0.85)*(100/araObj.length))+"%").addClass("slider-digit").text(araObj[i]));
                };
            },
        change: function(event, ui) { 
             var val=ui.value;
         if(val == 1)
         {
         window.location.href='http://www.amazon.com';    //same tab
         }
         else if(val == 2)
         {
         window.open('http://www.yahoo.com');//new tab
         }   
          } 
        });

    console.log(araObj);
});

DEMO