1

I'm using a slider code I found on a site. It works well except I want to make a small change to the code. I'm still learning Javascript so I'm not quite sure how to get this done.

Here is the code, I'm using.

<div class="demo">

<div class="SliderControl">
    <label for="s1">Slider 1:</label>
    <input type="text" class="SliderText" readonly="readonly" id="s1" name="s1"/>
    <div class="RatingSlider" id="s1Slider"></div> 
</div>

<div class="SliderControl">
    <label for="s2">Slider 2:</label>
    <input type="text" class="SliderText" readonly="readonly" id="s2" name="s2"/>
    <div class="RatingSlider" id="s2Slider"></div> 
</div>
<div class="SliderControl">
    <label for="s3">Slider 3:</label>
    <input type="text" class="SliderText" readonly="readonly" id="s3" name="s3"/>
    <div class="RatingSlider" id="s3Slider"></div> 
</div>
</div>

<script type="text/javascript">
    $('.RatingSlider').each(function(idx, elm) {
            var name = elm.id.replace('Slider', '');
        $('#' + elm.id).slider({
                value: 3,
                min: 0,
                max: 5,
                step: .5,
                slide: function(event, ui) {
                    $('#' + name).val(ui.value);
                }
            });
    });
</script>

Right now the input form displays the current value of the slider. Instead I want it to display Poor, Fair, Average etc. eg: if the value of the slider is 3, I want the text in the input box to be Fair. I think I have to use an array and then pass on the value but I'm not sure how to get it done. I'd appreciate if someone could point me in the right direction. Thanks

4

0 回答 0