Slider - Revision history

A WASSERMANN at 19:43, 21 January 2021

2021-01-21T19:43:33Z

← Older revision		Revision as of 19:43, 21 January 2021
Line 2:		Line 2:
	In the example below there is a slider ''s'' which takes values between 1 and 5.		In the example below there is a slider ''s'' which takes values between 1 and 5.
	The value of the slider can be accessed via ''s.Value()''.		The value of the slider can be accessed via ''s.Value()''.
	The ''x''-coordinate and the ''y''-coordinate of the point ''A'' depend on ~~this value~~		The ''x''-coordinate and the ''y''-coordinate of the point ''A'' depend on the values of
	''s.Value()'':		the slider ''s'' and ''s2'' which can be accessed via
			''s.Value()'' and ''s2.Value()'':
	<html>		<html>
	<link rel="stylesheet" type="text/css" href="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />		<link rel="stylesheet" type="text/css" href="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
Line 9:		Line 10:
	<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div>		<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div>
	<script type="text/javascript">		<script type="text/javascript">
	var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-3, 5, 7, -5], axis:true});		var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-3, 5, 7, -5], axis:true});
	var s = b.create('slider',[[0,-3],[4,-3],[1,1,5]]);		var s = board.create('slider',[[0,-3],[4,-3],[1,1,5]]);
	var s2 = b.create('slider',[[1,-3.5],[5,-3.5],[0,1,5]],{name:'s2',snapWidth:1});		var s2 = board.create('slider',[[1,-3.5],[5,-3.5],[0,1,5]],{name:'s2',snapWidth:1});
	var a = b.create('point',[		var a = board.create('point',[
	function(){return s.Value();},		function(){return s.Value();},
	function(){return 3/s2.Value();}		function(){return 3/s2.Value();}
Line 36:		Line 37:
	</source>		</source>
	<source lang="javascript">		<source lang="javascript">
	var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-3, 5, 7, -5], axis:true});
	var s = b.create('slider',[[0,-3],[4,-3],[1,1,5]]);		var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-3, 5, 7, -5], axis:true});
	var s2 = b.create('slider',[[1,-3.5],[5,-3.5],[0,1,5]],{name:'s2',snapWidth:1});		var s = board.create('slider',[[0,-3],[4,-3],[1,1,5]]);
	var a = b.create('point',[		var s2 = board.create('slider',[[1,-3.5],[5,-3.5],[0,1,5]],{name:'s2',snapWidth:1});
			var a = board.create('point',[
	function(){return s.Value();},		function(){return s.Value();},
	function(){return 3/s.Value();}		function(){return 3/s2.Value();}
	],{trace:true});		],{trace:true}
	</source>		</source>

	[[Category:Examples]]		[[Category:Examples]]

A WASSERMANN at 08:41, 21 January 2020

2020-01-21T08:41:04Z

← Older revision		Revision as of 08:41, 21 January 2020
Line 5:		Line 5:
	''s.Value()'':		''s.Value()'':
	<html>		<html>
	<link rel="stylesheet" type="text/css" href="~~http~~://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />		<link rel="stylesheet" type="text/css" href="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
	<script type="text/javascript" src="~~http~~://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>		<script type="text/javascript" src="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
	<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div>		<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div>
	<script type="text/javascript">		<script type="text/javascript">
Line 28:		Line 28:
	* snapWidth: distance between two values. (snapWidth:1: slider with integer values)		* snapWidth: distance between two values. (snapWidth:1: slider with integer values)

	JavaScript code:		===The JavaScript code===

	<source lang="html4strict">		<source lang="html4strict">
	<link rel="stylesheet" type="text/css" href="~~http~~://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />		<link rel="stylesheet" type="text/css" href="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
	<script type="text/javascript" src="~~http~~://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>		<script type="text/javascript" src="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
	<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div>		<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div>
	</source>		</source>
Line 43:		Line 44:
	],{trace:true});		],{trace:true});
	</source>		</source>

			[[Category:Examples]]

