Advitum.de auf Google+

jQueryUI Slider auf feste Werte begrenzen

jQueryUI Slider auf feste Werte begrenzen
VN:F [1.9.22_1171]
Bewertung: 3.7/5 (6 Stimmen abgegeben)
Von am
Kategorien: JavaScript, jQuery, Programmieren, 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«.

jQueryUI Slider auf feste Werte begrenzen, 3.7 out of 5 based on 6 ratings

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

jQueryUI Slider auf feste Werte begrenzen, 3.7 out of 5 based on 6 ratings

Jetzt seid ihr dran!

Teilt eure Meinung mit uns in den Kommentaren, gebt eine Bewertung für diesen Artikel ab und teilt ihn in Social Networks!

Über

Ich bin ein junger Webdesigner und Programmierer aus Siegen und blogge auf Advitum.de über meine Erfahrungen im Web. Meine Themenschwerpunkte liegen im Bereich der Web-Entwicklung mit PHP, JavaScript, HTML und anderen Script-, Programmier- und Markup-Sprachen, der Nutzung von Content Management System wie Typo3, Wordpress etc. und der Effekt-Hascherei mit Photoshop. Seit 2008 blogge ich auf Advitum.de – mal mehr, mal weniger regelmäßig – über alles, was mich so interessiert. Wenn dir mein Blog gefällt, freue ich mich immer sehr über Feedback in Form von Kommentaren und E-Mails.

Kommentare zu diese Artikel

Schreibe jetzt einen Kommentar!

Epps schrieb am Antworten

Vielen Danke für deine ausführliche Beschreibung.
Funktioniert richtige gut und ich danke dir, dass du es hier mit allen geteilt hast,

Hatte erst einige Probleme deine Code zum laufen zu bringen.

Zeile 26 sind die & leider &amp geworden und in 36 und 28 fehlen // vor den Kommentaren

Diese Artikel könnten dir auch gefallen