JSXGraph - WmV - Seminar - Schieberegler

Soll der Mauszeiger aus dem Sichtfeld sein, wenn sich etwas verändert oder mehrere Dinge gleichzeitig passieren, dann eignen sich Schieberegler sehr. Mit ihnen lassen sich unteranderem mehrere Schritte zeigen, wenn mit if-else-Schleifen gearbeitet wird.

Schema

				
					var Slidername = board.create('slider', [STARTPUNKT, ENDPUNKT, [MIN, START, MAX]], {});

Slidername: Gib dem Slider einen Namen
slider: Eine Art Kennwort, dass dem Script sagt, dass nun ein slider erstellt wird
STARTPUNKT: Der Anfang vom slider
ENDPUNKT: Das Ende vom slider
MIN: Der kleinstmöglich einstellbarer Wert
MAX: Der größtmöglich einstellbarer Wert
START: Der Startwert
{}: Hier kommen weitere Eigenschaften zum Slider rein

Soll der Schieberegler die Werte 0 bis 10 annehmen können und bei 0 starten, dann werden in MIN und START jeweils der Wert 0 eingesetzt. Analog für MAX. Hierbei gilt zu beachten, dass die Länge vom Slider keinen Einfluss auf das MIN oder MAX hat. Es kann aber das Bedienen angenehmer machen, wenn der Slider eine annehme Größe hat.

Soll der Schieberegler die Werte 0 bis 10 annehmen können und bei 0 starten, dann werden in MIN und START jeweils der Wert 0 eingesetzt. Analog für MAX. Hierbei gilt zu beachten, dass die Länge vom Slider keinen Einfluss auf das MIN oder MAX hat. Es kann aber das Bedienen angenehmer machen, wenn der Slider eine annehme Größe hat.

Eigenschaften / Attribute

snapWidth

				
					Mit snapWidth kann eingestellt werden, welche Werte der Slider annehmen soll und kann.

... {..., snapWidth: ZAHL, ...});


				
			
				
					var sl = board.create('slider', [[-5,0],[5,0], [0,5,10]], {});
JSXGraph template 
				
					var sl = board.create('slider', [[-5,0],[5,0], [0,5,10]], {snapWidth:2});
JSXGraph template

label

				
					label, suffixlabel und postlabel ermöglichen es uns, den Slider mit zusätzlichen Beschriftungen auszustatten. Das Label ist dabei wie folgt aufgebaut:

suffixlabel + label + postlabel

Hierbei ist label standardmäßig aktiviert und gibt immer den Wert an, auf dem der Slider gerade gestellt ist.
				
			
				
					var sl = board.create('slider', [[-5,0],[5,0], [0,5,10]], {label: {fontSize: 25, color:'blue'}});
JSXGraph template 
				
					var sl = board.create('slider', [[-5,0],[5,0], [0,5,10]], {suffixLabel: 'L = ', postLabel: ' m'});
JSXGraph template

color

				
					Wie alles Andere können auch Slider eingefärbt werden.

baseline: {color:'FARBE'} färbt die dünne Linie
highline: {color:'FARBE'} färbt die dicke Linie
fillColor: 'FARBE' färbt den Punkt
				
			
				
					var sl = board.create('slider', [[-5,0],[5,0], [0,5,10]], {baseline:{color:'red'}, highline:{color:'blue'}, fillColor:'green'});
JSXGraph template

Value

				
					Damit sich Objekte in Abhängigkeit vom Wert des Sliders bewegen, muss dieser abgefrat werden. Das geschieht über

SLIDERNAME.Value()

Damit die Objekte sich dann auch immer dann bewegen, wenn der Wert sich ändern, muss der Wert mit Hilfe einer function an geeigneter Stelle eingesetzt werden.

()=>(SLIDERNAME.Value())
				
			
				
					var sl = board.create('slider', [[-5,-1],[5,-1], [-5,0,5]]);
var point_sl = board.create('point', [()=>(sl.Value()),1]);
JSXGraph template

Face

				
					Da es sich beim Punkt vom Slider um einen Standardpunkt handelt, lässt sich dieser genauso wie die normalen Punkte beliebig einstellen. So zum Beispiel auch seine Form.

Von oben nach unten:

<>
>
x
|
[]
o
JSXGraph template

Beispiele

Gradient Slider

Mit ein paar Tricks lassen sich Slider erstellen, die ihren Farbverlauf in Abhängigkeit vom eingestellten Wert verändern.

				
					var sl = board.create('slider', [[-5,0], [5,0], [0,25,100]], {size:10, face:'[]', postLabel:' %', digits:0, fillColor:'white', baseline:{visible:false}, highline:{visible:false}});
      
var pol = board.create('polygon', [[-5,0.5], [5,0.5], [5,-0.5], [-5,-0.5]], {vertices:{visible:false}, fillColor: 'green', fillOpacity: 0.5, gradient: 'linear', gradientSecondColor: 'red', gradientStartOffset: ()=>(sl.Value()/100), gradientEndOffset: ()=>(sl.Value()/100)})
JSXGraph template

Mehr Ecken - Mehr Form

Lass dich überraschen!

				
					WIP
JSXGraph template

Die Anwendungsmöglichkeiten von Slidern sind unendlich, da diese überall dort eingesetzt werden können, wo ein Zahlenwert erwartet wird. Wobei es aber einige Dinge gibt, bei denen veränderliche Zahlenwerte noch nicht funktionieren. Ein Anwendungsbeispiel wird beim Thema Matrizen gezeigt.

Startseite
Matrix