Skip to content

Instantly share code, notes, and snippets.

@bspingarn
Created May 25, 2012 14:33
Show Gist options
  • Save bspingarn/2788452 to your computer and use it in GitHub Desktop.
Save bspingarn/2788452 to your computer and use it in GitHub Desktop.
jQuery UI Range Slider Loader
// 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