html5 input type="range"实现拖拉滑条功能

最新推荐文章于 2025-06-18 11:03:02 发布

原创最新推荐文章于 2025-06-18 11:03:02 发布 · 8.5k 阅读

CC 4.0 BY-SA版权

本文介绍如何使用HTML5的`<input type='range'>`创建拖拉滑条功能，并通过JavaScript和jQuery处理滑动事件，实现在后台处理文本框中的相应值。在某些浏览器中，滑动滑块会频繁触发文本框的`textchanged`事件。代码示例中展示了如何在鼠标抬起时触发回发，以及在AJAX异步刷新后重新初始化滑条功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文是最新的html5技术实现拖拉条功能。实现如下图所示效果

主要功能实现是在拖拉滑动条后，在后台处理textbox中相应的值。但是有的浏览器在拖动滑动条是，textbox里面的值一直变化，会频繁触发textchanged事件（注意jquery 在客户端给textbox赋值是并不会引起回发，即不会触发textchanged事件，需使用jquery 条用change()事件，以引起回发。）

下面贴出代码。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <script src="js/jquery-1.11.0.min.js"></script>
    <link href="css/StyleSheet.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
            sliderRange();
            addEndRequestHandle();
        });

        function sliderRange() {
            var trackBar = document.getElementsByClassName("rangeColor");
            for (i = 0 ; i < trackBar.length; ++i) {
                var traB = trackBar[i];
                $(traB).mouseup(function () {
                    var tbid = this.id.split('_')[0];
                    $("#" + tbid).change();
                });         //该函数功能是为了textbox内容改变的情况下，且mouseUP时，引起回发触发textbox的textchanged事件。

                traB.addEventListener("change", function () {
                    var tbid = this.id.split('_')[0];
                    $("#" + tbid).val(this.value);
                }, false);//该函数功能是在拖拉滑动条时，在textbox动态更新滑动条的值。
            }

        }
        function addEndRequestHandle() {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(sliderRange); //此处是为了ajax异步刷新，js失效做的处理，使其每次异步回发亦调用sliderRange函数。
        }
    </script>
    <style type="text/css">
        .colorTextBox {
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <div>
                    <div>
                        <asp:TextBox ID="TextBox1" CssClass="colorTextBox" runat="server" OnTextChanged="TextBox_TextChanged" AutoPostBack="True"></asp:TextBox>
                        <input runat="server" type="range" name="colorRange1" class="rangeColor" id="TextBox1_trackBar1" min="0" max="255" step="1" value="1" />
                        <br />
                    </div>
                    <div>
                        <asp:TextBox ID="TextBox2" CssClass="colorTextBox" runat="server" ClientIDMode="Static" OnTextChanged="TextBox_TextChanged" AutoPostBack="True"></asp:TextBox>
                        <input runat="server" type="range" name="colorRange2" class="rangeColor" id="TextBox2_trackBar2" min="0" max="255" step="1" value="1" />
                        <br />
                    </div>
                    <div>
                        <asp:TextBox ID="TextBox3" CssClass="colorTextBox" runat="server" ClientIDMode="Static" OnTextChanged="TextBox_TextChanged" AutoPostBack="True"></asp:TextBox>
                        <input runat="server" type="range" name="colorRange3" class="rangeColor" id="TextBox3_trackBar3" min="0" max="255" step="1" value="1" />
                    </div>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>