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
├── static
│   ├── jquery-1.11.1.min.js
│   └── noUiSlider.7.0.8
│       ├──
│       ├── 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 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 )

def top():
    return render_template('index.html')

def sample():
    return render_template('sample.html')

if __name__=="__main__":

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>
		start: [ 0, 20 ],
		connect: true,
			range: {
						'min': -40,
						'max': 40
		alert( $('#testslider').val());

function leftValue( value, handle, slider ){
	$(this).text( handle.parent()[0].style.left );
$("#testslider").Link("lower").to($("#lower-offset"), leftValue);

$("#testslider").Link("upper").to($("#upper-offset"), leftValue);

{% block head %}
{{ super() }}
div.example {
	padding: 20px;

{% endblock %}

{% endblock scripts %}

{% block content %}
<div class="example">
 <div class="view">
	 <p> noUiSliderber test </p><br><br>
 <div id="testslider" style="width:200px;"></div>
 <button id="read-button">read min-max</button>
 <span id="lower-value"></span><br>
 <span id="lower-offset"></span><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


Published by iwatobipen

I'm medicinal chemist in mid size of pharmaceutical company. I love chemoinfo, cording, organic synthesis, my family.

Leave a Reply

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

You are commenting using your 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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: