Skip to content

Instantly share code, notes, and snippets.

@color2life

color2life/index.html

Created November 12, 2014 20:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save color2life/a03ee7f327044fc8d1b3 to your computer and use it in GitHub Desktop.
Save color2life/a03ee7f327044fc8d1b3 to your computer and use it in GitHub Desktop.
Download ZIP
slider // source http://jsbin.com/mafavi
Raw
index.html
<style id="jsbin-css">
body {
margin: 20px;
font-family: Arial, sans-serif;
font-size: 12px;
}
.selects {
padding: 30px 10px;
}
.selects select {
width: 150px;
}
</style>
<meta name="description" content="slider" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://ionden.com/a/plugins/ion.rangeSlider/static/js/ion-rangeSlider/ion.rangeSlider.js"></script>
<link href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.css" rel="stylesheet">
<link href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.skinFlat.css" rel="stylesheet">
<link href="https://dl.dropboxusercontent.com/u/27563533/style.css" rel="stylesheet">
<div class="first-slider">
<input type="text" class="js-range" value="">
<div class="selects">
<select id="minprice" name"sel_from" class="js-from">
<option selected="selected" value="0">Any Price…</option>
<option value="100">100</option>
<option value="333">£$333</option>
<option value="12000">£12,000</option>
<option value="13000">£13,000</option>
<option value="14000">£14,000</option>
<option value="15000">£15,000</option>
<option value="16000">£16,000</option>
<option value="17000">£17,000</option>
<option value="18000">£18,000</option>
<option value="19000">£19,000</option>
<option value="2000000">maxi</option>
</select>
<select id="maxprice" name"sel_to" class="js-to" style="float: right;">
<option selected="selected" value="0">Any Price…</option>
<option value="100">£100</option>
<option value="333">£$333</option>
<option value="12000">£12,000</option>
<option value="13000">£13,000</option>
<option value="14000">£14,000</option>
<option value="15000">£15,000</option>
<option value="16000">£16,000</option>
<option value="17000">£17,000</option>
<option value="18000">£18,000</option>
<option value="19000">£19,000</option>
<option value="2000000">maxi</option>
</select>
</div>
</div>
<div class="sec-slider">
<input type="text" class="js-range2" value="">
<div class="selects">
<select id="minprice2" name"sel_from" class="js-from">
<option selected="selected" value="0">Any Price…</option>
<option value="100">100</option>
<option value="333">£$333</option>
<option value="12000">£12,000</option>
<option value="13000">£13,000</option>
<option value="14000">£14,000</option>
<option value="15000">£15,000</option>
<option value="16000">£16,000</option>
<option value="17000">£17,000</option>
<option value="18000">£18,000</option>
<option value="19000">£19,000</option>
<option value="2000000">maxi</option>
</select>
<select id="maxprice2" name"sel_to" class="js-to" style="float: right;">
<option selected="selected" value="0">Any Price…</option>
<option value="100">£100</option>
<option value="333">£$333</option>
<option value="12000">£12,000</option>
<option value="13000">£13,000</option>
<option value="14000">£14,000</option>
<option value="15000">£15,000</option>
<option value="16000">£16,000</option>
<option value="17000">£17,000</option>
<option value="18000">£18,000</option>
<option value="19000">£19,000</option>
<option value="2000000">maxi</option>
</select>
</div>
</div>
<script id="jsbin-javascript">
// object
makeSlider = function(range, from, to) {
var $range = $(range),
$from = $(from),
$dropDownOption = $(from+" option"),
$to = $(to),
from_value,
to_value,
min_index,
max_index,
from_index,
to_index;
var values = $dropDownOption.map(function() {
return this.value;
}).get();
console.log("All vales " + values);
var updateRange = function () {
$range.ionRangeSlider("update", {
from: from_index,
to: to_index
});
};
var updateValues = function () {
from_value = values[from_index];
to_value = values[to_index];
$from.prop("value", from_value);
$to.prop("value", to_value);
};
$range.ionRangeSlider({
type: "double",
values: values,
onLoad: function (data) {
min_index = data.min;
max_index = data.max;
from_index = data.form;
to_index = data.to;
updateValues();
},
onFinish: function (data) {
from_index = data.from;
to_index = data.to;
updateValues();
console.log(to_index);
}
});
$from.on("change", function () {
from_value = $(this).prop("value");
from_value = parseInt(from_value, 10);
from_index = values.indexOf(from_value);
if (from_index < min_index) {
from_index = min_index;
}
if (from_index > to_index) {
from_index = to_index;
}
console.log(from_index);
updateRange();
});
$to.on("change", function () {
to_value = $(this).prop("value");
to_value = parseInt(to_value, 10);
to_index = values.indexOf(to_value);
if (to_index > max_index) {
to_index = max_index;
}
if (to_index < from_index) {
to_index = from_index;
}
console.log(to_index);
updateRange();
});
return this;
};
new makeSlider(".js-range", "#minprice", "#maxprice");
new makeSlider(".js-range2", "#minprice2", "#maxprice2");
</script>
<script id="jsbin-source-html" type="text/html"><meta name="description" content="slider" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"><\/script>
<script src="http://ionden.com/a/plugins/ion.rangeSlider/static/js/ion-rangeSlider/ion.rangeSlider.js"><\/script>
<link href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.css" rel="stylesheet">
<link href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.skinFlat.css" rel="stylesheet">
<link href="https://dl.dropboxusercontent.com/u/27563533/style.css" rel="stylesheet">
<div class="first-slider">
<input type="text" class="js-range" value="">
<div class="selects">
<select id="minprice" name"sel_from" class="js-from">
<option selected="selected" value="0">Any Price…</option>
<option value="100">100</option>
<option value="333">£$333</option>
<option value="12000">£12,000</option>
<option value="13000">£13,000</option>
<option value="14000">£14,000</option>
<option value="15000">£15,000</option>
<option value="16000">£16,000</option>
<option value="17000">£17,000</option>
<option value="18000">£18,000</option>
<option value="19000">£19,000</option>
<option value="2000000">maxi</option>
</select>
<select id="maxprice" name"sel_to" class="js-to" style="float: right;">
<option selected="selected" value="0">Any Price…</option>
<option value="100">£100</option>
<option value="333">£$333</option>
<option value="12000">£12,000</option>
<option value="13000">£13,000</option>
<option value="14000">£14,000</option>
<option value="15000">£15,000</option>
<option value="16000">£16,000</option>
<option value="17000">£17,000</option>
<option value="18000">£18,000</option>
<option value="19000">£19,000</option>
<option value="2000000">maxi</option>
</select>
</div>
</div>
<div class="sec-slider">
<input type="text" class="js-range2" value="">
<div class="selects">
<select id="minprice2" name"sel_from" class="js-from">
<option selected="selected" value="0">Any Price…</option>
<option value="100">100</option>
<option value="333">£$333</option>
<option value="12000">£12,000</option>
<option value="13000">£13,000</option>
<option value="14000">£14,000</option>
<option value="15000">£15,000</option>
<option value="16000">£16,000</option>
<option value="17000">£17,000</option>
<option value="18000">£18,000</option>
<option value="19000">£19,000</option>
<option value="2000000">maxi</option>
</select>
<select id="maxprice2" name"sel_to" class="js-to" style="float: right;">
<option selected="selected" value="0">Any Price…</option>
<option value="100">£100</option>
<option value="333">£$333</option>
<option value="12000">£12,000</option>
<option value="13000">£13,000</option>
<option value="14000">£14,000</option>
<option value="15000">£15,000</option>
<option value="16000">£16,000</option>
<option value="17000">£17,000</option>
<option value="18000">£18,000</option>
<option value="19000">£19,000</option>
<option value="2000000">maxi</option>
</select>
</div>
</div></script>
<script id="jsbin-source-css" type="text/css">body {
margin: 20px;
font-family: Arial, sans-serif;
font-size: 12px;
}
.selects {
padding: 30px 10px;
}
.selects select {
width: 150px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">// object
makeSlider = function(range, from, to) {
var $range = $(range),
$from = $(from),
$dropDownOption = $(from+" option"),
$to = $(to),
from_value,
to_value,
min_index,
max_index,
from_index,
to_index;
var values = $dropDownOption.map(function() {
return this.value;
}).get();
console.log("All vales " + values);
var updateRange = function () {
$range.ionRangeSlider("update", {
from: from_index,
to: to_index
});
};
var updateValues = function () {
from_value = values[from_index];
to_value = values[to_index];
$from.prop("value", from_value);
$to.prop("value", to_value);
};
$range.ionRangeSlider({
type: "double",
values: values,
onLoad: function (data) {
min_index = data.min;
max_index = data.max;
from_index = data.form;
to_index = data.to;
updateValues();
},
onFinish: function (data) {
from_index = data.from;
to_index = data.to;
updateValues();
console.log(to_index);
}
});
$from.on("change", function () {
from_value = $(this).prop("value");
from_value = parseInt(from_value, 10);
from_index = values.indexOf(from_value);
if (from_index < min_index) {
from_index = min_index;
}
if (from_index > to_index) {
from_index = to_index;
}
console.log(from_index);
updateRange();
});
$to.on("change", function () {
to_value = $(this).prop("value");
to_value = parseInt(to_value, 10);
to_index = values.indexOf(to_value);
if (to_index > max_index) {
to_index = max_index;
}
if (to_index < from_index) {
to_index = from_index;
}
console.log(to_index);
updateRange();
});
return this;
};
new makeSlider(".js-range", "#minprice", "#maxprice");
new makeSlider(".js-range2", "#minprice2", "#maxprice2");
</script>
Raw
jsbin.mafavi.css
body {
margin: 20px;
font-family: Arial, sans-serif;
font-size: 12px;
}
.selects {
padding: 30px 10px;
}
.selects select {
width: 150px;
}
Raw
jsbin.mafavi.js
// object
makeSlider = function(range, from, to) {
var $range = $(range),
$from = $(from),
$dropDownOption = $(from+" option"),
$to = $(to),
from_value,
to_value,
min_index,
max_index,
from_index,
to_index;
var values = $dropDownOption.map(function() {
return this.value;
}).get();
console.log("All vales " + values);
var updateRange = function () {
$range.ionRangeSlider("update", {
from: from_index,
to: to_index
});
};
var updateValues = function () {
from_value = values[from_index];
to_value = values[to_index];
$from.prop("value", from_value);
$to.prop("value", to_value);
};
$range.ionRangeSlider({
type: "double",
values: values,
onLoad: function (data) {
min_index = data.min;
max_index = data.max;
from_index = data.form;
to_index = data.to;
updateValues();
},
onFinish: function (data) {
from_index = data.from;
to_index = data.to;
updateValues();
console.log(to_index);
}
});
$from.on("change", function () {
from_value = $(this).prop("value");
from_value = parseInt(from_value, 10);
from_index = values.indexOf(from_value);
if (from_index < min_index) {
from_index = min_index;
}
if (from_index > to_index) {
from_index = to_index;
}
console.log(from_index);
updateRange();
});
$to.on("change", function () {
to_value = $(this).prop("value");
to_value = parseInt(to_value, 10);
to_index = values.indexOf(to_value);
if (to_index > max_index) {
to_index = max_index;
}
if (to_index < from_index) {
to_index = from_index;
}
console.log(to_index);
updateRange();
});
return this;
};
new makeSlider(".js-range", "#minprice", "#maxprice");
new makeSlider(".js-range2", "#minprice2", "#maxprice2");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment