Customizing HTML Sliders

Say you want a slider that selects discrete values and and for each value you want to update a text element with some custom text based on the number selected:

<input type="range" value="1" min="1" max="3" step="1"  
    onchange="sliderDidChange(this.value)" />
<span id="sliderText"></span>  

You can do so using a little javascript:

function sliderDidChange (val) {  
    var elem = document.getElementById("sliderText");
    switch (parseInt(val,10)) {
        case 0:
            elem.innerHTML = "I am number one";
            break;

        case 1:
            elem.innerHTML = "I am number two";
            break;

        case 2:
            elem.innerHTML = "I am number three";
            break;
    }
}

Javascript is infuriating to me, but I'm slowly learning the ropes.