Return from Flask the value of bootstrap range

Question

I'm just playing around with Flask and I created a bootstrap range.

{% extends 'index.html' %} {% block body %} <div class="container"> <div class="range-wrap"> <input id="range" type="range" name="slider_value" min="0" max="100" value="50" step="1" /> </div> <input type="text" id="range_input" class="form-control" readonly value="{{valueFromFlask}}" /> </div> <script> const range = document.getElementById('range'); const setValue = () => { const newValue = Number( ((range.value - range.min) * 100) / (range.max - range.min) ); const newPosition = 10 - newValue * 0.2; fetch('/slider', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ slider_value: range.value }), }).then( (result) => console.log(result), (error) => console.log(error) ); }; document.addEventListener('DOMContentLoaded', setValue); range.addEventListener('input', setValue); </script> {% endblock %}

In Flask I get the current slider value as I'm able to print it

 @app.route('/slider', methods=['GET', 'POST']) def slider(): slider_value = "" if request.method == 'POST': data = request.get_json() slider_value = data.get('slider_value') print(f'Slider Value: {slider_value}') return render_template("slider.html")

I can't understand how I'm supposed to return the "slider_value" to slider.html so it can be printed in the input

 <input type="text" id="range_input" class="form-control" readonly value="{{valueFromFlask}}" />

I've tried return render_template("slider.html", valueFromFlask=slider_value) but nothing shows up.

moon548834 · Accepted Answer · 2023-09-19 08:29:36Z

It seems you fetch the data but doesn't rerender the web

fetch('/slider_value', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ slider_value: range.value }), }) .then(response => response.json()) .then(data => { document.getElementById('range_input').value = data.slider_value; }) .catch((error) => console.log(error));

 # keep this @app.route('/slider', methods=['GET', 'POST']) def slider(): slider_value = "" if request.method == 'POST': data = request.get_json() slider_value = data.get('slider_value') print(f'Slider Value: {slider_value}') return render_template("slider.html") # this is new @app.route('/slider_value', methods=['POST']) def slider(): slider_value = "" if request.method == 'POST': data = request.get_json() slider_value = data.get('slider_value') print(f'Slider Value: {slider_value}') return jsonify({'slider_value': slider_value})

You mean to replace return render_template("slider.html") withreturn jsonify({'slider_value': slider_value})? Should I somehow render the html page?
I have updated my answer, I think you should define two routes? one for the website, I mean you should enter xxx/slider in the address bar, and other one for the slider update

Collectives™ on Stack Overflow

Return from Flask the value of bootstrap range

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related