Michael at 11:38, 31 January 2013

2013-01-31T11:38:10Z

← Older revision		Revision as of 11:38, 31 January 2013
Line 14:		Line 14:
	var a = b.create('point',[		var a = b.create('point',[
	function(){return s.Value();},		function(){return s.Value();},
	function(){return 3/s.Value();}		function(){return 3/s2.Value();}
	],{trace:true});		],{trace:true});
	</script>		</script>

Michael at 11:37, 31 January 2013

2013-01-31T11:37:58Z

← Older revision		Revision as of 11:37, 31 January 2013
Line 9:		Line 9:
	<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div>		<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div>
	<script type="text/javascript">		<script type="text/javascript">
	var b = JXG.JSXGraph.initBoard('jxgbox', {~~originX~~: ~~200~~, ~~originY: 200~~, ~~unitX: 60~~, ~~unitY: 40~~, axis:true});		var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-3, 5, 7, -5], axis:true});
	var s = b.create('slider',[[0,-3],[4,-3],[1,1,5]]);		var s = b.create('slider',[[0,-3],[4,-3],[1,1,5]]);
	var s2 = b.create('slider',[[1,-3.5],[5,-3.5],[0,1,5]],{name:'s2',snapWidth:1});		var s2 = b.create('slider',[[1,-3.5],[5,-3.5],[0,1,5]],{name:'s2',snapWidth:1});
Line 35:		Line 35:
	</source>		</source>
	<source lang="javascript">		<source lang="javascript">
	var b = JXG.JSXGraph.initBoard('jxgbox', {~~originX~~: ~~200~~, ~~originY: 200~~, ~~unitX: 60~~, ~~unitY: 40~~, axis:true});		var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-3, 5, 7, -5], axis:true});
	var s = b.create('slider',[[0,-3],[4,-3],[1,1,5]]);		var s = b.create('slider',[[0,-3],[4,-3],[1,1,5]]);
	var s2 = b.create('slider',[[1,-3.5],[5,-3.5],[0,1,5]],{name:'s2',snapWidth:1});		var s2 = b.create('slider',[[1,-3.5],[5,-3.5],[0,1,5]],{name:'s2',snapWidth:1});

A WASSERMANN at 10:47, 17 February 2010

2010-02-17T10:47:49Z

← Older revision		Revision as of 10:47, 17 February 2010
Line 6:		Line 6:
	<html>		<html>
	<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />		<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
	~~<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>~~
	<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>		<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
	<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div>		<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div>
	<script type="text/javascript">		<script type="text/javascript">
	var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40, axis:true});		var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40, axis:true});
	var s = b.~~createElement~~('slider',[[0,-3],[4,-3],[1,1,5]]);		var s = b.create('slider',[[0,-3],[4,-3],[1,1,5]]);
	var s2 = b.~~createElement~~('slider',[[1,-3.5],[5,-3.5],[0,1,5]],{name:'s2',snapWidth:1});		var s2 = b.create('slider',[[1,-3.5],[5,-3.5],[0,1,5]],{name:'s2',snapWidth:1});
	var a = b.~~createElement~~('point',[		var a = b.create('point',[
	function(){return s.Value();},		function(){return s.Value();},
	function(){return 3/s.Value();}		function(){return 3/s.Value();}
	],{trace:true});		],{trace:true});
	</script>		</script>
	</html>		</html>
Line 32:		Line 31:
	<source lang="html4strict">		<source lang="html4strict">
	<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />		<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
	~~<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>~~
	<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>		<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
	<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div>		<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div>
