Question

当滑块的值发生变化时，如何触发提交？我的代码中捕获的值确定了svg矩形的宽度。当我滑动滑块而不点击“提交”时，我希望宽度发生变化。我在python龙卷风上下文中使用了'{{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

Answer 1

要根据滑块值动态调整矩形大小，可以使用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>

触发器提交为html5滑块的值更改

1 个答案: