jQueryUI Slider auf feste Werte begrenzen

jQueryUI Slider auf feste Werte begrenzen
Von Lars Ebert am 24.09.11, 18:04
Kategorien: JavaScript, jQuery, Programmieren and Tipps

In meinem letzten Artikel habe ich gezeigt, wie man die jQueryUI-Silder auch auf dem iPad zum laufen bringen kann. Auf ähnliche Weise kann man die Slider-Funktion auch auf andere mobile Geräte portieren und mit der dritten Betaversion von jQuery Mobile halten intuitive und einfache Bedienung von Web-Apps weiter Einzug auf die Handys.

Das nehme ich zum Anlass, um einen weiteren Artikel über Slider zu schreiben, diesmal geht es aber darum, wie man einen Schieberegler auf feste Werte festlegen kann. Der Nutzer soll also nicht stufenlos Werte wählen, sondern nur zum Beispiel die Werte 0, 5, 10, 20, 100 und 150 wählen können. Standardmäßig ist diese Funktion nicht vorgesehen, deshalb muss man den normalen Slider etwas »aufbohren«.

Zunächst brauchen wir einen ganz normalen Slider. Der zugehörige HTML-Code ist recht einfach.


<div id="slider"></div>
<div id="value"></div>

Das erste Div wird später unser Slider, ich habe aber noch ein zweites Div vorgesehen, in welchem der aktuelle Wert angezeigt wird. Als nächstes müssen wir natürlich auch noch jQuery und jQueryUI einbinden. Danach können wir das Div zum Slider machen.


$(document).ready(function()
{
	var values = [0, 5, 10, 20, 100, 150];
	
	$("#slider").slider(
	{
		min: 0,
		max: values[values.length-1],
		stepValues: values
	});
	
	$('#value').text(values[0]);
});

Ich habe nebenbei auch noch schnell ein Array definiert, in welchem die erlaubten Werte gespeichert sind und dieses an den Slider übergeben. Bisher erreiche ich damit noch nichts, aber später kann ich damit komfortabel auf das Array zugreifen. Das Minimum definiere ich als 0, das Maximum als letzten Wert des Arrays. Das Array sollte man auf jeden Fall vorher sortieren, damit auch der letzte Wert garantiert der größte ist.

Bis jetzt ist das ganze nur ein ganz normaler Slider. Jetzt müssen wir ein wenig zaubern. Ich habe im Web zum Glück ein Snippet gefunden, welches ich, leicht modifiziert, verwenden konnte. Des Rätsels Lösung ist, während des Verschieben des Reglers permanent zu berechnen, welcher erlaubte Wert der aktuellen Position am nächsten ist. Dieser Wert wird dann definiert. So springt der Slider automatisch zwischen den einzelnen Werten hin und her. Das ganze können wir innerhalb des Slider-Callbacks des Sliders definieren.


$("#slider").slider(
{
	min: 0,
	max: values[values.length-1],
	stepValues: values,
	slide: function(event, ui)
	{
		var theSlider = $(this),
			stepValues = theSlider.slider("option", "stepValues"),
			distance = [],
			minDistance = theSlider.slider("option", "max"),
			minI;
		
		//Welcher erlaubte Wert ist der Position am nächsten? Hier wird einfach der kürzeste Abstand gesucht
		$.each(stepValues, function(i, val)
		{
			distance[i] = Math.abs(ui.value - val);
			if(distance[i] < minDistance)
			{
				minDistance = distance[i];
				minI = i;
			}
		});
		
		//Wenn ein Wert gefunden wurde, wird dieser gesetzt
		if(typeof minDistance === 'number' &amp;&amp; minDistance)
		{
			Setzen des Wertes und schreiben des neuen Wertes in das 2. Div
			theSlider.slider("value", stepValues[minI]);
			$('#value').text(stepValues[minI]);
			return false;
		}
		//Ansonsten stimmt irgendwas nicht und der aktuelle Wert wird beibehalten
		else
		{
			Der Wert wird nicht neu gesetzt, muss aber trotzdem in das Div geschrieben werden.
			$('#value').text(ui.value);
		}
		
		return returnValue;
	}
});
Der funktionierende Slider - nun lassen sich nur die festgelegten Werte einstellen.

Dank der ganzen vordefinierten Callback-Funktionen, die jQueryUI von Hause aus mitbringt lassen sich die meisten Funktionen flexibel anpassen, sogar eine solche Anpassung der Funktionalität ist mit etwas Tüftelei möglich.

Jetzt seid ihr dran

Hat euch dieser Artikel weiter geholfen? Habt ihr auch schon einmal eine Funktion von jQueryUI modifiziert, um sie euren Bedürfnissen anzupassen? Ich warte gespannt auf eure Erfahrungen und euer Feedback!

Links zum Thema

Zurück zur Übersicht