0

I have got this slider some where of the internet, and i want to add a text box to this slider, so on value change inside this slider, the slider sets itself to the given value in the text box.

<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>

Hope i explained it good enough.

4

1 に答える 1

1

さて、あなたは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);
}

その後、物事はうまくいくはずです。

編集：

イベントリスナーをテキストボックスに追加して、ユーザーが入力するたびに値を変更するか、Enter キーを押したときに値を変更することができます (それがあなたの望みです) この例:

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

詳細については、次を参照してください。

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

于 2012-06-05T15:34:10.433 に答える