Get min and max values.

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.
Screen Shot 2014-10-04 at 9.57.09 PM

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s