如何制作滑块

Aloha, I'm trying to develop a slider bar that has 3 words that you can choose from. But I'm not able to save the words as letters, all I get is number either 1,2 or 3 :(

Here's the code I have and also a picture:)

<form action="something.php" method="post" id="form">  
    <input type="range" min=1 max=3 step=1 name="slider"> 
        <div id="text"> 
            <span > Bad </span>
            <span> Ok </span>
            <span> Good </span>
        </div> 
        <input type="submit" value="next" id="but"/> 
    </input> 
</form>

So this code shows the slider bar and letters at the top (which works with my css), but when I click "Submit", on the following page (using php) I get 1, 2 or 3. But it should be Bad, Good or Good. I'm sure that the problem is in the HTML code.

Why not just assign the numerals to values when you process the submission?

if(isset($_POST['slider'])) {
    $array[1] = 'Bad';
    $array[2] = 'Ok';
    $array[3] = 'Good';

    // This is a simplified output, but this is essentially
    // the easiest way
    echo $array[$_POST['slider']];
}

This is not possible by using html only.

You could create a hidden input field and a "change" event handler on the range input field. The event handler sets the value of the hidden input field to the label corresponding to the selected number (1: bad, 2: ok, 3: good).

Example:

<form action="something.php" method="post" id="form">  
    <input type="range" min=1 max=3 step=1 name="slider" id="slider">
    <input type="hidden" name="sliderLabel" id="sliderLabel" />
    <div id="text"> 
        <span > Bad </span>
        <span> Ok </span>
        <span> Good </span>
    </div> 
    <input type="submit" value="next" id="but" />
</form>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
(function() {
    // function to update the value of the hidden field
    updateSliderLabel = function() {
        var selectedValue = $('#slider').val();
        var selectedLabel = $('#text > span').eq(selectedValue-1).text();

        $('#sliderLabel').val(selectedLabel);
    }

    // when slider is changed, call the update function
    $('#slider').on('change', function() {
        updateSliderLabel();
    });

    // when page is loaded, call the update function
    updateSliderLabel();
})();
</script>

The advantage of this solution is, you can easily adopt your labels in the html code, you don't need to modify your php logic.

There is two manner to do what you want :

1 - html + javascript :

You should add a hidden input in your form which before submitting your form you give it a value among the three : Bad, OK, Good according to the value of your slider.

2 - php :

<?php

    $slider_index = intval($_POST['slider']);
    $word = '';
    switch ($slider_index) {
        case 1:
            $word = 'Bad';
            break;
        case 2:
            $word = 'OK';
            break;
        case 3:
            $word = 'Good';
            break;
    }

?>