Триггер представляет собой изменение значения ползунка html5

Question

Как вызвать отправку при изменении значения ползунка? Захваченное значение в моем коде определяет ширину прямоугольника svg. Я бы хотел, чтобы ширина менялась, когда я сдвигаю слайдер, не нажимая «submit». Я использовал '{{float (x)}}' в контексте торнадо python.

Пробовал это до сих пор:

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