Jquery UI Slider - Assigning a name to values

Question

I need to assign names to the values of a Jquery UI slider – is this possible?

Here's the code so far:

<script type="text/javascript">
    $(function() {
        $("#slider_style").slider({
            value:2,
            min: 1,
            max: 3,
            step: 1,
            slide: function(event, ui) {
                $("#style_type").val( ui.value );
            }
        });
        $("#style_type").val( $("#slider_style").slider("value") ); 
    });
</script>

Basically I want to make 1 appear in the #slider_style div as the word PLAY, 2 as the word HEAL and 3 as RELAX – can anyone point out how this is achievable?

Answer 1

You can just use a lookup object to get the values:

var lookup = {
    1: 'PLAY',
    2: 'HEAL',
    3: 'RELAX'
}

And then in your slide function set the value from that object:

...
slide: function(event, ui) {
    $('#style_type').val(lookup[ui.value]);
}

That will make the #style_type get PLAY, HEAL or RELAX as value depending on the slider. Is this what you meant?