jQuery UI Slider & Fixed Range

Ein Slider ist mit jQueryUI schnell erstellt. Schwieriger wird es erst, wenn man ihn modifizieren möchte.

Mein Problem bestand darin, einen Slider zu bauen, bei dem ein Bereich als optimal hervorgehoben werden sollte.

Ich hab mich dafür entschieden, eine Textbox mit data-Attributen zu versehen um diese dann zur Laufzeit per Javascript zu einem Slider mutieren zu lassen. Dert Wert der Textbox wird dabei als Slider-Starteinstellung genutzt.

Attribute

Name	Verwendung	Beispiel
data-slider	Kommasepariert *1) minimaler und maximaler Wert für den Slider	data-slider=“0,10″
data-sliderFixedRange	Kommaseparierte *1) Werte für den hervorzuhebenden Bereich	data-sliderFixedRange=“5,7″

*1: Das Trennzeichen ist über das jQuery-Plugin $dgSlider_Settings.defaults.valueSplitSign einstellbar.

Die Textbox sollte dann so aussehen:

<input type=“text“ id=“myId“ name=“myName“ data-slider=“0,10″ data-sliderFixedRange=“5,7″ />

Um aus dem Element nun einen Slider zu machen muss einfach $(‚:text[data-slider]‘).dgSlider(); aufgerufen werden.

Abschließend noch das Script:

(function($) {
$.dgSlider_Settings = {
_dataKey: ‚dgSliderDataKey‘,
defaults: {
textbox: null,
slider: null,
valueSplitSign: ‚,‘
} /* end defaults */
}

var methods = {
_init: function(settings) {
$(this).each(function() {
var $this = $(this);
var data = methods._getData($this, settings);

data.textbox = $this;
data.slider = $(„<div />“);
data.slider.insertBefore(data.textbox);
var opt = methods._createOptions(data.textbox);
data.textbox.hide();
data.slider.slider(opt);
});
},
destroy: function() {
$(this).each(function(){
var data = methods._getData($(this));
data.slider.slider(„destroy“);
data.slider.remove();
data.textbox.show();
});
},
/* Erzeugt die Options für den Slider aus den Attributen der Textbox */
_createOptions: function(textbox) {
var data = methods._getData($(this));
var sliderValues = textbox.attr(„data-slider“).split(data.valueSplitSign);
var opt = {
min: parseInt(sliderValues[0]),
max: parseInt(sliderValues[1]),
step: 1,
value: textbox.val()
};

if (textbox.attr(„data-sliderFixedRange“)) {
var fixedRange = textbox.attr(„data-sliderFixedRange“).split(data.valueSplitSign);

var startPoint = (parseInt(fixedRange[0]) * 100) / (opt.max – opt.min);
var rangeWidth = (((parseInt(fixedRange[1]) * 100) / (opt.max – opt.min)) – startPoint);

opt.create = function(evt, ui) {
var rangeDiv = $(„<div/>“).css({
position: ‚relative‘,
left: startPoint + „%“,
width: rangeWidth + „%“,
height: „100%“
}).addClass(‚bg90‘);
$(this).append(rangeDiv);
}
}
opt.change = function(evt, ui) { textbox.val(ui.value); }
return opt;
},
/* Liefert das .data-Objekt */
_getData: function(x, settings) {
var data = x.data($.dgSlider_Settings._dataKey);

if (!data) {
data = $.extend({}, $.dgSlider_Settings.defaults, settings);
x.data($.dgSlider_Settings._dataKey, data);
}
return data;
}

}

$.fn.dgSlider = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === ‚object‘ || !method) {
return methods[„_init“].apply(this, arguments);
} else {
jQuery.error(„Die Methode “ + method + “ konnte nicht gefunden werden“);
}
}

})(jQuery);