将具有 OnChange 属性的文本字段添加到滑块 - add a text field with onchange attribute to a slider

add a text field with onchange attribute to a slider

我在互联网的某个地方得到了这个滑块，我想向这个滑块添加一个文本框，所以在这个滑块内的值变化时，滑块将自己设置为文本框中的给定值。

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Papermashup.com | jQuery UI Slider Demo</title>
    <link href="../style.css"
    rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <style type="text/css">
        #container {
            background:url(bg.jpg)!important;
            padding:100px 50px 0px 50px;
        }
        /*the slider background*/
        .slider {
            width:230px;
            height:11px;
            background:url(slider-bg.png);
            position:relative;
            margin:0;
            padding:0 10px;
        }
        /*Style for the slider button*/
        .ui-slider-handle {
            width:24px;
            height:24px;
            position:absolute;
            top:-7px;
            margin-left:-12px;
            z-index:200;
            background:url(slider-button.png);
        }
        /*Result div where the slider value is displayed*/
        #slider-result {
            font-size:50px;
            height:200px;
            font-family:Arial, Helvetica, sans-serif;
            color:#fff;
            width:250px;
            text-align:center;
            text-shadow:0 1px 1px #000;
            font-weight:700;
            padding:20px 0;
        }
        /*This is the fill bar colour*/
        .ui-widget-header {
            background:url(fill.png) no-repeat left;
            height:8px;
            left:1px;
            top:1px;
            position:absolute;
        }
        a {
            outline:none;
            -moz-outline-style:none;
        }
    </style>
</head>
<body>
    <div class="slider"></div>
    <div id="slider-result">50</div>
    <div class="ui-widget-header"></div>
    <input type="hidden" id="hidden" />
    <script>
        $(".slider").slider({
            animate: true,
            range: "min",
            value: 50,
            min: 0,
            max: 80,
            step: 1,
            //this gets a live reading of the value and prints it on the page
            slide: function (event, ui) {
                $("#slider-result").html(ui.value);
            },
            //this updates the hidden form field so we can submit the data using a form
            change: function (event, ui) {
                $('#hidden').attr('value', ui.value);
            }
        });
    </script>
</body>
</html>

希望我解释得足够好。

好吧，

你正在使用jQuery UI。就像您复制的脚本一样，您可以在评论中阅读这部分：

slide: function (event, ui) {
                $("#slider-result").html(ui.value);
}

您的结果实时更新。

因此，如果您进行一些修改：

添加此 HTML：

<input type="text" id="showslider" />

并修改活滑的东西/

slide: function (event, ui) {
     $("#slider-result").html(ui.value);
     $("#showslider").val(ui.value);
}

那么事情应该有效。

编辑：

可以将事件侦听器添加到文本框中，每次用户更改该值时正在打字或当他按回车键（这就是你想要的）一个例子：

$("#showslider").keyup(function (e){
     $(".slider").slider("value", $("#showslider").val());
}

更多信息可以在这里找到：

http://jqueryui.com/demos/slider/