Created
May 25, 2012 14:33
-
-
Save bspingarn/2788452 to your computer and use it in GitHub Desktop.
jQuery UI Range Slider Loader
This file contains hidden or 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
// Allows sliders to be dynamically initiated more easily | |
// Adds validation for min and max number input boxes | |
// Minimizes code if many sliders are on a page | |
var searchSlider = { | |
init: function(selector, range_min, range_max){ | |
var input_min = $(selector).parents('.slider-wrapper').find('.min'), | |
input_max = $(selector).parents('.slider-wrapper').find('.max'); | |
$(selector).slider({ | |
range: true, | |
min: range_min, | |
max: range_max, | |
step: 0.01, | |
values: [ range_min, range_max ], | |
stop: function(e,ui){ | |
console.log(selector + ', Min Size: ' + ui.values[0] + ', Max Size: ' + ui.values[1]); | |
//send values to ajax search | |
}, | |
slide: function(e,ui){ | |
$(input_min).val(ui.values[0]); | |
$(input_max).val(ui.values[1]); | |
} | |
}); | |
// grab the initialized slider min and max | |
$(input_min).val($(selector).slider('values',0)); | |
$(input_max).val($(selector).slider('values',1)); | |
}, | |
rememberValue: function(){ | |
searchSlider.old_input_val = $(this).val(); | |
}, | |
update: function() { | |
var target_obj = $(this); //focused slider value input box | |
var target_slider = $(target_obj).parents('.slider-wrapper').find('.ui-slider'); | |
var max = $(target_slider).slider('option','max'); //the set min based on slider init | |
var min = $(target_slider).slider('option','min'); | |
var c_min = $(target_slider).slider('values', 0); //current min slider handle value | |
var c_max = $(target_slider).slider('values', 1); | |
var input_val = $(target_obj).val(); | |
var isNumber = function(n) { | |
return !isNaN(parseFloat(n)) && isFinite(n); | |
} | |
if (isNumber(input_val)) { | |
if ($(target_obj).hasClass('min')){ | |
if (input_val >= min && input_val <= c_max) { //normal range | |
$(target_slider).slider('values', 0, input_val); | |
} | |
else if (input_val < min) { | |
$(target_slider).slider('values', 0, min); | |
$(target_obj).val(min); | |
} | |
else if (input_val > c_max) { | |
$(target_slider).slider('values', 0, c_max); | |
$(target_obj).val(c_max); | |
} | |
} | |
else if ($(target_obj).hasClass('max')) { | |
if (input_val >= c_min && input_val <= max) { //normal range | |
$(target_slider).slider('values', 1, input_val); | |
} | |
else if (input_val > max) { | |
$(target_slider).slider('values', 1, max); | |
$(target_obj).val(max); | |
} | |
else if (input_val < c_min) { | |
$(target_slider).slider('values', 1, c_min); | |
$(target_obj).val(c_min); | |
} | |
} | |
} | |
else { //fails number validation, revert | |
$(target_obj).val(searchSlider.old_input_val); | |
} | |
} | |
} | |
$(function() { | |
searchSlider.init('#slider-width', 0.20, 8.5); //slider id, min value, max value | |
searchSlider.init('#slider-height', 0.20, 11); | |
$('.slider-value').focus(searchSlider.rememberValue).change(searchSlider.update); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment