Home

Input Range - The Basics Example ASP.Net C#

I desired a slider - AKA a HTML5 Range control.

I wanted the slider to also have something to show what the value of the slider is in it's current position.

I also wanted the value of the slider to be sent to the server when a submit button is clicked

I also wanted the value to remain the same when the page returns after the postback.

NOTE -

• There is no "<asp:slider..." or "<asp:TextBox TextMode="slider..."
• When posting back the slider (or any other input) needs a "name="xxxxxx"" attribute and this is found using "Request.Form["xxxxx"]"
• We *CAN* use variables from the code behind in the page using "<% Response.Write(myVariableName) %>"

The HTML Side...

    <input
        type="range"
        id="slider"
        name="slider"
        min="0"
        max="500"
        oninput="ChangeSliderDisplay()" />
    : Range
    <div id="showSliderValue"></div>

    <br />
    <br />

    <asp:Button ID="GetRangeToServer" OnClick="GetRangeToServer_Click" Text="Send To Server" runat="server" />

    <script>

        var slider = document.getElementById('slider')
        var showSliderValue = document.getElementById('showSliderValue')

        window.onload = function () {
            ChangeSliderDisplay();
            slider.value = <% Response.Write(sliderStartValue); %>;
            showSliderValue.innerText = <% Response.Write(sliderStartValue); %>;
         }

        function ChangeSliderDisplay() {
            showSliderValue.innerText = slider.value;
        }

    </script>

The Code Behind

    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            sliderStartValue = Request.Form["slider"];
        }
    }

    protected string sliderStartValue = "250";

    protected void GetRangeToServer_Click(object sender, EventArgs e)
    {
        Response.Write(Request.Form["slider"]);
    }

Reader's Comments

Post Your Comment Posts/Links Rules

Name

---

Comment

---

Add a RELEVANT link (not required)

---

Upload an image (not required)
Uploading...

---

---

Home