Line 38:		Line 36:
	<source lang="javascript">		<source lang="javascript">
	var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40, axis:true});		var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40, axis:true});
	var s = b.~~createElement~~('slider',[[0,-3],[4,-3],[1,1,5]]);		var s = b.create('slider',[[0,-3],[4,-3],[1,1,5]]);
	var s2 = b.~~createElement~~('slider',[[1,-3.5],[4,-3.5],[0,1,5]],{name:'s2',snapWidth:1});		var s2 = b.create('slider',[[1,-3.5],[5,-3.5],[0,1,5]],{name:'s2',snapWidth:1});
	var a = b.~~createElement~~('point',[		var a = b.create('point',[
	function(){return s.Value();},		function(){return s.Value();},
	function(){return 3/s.Value();}		function(){return 3/s.Value();}
	]);		],{trace:true});
	</source>		</source>

A WASSERMANN at 22:34, 23 June 2009

2009-06-23T22:34:29Z

← Older revision		Revision as of 22:34, 23 June 2009
Line 12:		Line 12:
	var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40, axis:true});		var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40, axis:true});
	var s = b.createElement('slider',[[0,-3],[4,-3],[1,1,5]]);		var s = b.createElement('slider',[[0,-3],[4,-3],[1,1,5]]);
	var s2 = b.createElement('slider',[[1,-3.5],[5,-3.5],[0,1,5]],{snapWidth:1});		var s2 = b.createElement('slider',[[1,-3.5],[5,-3.5],[0,1,5]],{name:'s2',snapWidth:1});
	var a = b.createElement('point',[		var a = b.createElement('point',[
	function(){return s.Value();},		function(){return s.Value();},
Line 39:		Line 39:
	var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40, axis:true});		var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40, axis:true});
	var s = b.createElement('slider',[[0,-3],[4,-3],[1,1,5]]);		var s = b.createElement('slider',[[0,-3],[4,-3],[1,1,5]]);
	var s2 = b.createElement('slider',[[1,-3.5],[4,-3.5],[0,1,5]],{snapWidth:1});		var s2 = b.createElement('slider',[[1,-3.5],[4,-3.5],[0,1,5]],{name:'s2',snapWidth:1});
	var a = b.createElement('point',[		var a = b.createElement('point',[
	function(){return s.Value();},		function(){return s.Value();},

A WASSERMANN at 22:33, 23 June 2009

2009-06-23T22:33:50Z

← Older revision		Revision as of 22:33, 23 June 2009
Line 12:		Line 12:
	var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40, axis:true});		var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40, axis:true});
	var s = b.createElement('slider',[[0,-3],[4,-3],[1,1,5]]);		var s = b.createElement('slider',[[0,-3],[4,-3],[1,1,5]]);
	var s2 = b.createElement('slider',[[1,-3.5],[5,-3.5],[1,1,5]],{snapWidth:1});		var s2 = b.createElement('slider',[[1,-3.5],[5,-3.5],[0,1,5]],{snapWidth:1});
	var a = b.createElement('point',[		var a = b.createElement('point',[
	function(){return s.Value();},		function(){return s.Value();},
Line 39:		Line 39:
	var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40, axis:true});		var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40, axis:true});
	var s = b.createElement('slider',[[0,-3],[4,-3],[1,1,5]]);		var s = b.createElement('slider',[[0,-3],[4,-3],[1,1,5]]);
	var s2 = b.createElement('slider',[[1,-3.5],[4,-3.5],[5,1,5]],{snapWidth:1});		var s2 = b.createElement('slider',[[1,-3.5],[4,-3.5],[0,1,5]],{snapWidth:1});
	var a = b.createElement('point',[		var a = b.createElement('point',[
	function(){return s.Value();},		function(){return s.Value();},

A WASSERMANN at 22:33, 23 June 2009

2009-06-23T22:33:20Z

← Older revision		Revision as of 22:33, 23 June 2009
Line 12:		Line 12:
	var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40, axis:true});		var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40, axis:true});
	var s = b.createElement('slider',[[0,-3],[4,-3],[1,1,5]]);		var s = b.createElement('slider',[[0,-3],[4,-3],[1,1,5]]);
	var s2 = b.createElement('slider',[[0,-3.5],[4,-3.5],[1,1,5]],{snapWidth:1});		var s2 = b.createElement('slider',[[1,-3.5],[5,-3.5],[1,1,5]],{snapWidth:1});
	var a = b.createElement('point',[		var a = b.createElement('point',[
	function(){return s.Value();},		function(){return s.Value();},
Line 39:		Line 39:
	var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40, axis:true});		var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40, axis:true});
	var s = b.createElement('slider',[[0,-3],[4,-3],[1,1,5]]);		var s = b.createElement('slider',[[0,-3],[4,-3],[1,1,5]]);
	var s2 = b.createElement('slider',[[0,-3.5],[4,-3.5],[1,1,5]],{snapWidth:1});		var s2 = b.createElement('slider',[[1,-3.5],[4,-3.5],[5,1,5]],{snapWidth:1});
	var a = b.createElement('point',[		var a = b.createElement('point',[
	function(){return s.Value();},		function(){return s.Value();},

A WASSERMANN at 22:32, 23 June 2009

2009-06-23T22:32:31Z

← Older revision		Revision as of 22:32, 23 June 2009
Line 12:		Line 12:
	var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40, axis:true});		var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40, axis:true});
	var s = b.createElement('slider',[[0,-3],[4,-3],[1,1,5]]);		var s = b.createElement('slider',[[0,-3],[4,-3],[1,1,5]]);
			var s2 = b.createElement('slider',[[0,-3.5],[4,-3.5],[1,1,5]],{snapWidth:1});
	var a = b.createElement('point',[		var a = b.createElement('point',[
	function(){return s.Value();},		function(){return s.Value();},
Line 38:		Line 39:
	var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40, axis:true});		var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40, axis:true});
	var s = b.createElement('slider',[[0,-3],[4,-3],[1,1,5]]);		var s = b.createElement('slider',[[0,-3],[4,-3],[1,1,5]]);
			var s2 = b.createElement('slider',[[0,-3.5],[4,-3.5],[1,1,5]],{snapWidth:1});
	var a = b.createElement('point',[		var a = b.createElement('point',[
	function(){return s.Value();},		function(){return s.Value();},

A WASSERMANN at 22:31, 23 June 2009

2009-06-23T22:31:27Z

← Older revision		Revision as of 22:31, 23 June 2009
Line 10:		Line 10:
	<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div>		<div id="jxgbox" class="jxgbox" style="width:600px; height:400px;"></div>
	<script type="text/javascript">		<script type="text/javascript">
	var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40~~});~~		var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40, axis:true});
	~~ax = b.createElement('axis', [[0,0], [1,0]]~~, ~~{});~~
	~~ay = b.createElement('~~axis~~', [[0,0], [0,1]], {~~});
	var s = b.createElement('slider',[[0,-3],[4,-3],[1,1,5]]);		var s = b.createElement('slider',[[0,-3],[4,-3],[1,1,5]]);
	var a = b.createElement('point',[		var a = b.createElement('point',[
Line 27:		Line 25:
	* start: initial value of the slider		* start: initial value of the slider
	* max: maximum value of the slider		* max: maximum value of the slider
			Properties:
	* snapWidth: distance between two values. (snapWidth:1: slider with integer values)		* snapWidth: distance between two values. (snapWidth:1: slider with integer values)

Line 37:		Line 36:
	</source>		</source>
	<source lang="javascript">		<source lang="javascript">
	var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40~~});~~		var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 200, unitX: 60, unitY: 40, axis:true});
	~~ax = b.createElement('axis', [[0,0], [1,0]]~~, ~~{});~~
	~~ay = b.createElement('~~axis~~', [[0,0], [0,1]], {~~});
	var s = b.createElement('slider',[[0,-3],[4,-3],[1,1,5]]);		var s = b.createElement('slider',[[0,-3],[4,-3],[1,1,5]]);
	var a = b.createElement('point',[		var a = b.createElement('point',[