Created
November 12, 2014 20:46
-
-
Save color2life/a03ee7f327044fc8d1b3 to your computer and use it in GitHub Desktop.
slider // source http://jsbin.com/mafavi
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
margin: 20px; | |
font-family: Arial, sans-serif; | |
font-size: 12px; | |
} | |
.selects { | |
padding: 30px 10px; | |
} | |
.selects select { | |
width: 150px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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