0

スライダーの値が変化したときに送信をトリガーするにはどうすればよいですか? 私のコードでキャプチャされた値は、svg 長方形の幅を決定します。「送信」を押さずにスライダーをスライドさせると幅が変わります。Python tornado コンテキストで '{{float(x)}}' を使用しました。

これまでにこれを試しました：

<form name="form" oninput="rangeValueDisplay.value=range.value">
Width: <input type="range" name="range" value="100" min="100" max="1000" />
<output name="rangeValueDisplay" for="range">1960</output>
<input type="submit">
</form>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="{{float(x)}}" height="100"
style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>

別のユーザーからの同様の質問 - https://stackoverflow.com/questions/13540848/autosubmit-html5-range-slider

4

1 に答える 1

0

スライダーの値に基づいて四角形を動的にサイズ変更するには、jQuery を使用できます。

JS:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>
$(function() {
    $('input[type=range]').change(function() {
        $('rect').attr('width', $(this).val());
    });

});
</script>
于 2013-04-16T08:24:55.077 に答える