/** * Range-Slider for shop */ o2.rangeslider = function(){ var settings = { min: 10, max: 500, minInitVal: 100, maxInitVal: 400, stepWidth: 5, minField: '#minInputField', maxField: '#maxInputField', container: '#sliderdemo', description: 'Gesamtpreis:', replacePatternTmpl: 'von ${minVal} € bis ${maxVal} €', replaceTooltipTmpl: '${value} €', onSlideChange: function(){} }; var rangeSliderTmpl = '
'; var init = function(options){ settings = $.extend(true, {}, settings, options); var $container = $(settings.container); var values = [settings.minInitVal, settings.maxInitVal]; // compile and apply the templates $.template( 'rangeSliderTmpl', rangeSliderTmpl ); $.template( 'replacePatternTmpl', settings.replacePatternTmpl ); $.template( 'replaceTooltipTmpl', settings.replaceTooltipTmpl ); $($container).prepend( $.tmpl('rangeSliderTmpl', settings)); // Define all selectors var $minField = $(settings.minField); var $maxField = $(settings.maxField); var $spans; var $sliderRange = $('.slider-range',$container); var $range = $('.range', $container); var localValues = {min: settings.minInitVal, max: settings.maxInitVal}; // Init the Range Slider $sliderRange.slider({ range: true, min: settings.min, max: settings.max, values: values, step: settings.stepWidth, start: function(event, ui) { // Save the values, because the change-event is triggered, // even if the values have not changed. localValues.min = ui.values[0]; localValues.max = ui.values[1]; }, slide: function(event, ui) { $spans.each(function(index){ $(this).html( $.tmpl('replaceTooltipTmpl', { value : ui.values[index] })); }); }, change: function(event, ui){ $range.html( $.tmpl('replacePatternTmpl', { minVal : ui.values[0], maxVal : ui.values[1] })); // compare the new values with the saved, to make a decision if the // onSlideChange-Event should be triggered if (localValues.min != ui.values[0] || localValues.max != ui.values[1]) { if($minField && $maxField) { if (localValues.min != ui.values[0]) { $minField.val(ui.values[0]); $minField.change(); } if (localValues.max != ui.values[1]) { $maxField.val(ui.values[1]); $maxField.change(); } } $sliderRange.trigger('onSlideChange'); } }, stop: function(){ // Remove the style with the display:block, when the sliding stops $('.slider-handle-bubble',$(this)).removeAttr('style'); } }); // Prepend a span-tag in the anchor. this is needed for the design $('.slider-range a').each(function(){ $(this).prepend('') // Display the bubble for the current value. This is needed, otherwise the bubble is flickering $(this).mousedown(function(){ $('.slider-handle-bubble',$(this)).css({'display':'block'}); }); }); $spans = $('.slider-handle-bubble', $container); // Insert the min- and max-values in the prepended spans $spans.each(function(index){ $(this).html(values[index]) $(this).html( $.tmpl('replaceTooltipTmpl', { value: values[index] }).text()); }); // Bind the own onChange-Event $sliderRange.on( 'onSlideChange', settings.onSlideChange); }; return { init: init }; };