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.
広告
