Get Input range to show value on page load, and submit slider value as answer?

Question

In my current MVC project, I am using a slider for one question, instead of radio buttons, like all the other questions. Currently, I have some problems getting it to function properly.

What I need is for it to display the current value on the page load, when currently it only displays the current value after the user slides it in any direction.

I also need it to return the current value that it is on when the user clicks a submit button.

Also, I have some Javascript validation which applies for each radio button, which prevents the form from submitting and moving on, if the user has not clicked on a radio button.

<table cellspacing="10">
    <tr>
        @if ((Model.NextQuestionId - 1) == 5)
        {
            <tr>
                <td><input type="range" id="slider" min="10" max="200" onload="updateSliderValue(this.value)" onchange="updateSliderValue(this.value)" /></td>
            </tr>
            <tr>
                <td id="currentValue"></td>
            </tr>
        }
        else
        {   
            <tr>
                @foreach (string answer in Model.Answers)
                {
                <td><label><input type="radio" name="answer" value="@answer" /><span>@answer</span></label></td>
                }
            </tr>
        }
</table>

<input class="btn btn-success NavigationButtons" id="ForwardButton" type="submit" name="NextPage" value="@Session["ForwardButtonText"]" onclick="RadBtnValidation()"/>

This is my HTML (with some razor) for the range slider. May have to be changed a lot, which is fine.

In the else part of the if statement, the value=@answer is what is passed to

[HttpPost]
public ActionResult NextPage(string answer)
{
    //some code
    return RedirectToAction(/*more code*/)
}

so that will probably have to be incorporated into the slider somehow.

Here is my function that shows up the slider value, but only when the slider slides, when I need it to also show up when the slider loads - this is all done in one view with a few elements that update after each form submit.

function updateSliderValue(val) {
    $("#currentValue").html(val);
}

Here is the radio button validation, which currently also applies to the slider when it shouldn't because the user could use the default value for the slider as an answer(as long as this default value shows up)

function RadBtnValidation() {
    if ($('input[name="answer"]:checked').length === 1) {
        return true;
    }
    else {
        alert("Please select an answer");
        event.preventDefault();
        return false;
    }
};

Expected Behaviour:

• Slider value shows on page load.
• Slider value is submitted as answer on the form submit.
• Slider does not use the validation ( RadBtnValidation() )so the default value is used for the answer if the user doesn't click on the slider.

Any help to any one of my problems is appreciated. Thanks!

Edit: Tried the 2 solutions already suggested. None work.

Answer 1

用户defaultValue属性设置默认值，对于Submit使用name =“ answer”

<input type="range" **defaultValue="10" name="answer"** id="slider" min="10" max="200" onload="updateSliderValue(this.value)" onchange="updateSliderValue(this.value)"   />