View source for Highlight curve via slider

Depending on the value of the slider ''s'', one of the curves is highlighted.
<jsxgraph height="500" width="500" board="board"  box="jxgbox">
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-10, 10, 10, -10]});
var s = board.create('slider', [[1,8],[5,8],[0,0,1]]);

var g = board.create('functiongraph', [function(x){ return x*x;}],
                     {
                        strokeColor:function(){ return (s.Value()<0.5)?'red':'blue';},
                        strokeWidth:function(){ return (s.Value()<0.5)?4:1;}
                     });
var f = board.create('functiongraph', [function(x){ return x+1;}],
                     {
                        strokeColor:function(){ return (s.Value()>=0.5)?'red':'blue';},
                        strokeWidth:function(){ return (s.Value()>=0.5)?4:1;}
                     });
</jsxgraph>

===The underlying JavaScript code===
<source lang="javascript">
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-10, 10, 10, -10]});
var s = board.create('slider', [[1,8],[5,8],[0,0,1]]);

var g = board.create('functiongraph', [function(x){ return x*x;}],
         {
          strokeColor:function(){ return (s.Value()<0.5)?'red':'blue';},
          strokeWidth:function(){ return (s.Value()<0.5)?4:1;}
         });
var f = board.create('functiongraph', [function(x){ return x+1;}],
         {
          strokeColor:function(){ return (s.Value()>=0.5)?'red':'blue';},
          strokeWidth:function(){ return (s.Value()>=0.5)?4:1;}
         });
</source>

[[Category:Examples]]