JQuery Mobile slider string instead of number

Question

I´ve implemented a jQuery Mobile Slider in my app. This is the code

<input type="range" name="slider-1" id="slider-1" min="1" max="5" value="1">
<div id="hint"></div>

JS

var text = {1 : "bad", 2 : "okay", 3 : "better"};
var $sliderText = $('#hint');
var refresh = function(e){
    $sliderText.text(text[$( '#slider-1' ).slider('value')]);
};

$( '#slider-1' ).slider({
      slide: refresh,
      change: refresh
});

This slider comes with a input field where the current Value of the slider is shown, e.g 1,2,3,4,5. I want to have strings instead of number like: 1 = bad, 2 = okay, 3 = better... I tried it with the onChange event but it doesn´t work.

I hope someone here can help?

Answer 1

I solved this with the following code:

<input type="range" name="slider-1" id="slider-1" min="1" max="5" value="1">
<div id="hint"></div>

JS:

// Slider Handling
                $( "#slider-1" ).on( 'change', function( event ) {
                       var val = $("#slider-1").val();
                       if(val == 1){
                            $("#hint").empty();
                            $("#hint").append("beschissen");
                       }else if(val == 2){
                            $("#hint").empty();
                            $("#hint").append("naja");
                       }else if(val == 3){
                            $("#hint").empty();
                            $("#hint").append("passt");
                       }else if(val == 4){
                            $("#hint").empty();
                            $("#hint").append("fett");
                       }else if(val == 5){
                            $("#hint").empty();
                            $("#hint").append("geilo");
                       }

                    });