I made some web apps in our lab.
I want to make mmp app. For make it, I need function that can set range like spotfire.
HTML5 range tag is not enough.
….
I found good JS library noUiSlier !
It’s easy to get min and max value from slid-bar.
I wrote code using flask.
Sample folder are….
iwatobipen$ tree . ├── app.py ├── static │ ├── jquery-1.11.1.min.js │ └── noUiSlider.7.0.8 │ ├── README.md │ ├── jquery.nouislider.all.js │ ├── jquery.nouislider.all.min.js │ ├── jquery.nouislider.css │ ├── jquery.nouislider.js │ ├── jquery.nouislider.min.css │ ├── jquery.nouislider.min.js │ ├── jquery.nouislider.pips.css │ └── jquery.nouislider.pips.min.css └── templates ├── index.html └── sample.html
app.py was simple.
from flask import Flask, url_for, jsonify, request from flask import render_template from flask_bootstrap import Bootstrap app = Flask(__name__) Bootstrap( app ) @app.route('/') def top(): return render_template('index.html') @app.route('/testpage1') def sample(): return render_template('sample.html') if __name__=="__main__": app.run(debug=True)
Next, wrote sample.html
{% extends 'bootstrap/base.html' %} {% block title %} samole {% endblock title %} {% block styles %} {{ super() }} <link href="{{ url_for('static', filename="noUiSlider.7.0.8/jquery.nouislider.min.css") }}" rel="stylesheet"> <link href="{{ url_for('static', filename="noUiSlider.7.0.8/jquery.nouislider.pips.min.css") }}" rel="stylesheet"> {% endblock styles %} {% block scripts %} {{ super() }} <script type=text/javascript src="{{ url_for('static', filename="jquery-1.11.1.min.js") }}"></script> <script type=text/javascript src="{{ url_for('static', filename="noUiSlider.7.0.8/jquery.nouislider.all.min.js") }}"></script> <script> $('#testslider').noUiSlider({ start: [ 0, 20 ], connect: true, range: { 'min': -40, 'max': 40 } }); </script> <script> $("#read-button").click(function(){ alert( $('#testslider').val()); }); </script> <script> function leftValue( value, handle, slider ){ $(this).text( handle.parent()[0].style.left ); }; $("#testslider").Link("lower").to($("#lower-value")); $("#testslider").Link("lower").to($("#lower-offset"), leftValue); $("#testslider").Link("upper").to($("#upper-value")); $("#testslider").Link("upper").to($("#upper-offset"), leftValue); </script> {% block head %} {{ super() }} <style> div.example { padding: 20px; } </style> {% endblock %} {% endblock scripts %} {% block content %} <div class="example"> <div class="view"> <p> noUiSliderber test </p><br><br> <div id="testslider" style="width:200px;"></div> <br> <button id="read-button">read min-max</button> <br><br> minvalue<br> <span id="lower-value"></span><br> <span id="lower-offset"></span><br> maxvalue<br> <span id="upper-value"></span><br> <span id="upper-offset"></span><br> {% endblock %}
This code is very simple, only slider bar and that bar can get min and max value.
So, integrate ajax, it’s easy to generate SQL with some data range.