Interact Demo
system:sage

<p>A few interactions that I wrote to demonstrate the new features in @interact.</p>
<p>But first: <a href="http://reference.wolfram.com/mathematica/ref/Manipulate.html" target="_new">Demos of Mathematica's Manipulate Command</a></p>

{{{id=0|
@interact
def _(
    t = text_control("Plots a graph of the function f(x)=sin(x)/x"),
    s = range_slider(-20,20,0.1, default=(-5,7), label="Range")
): plot(sin(x)/x, s[0], s[1]).show(xmin=s[0], xmax=s[1])
///

<html><div padding=6 id='div-interact-0'> <table width=800px height=400px bgcolor='#c5c5c5'
                 cellpadding=15><tr><td bgcolor='#f9f9f9' valign=top align=left><table><tr><td colspan=2><div style="color:black; padding-bottom:5px">Plots a graph of the function f(x)=sin(x)/x</div></td></tr>
<tr><td align=right><font color="black">Range&nbsp;</font></td><td><table>
    <tr><td><div id='slider-s-0' class='ui-slider-3' style='padding:0px;margin:0px;'>
    <span class='ui-slider-handle'></span><span class='ui-slider-handle'></span>
    </div></td></tr><tr><td><font color='black' id='slider-s-0-lbl'></font></td></tr></table><script>(function()
    {
        var values = ["-20.0000000000000","-19.9000000000000","-19.8000000000000","-19.7000000000000","-19.6000000000000","-19.5000000000000","-19.4000000000000","-19.3000000000000","-19.2000000000000","-19.1000000000000","-19.0000000000000","-18.9000000000000","-18.8000000000000","-18.7000000000000","-18.6000000000000","-18.5000000000000","-18.4000000000000","-18.3000000000000","-18.2000000000000","-18.1000000000000","-18.0000000000000","-17.9000000000000","-17.8000000000000","-17.7000000000000","-17.6000000000000","-17.5000000000000","-17.4000000000000","-17.3000000000000","-17.2000000000000","-17.1000000000000","-17.0000000000000","-16.9000000000000","-16.8000000000000","-16.7000000000000","-16.6000000000000","-16.5000000000000","-16.4000000000000","-16.3000000000000","-16.2000000000000","-16.1000000000000","-16.0000000000000","-15.9000000000000","-15.8000000000000","-15.7000000000000","-15.6000000000000","-15.5000000000000","-15.4000000000000","-15.3000000000000","-15.2000000000000","-15.1000000000000","-15.0000000000000","-14.9000000000000","-14.8000000000000","-14.7000000000000","-14.6000000000000","-14.5000000000000","-14.4000000000000","-14.3000000000000","-14.2000000000000","-14.1000000000000","-14.0000000000000","-13.9000000000000","-13.8000000000000","-13.7000000000000","-13.6000000000000","-13.5000000000000","-13.4000000000000","-13.3000000000000","-13.2000000000000","-13.1000000000000","-13.0000000000000","-12.9000000000000","-12.8000000000000","-12.7000000000000","-12.6000000000000","-12.5000000000000","-12.4000000000000","-12.3000000000000","-12.2000000000000","-12.1000000000000","-12.0000000000000","-11.9000000000000","-11.8000000000000","-11.7000000000000","-11.6000000000000","-11.5000000000000","-11.4000000000000","-11.3000000000000","-11.2000000000000","-11.1000000000000","-11.0000000000000","-10.9000000000000","-10.8000000000000","-10.7000000000000","-10.6000000000000","-10.5000000000000","-10.4000000000000","-10.3000000000000","-10.2000000000000","-10.1000000000000","-10.0000000000000","-9.90000000000000","-9.80000000000000","-9.70000000000000","-9.60000000000000","-9.50000000000000","-9.40000000000000","-9.30000000000000","-9.20000000000000","-9.10000000000000","-9.00000000000000","-8.90000000000000","-8.80000000000000","-8.70000000000000","-8.60000000000000","-8.50000000000000","-8.40000000000000","-8.30000000000000","-8.20000000000000","-8.10000000000000","-8.00000000000000","-7.90000000000000","-7.80000000000000","-7.70000000000000","-7.60000000000000","-7.50000000000000","-7.40000000000000","-7.30000000000000","-7.20000000000000","-7.10000000000000","-7.00000000000000","-6.90000000000000","-6.80000000000000","-6.70000000000000","-6.60000000000000","-6.50000000000000","-6.40000000000000","-6.30000000000000","-6.20000000000000","-6.10000000000000","-6.00000000000000","-5.90000000000000","-5.80000000000000","-5.70000000000000","-5.60000000000000","-5.50000000000000","-5.40000000000000","-5.30000000000000","-5.20000000000000","-5.10000000000000","-5.00000000000000","-4.90000000000000","-4.80000000000000","-4.70000000000000","-4.60000000000000","-4.50000000000000","-4.40000000000000","-4.30000000000000","-4.20000000000000","-4.10000000000000","-4.00000000000000","-3.90000000000000","-3.80000000000000","-3.70000000000000","-3.60000000000000","-3.50000000000000","-3.40000000000000","-3.30000000000000","-3.20000000000000","-3.10000000000000","-3.00000000000000","-2.90000000000000","-2.80000000000000","-2.70000000000000","-2.60000000000000","-2.50000000000000","-2.40000000000000","-2.30000000000000","-2.20000000000000","-2.10000000000000","-2.00000000000000","-1.90000000000000","-1.80000000000000","-1.70000000000000","-1.60000000000000","-1.50000000000000","-1.40000000000000","-1.30000000000000","-1.20000000000000","-1.10000000000000","-1.00000000000000","-0.899999999999999","-0.799999999999997","-0.699999999999999","-0.599999999999998","-0.500000000000000","-0.399999999999999","-0.299999999999997","-0.199999999999999","-0.0999999999999979","0.000000000000000","0.100000000000001","0.200000000000003","0.300000000000001","0.400000000000002","0.500000000000000","0.600000000000001","0.700000000000003","0.800000000000001","0.900000000000002","1.00000000000000","1.10000000000000","1.20000000000000","1.30000000000000","1.40000000000000","1.50000000000000","1.60000000000000","1.70000000000000","1.80000000000000","1.90000000000000","2.00000000000000","2.10000000000000","2.20000000000000","2.30000000000000","2.40000000000000","2.50000000000000","2.60000000000000","2.70000000000000","2.80000000000000","2.90000000000000","3.00000000000000","3.10000000000000","3.20000000000000","3.30000000000000","3.40000000000000","3.50000000000000","3.60000000000000","3.70000000000000","3.80000000000000","3.90000000000000","4.00000000000000","4.10000000000000","4.20000000000000","4.30000000000000","4.40000000000000","4.50000000000000","4.60000000000000","4.70000000000000","4.80000000000000","4.90000000000000","5.00000000000000","5.10000000000000","5.20000000000000","5.30000000000000","5.40000000000000","5.50000000000000","5.60000000000000","5.70000000000000","5.80000000000000","5.90000000000000","6.00000000000000","6.10000000000000","6.20000000000000","6.30000000000000","6.40000000000000","6.50000000000000","6.60000000000000","6.70000000000000","6.80000000000000","6.90000000000000","7.00000000000000","7.10000000000000","7.20000000000000","7.30000000000000","7.40000000000000","7.50000000000000","7.60000000000000","7.70000000000000","7.80000000000000","7.90000000000000","8.00000000000000","8.10000000000000","8.20000000000000","8.30000000000000","8.40000000000000","8.50000000000000","8.60000000000000","8.70000000000000","8.80000000000000","8.90000000000000","9.00000000000000","9.10000000000000","9.20000000000000","9.30000000000000","9.40000000000000","9.50000000000000","9.60000000000000","9.70000000000000","9.80000000000000","9.90000000000000","10.0000000000000","10.1000000000000","10.2000000000000","10.3000000000000","10.4000000000000","10.5000000000000","10.6000000000000","10.7000000000000","10.8000000000000","10.9000000000000","11.0000000000000","11.1000000000000","11.2000000000000","11.3000000000000","11.4000000000000","11.5000000000000","11.6000000000000","11.7000000000000","11.8000000000000","11.9000000000000","12.0000000000000","12.1000000000000","12.2000000000000","12.3000000000000","12.4000000000000","12.5000000000000","12.6000000000000","12.7000000000000","12.8000000000000","12.9000000000000","13.0000000000000","13.1000000000000","13.2000000000000","13.3000000000000","13.4000000000000","13.5000000000000","13.6000000000000","13.7000000000000","13.8000000000000","13.9000000000000","14.0000000000000","14.1000000000000","14.2000000000000","14.3000000000000","14.4000000000000","14.5000000000000","14.6000000000000","14.7000000000000","14.8000000000000","14.9000000000000","15.0000000000000","15.1000000000000","15.2000000000000","15.3000000000000","15.4000000000000","15.5000000000000","15.6000000000000","15.7000000000000","15.8000000000000","15.9000000000000","16.0000000000000","16.1000000000000","16.2000000000000","16.3000000000000","16.4000000000000","16.5000000000000","16.6000000000000","16.7000000000000","16.8000000000000","16.9000000000000","17.0000000000000","17.1000000000000","17.2000000000000","17.3000000000000","17.4000000000000","17.5000000000000","17.6000000000000","17.7000000000000","17.8000000000000","17.9000000000000","18.0000000000000","18.1000000000000","18.2000000000000","18.3000000000000","18.4000000000000","18.5000000000000","18.6000000000000","18.7000000000000","18.8000000000000","18.9000000000000","19.0000000000000","19.1000000000000","19.2000000000000","19.3000000000000","19.4000000000000","19.5000000000000","19.6000000000000","19.7000000000000","19.8000000000000","19.9000000000000","20"];
        var pos = [150, 270];
        var sel = '#slider-s-0';
        var updatePos = function()
        {
            pos[0]=Math.ceil($(sel).slider('value', 0));
            pos[1]=Math.ceil($(sel).slider('value', 1));
            if(values!=null) $(sel+'-lbl').text("("+values[pos[0]]+", "+values[pos[1]]+")");
        };
        setTimeout(function()
        {
            $(sel).slider(
            {
                range: true,
                stepping: 1,                	
                minValue: 0,
                maxValue: 400,
                startValue: [150, 270],
                change: function(){ updatePos(); interact(0, "sage.server.notebook.interact.update(0, \"s\", 10, sage.server.notebook.interact.standard_b64decode(\""+encode64(pos[0]+' '+pos[1])+"\"), globals())"); },
                slide: updatePos
            });
            updatePos();
        }, 1);
    })();</script></td></tr>
</table><div id='cell-interact-0'><?__SAGE__START>
        <table border=0 bgcolor='#white' width=100% height=100%>
        <tr><td bgcolor=white align=left valign=top><pre><?__SAGE__TEXT></pre></td></tr>
        <tr><td  align=left valign=top><?__SAGE__HTML></td></tr>
        </table><?__SAGE__END></div></td>
                 </tr></table></div>
                 </html>
}}}

{{{id=2|
from scipy import stats

@interact
def _(
    t = selector(["Normal", "Semicircular", "Uniform"], nrows=1, label="Distribution"),
    s = selector([10,100,1000,10^5,10^6], nrows=1, default=1000, label="Sample size"),
    u = slider(0, 100, default=30, label="Number of bars")
):
    distr = {"Normal":stats.norm, "Semicircular":stats.semicircular, "Uniform":stats.uniform}
    n = distr[t](u)
    bar_chart(stats.histogram(n.rvs(s),u)[0]).show()
///

<html><div padding=6 id='div-interact-2'> <table width=800px height=400px bgcolor='#c5c5c5'
                 cellpadding=15><tr><td bgcolor='#f9f9f9' valign=top align=left><table><tr><td align=right><font color="black">Distribution&nbsp;</font></td><td><table style="border:1px solid #dfdfdf;background-color:#efefef">
<tr><td><button style='border-style:inset;' value='0' onclick='$("BUTTON", this.parentNode).css("border-style", "outset"); $(this).css("border-style", "inset"); interact(2, "sage.server.notebook.interact.update(2, \"t\", 11, sage.server.notebook.interact.standard_b64decode(\""+encode64(this.value)+"\"), globals())")'>Normal</button>
<button style='border-style:outset;' value='1' onclick='$("BUTTON", this.parentNode).css("border-style", "outset"); $(this).css("border-style", "inset"); interact(2, "sage.server.notebook.interact.update(2, \"t\", 11, sage.server.notebook.interact.standard_b64decode(\""+encode64(this.value)+"\"), globals())")'>Semicircular</button>
<button style='border-style:outset;' value='2' onclick='$("BUTTON", this.parentNode).css("border-style", "outset"); $(this).css("border-style", "inset"); interact(2, "sage.server.notebook.interact.update(2, \"t\", 11, sage.server.notebook.interact.standard_b64decode(\""+encode64(this.value)+"\"), globals())")'>Uniform</button>
</td></tr></table></td></tr>
<tr><td align=right><font color="black">Sample size&nbsp;</font></td><td><table style="border:1px solid #dfdfdf;background-color:#efefef">
<tr><td><button style='border-style:outset;' value='0' onclick='$("BUTTON", this.parentNode).css("border-style", "outset"); $(this).css("border-style", "inset"); interact(2, "sage.server.notebook.interact.update(2, \"s\", 12, sage.server.notebook.interact.standard_b64decode(\""+encode64(this.value)+"\"), globals())")'>10</button>
<button style='border-style:outset;' value='1' onclick='$("BUTTON", this.parentNode).css("border-style", "outset"); $(this).css("border-style", "inset"); interact(2, "sage.server.notebook.interact.update(2, \"s\", 12, sage.server.notebook.interact.standard_b64decode(\""+encode64(this.value)+"\"), globals())")'>100</button>
<button style='border-style:inset;' value='2' onclick='$("BUTTON", this.parentNode).css("border-style", "outset"); $(this).css("border-style", "inset"); interact(2, "sage.server.notebook.interact.update(2, \"s\", 12, sage.server.notebook.interact.standard_b64decode(\""+encode64(this.value)+"\"), globals())")'>1000</button>
<button style='border-style:outset;' value='3' onclick='$("BUTTON", this.parentNode).css("border-style", "outset"); $(this).css("border-style", "inset"); interact(2, "sage.server.notebook.interact.update(2, \"s\", 12, sage.server.notebook.interact.standard_b64decode(\""+encode64(this.value)+"\"), globals())")'>100000</button>
<button style='border-style:outset;' value='4' onclick='$("BUTTON", this.parentNode).css("border-style", "outset"); $(this).css("border-style", "inset"); interact(2, "sage.server.notebook.interact.update(2, \"s\", 12, sage.server.notebook.interact.standard_b64decode(\""+encode64(this.value)+"\"), globals())")'>1000000</button>
</td></tr></table></td></tr>
<tr><td align=right><font color="black">Number of bars&nbsp;</font></td><td><table><tr><td>
    	<div id='slider-u-2' class='ui-slider-3' style='padding:0px;margin:0px;'><span class='ui-slider-handle'></span></div>
    	</td><td><font color='black' id='slider-u-2-lbl'></font></td></tr></table><script>(function(){ var values = ["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59","60","61","62","63","64","65","66","67","68","69","70","71","72","73","74","75","76","77","78","79","80","81","82","83","84","85","86","87","88","89","90","91","92","93","94","95","96","97","98","99","100"]; setTimeout(function() {
    $('#slider-u-2').slider({
    	stepping: 1, minValue: 0, maxValue: 100, startValue: 30,
    	change: function () { var position = Math.ceil($('#slider-u-2').slider('value')); if(values!=null) $('#slider-u-2-lbl').text(values[position]); interact(2, "sage.server.notebook.interact.update(2, \"u\", 13, sage.server.notebook.interact.standard_b64decode(\""+encode64(position)+"\"), globals())"); },
    	slide: function() { if(values!=null) $('#slider-u-2-lbl').text(values[Math.ceil($('#slider-u-2').slider('value'))]); }
    });
    if(values != null) $('#slider-u-2-lbl').text(values[Math.ceil($('#slider-u-2').slider('value'))]);
    }, 1); })();</script></td></tr>
</table><div id='cell-interact-2'><?__SAGE__START>
        <table border=0 bgcolor='#white' width=100% height=100%>
        <tr><td bgcolor=white align=left valign=top><pre><?__SAGE__TEXT></pre></td></tr>
        <tr><td  align=left valign=top><?__SAGE__HTML></td></tr>
        </table><?__SAGE__END></div></td>
                 </tr></table></div>
                 </html>
}}}

{{{id=5|
@interact
def _(
    
    t = text_control("Displays a random graph (GNP) with some additional information."),
    n = selector([1..20], nrows=2, default=6),
    p = slider(0, 1, 0.01, default=0.6)
):
    G = graphs.RandomGNP(n, p)
    print "Planar: ", G.is_planar()
    print "Clique number: ", G.clique_number()
    G.show3d()
///

<html><div padding=6 id='div-interact-5'> <table width=800px height=400px bgcolor='#c5c5c5'
                 cellpadding=15><tr><td bgcolor='#f9f9f9' valign=top align=left><table><tr><td colspan=2><div style="color:black; padding-bottom:5px">Displays a random graph (GNP) with some additional information.</div></td></tr>
<tr><td align=right><font color="black">n&nbsp;</font></td><td><table style="border:1px solid #dfdfdf;background-color:#efefef">
<tr><td><button style='border-style:outset;' value='0' onclick='$("BUTTON", this.parentNode).css("border-style", "outset"); $(this).css("border-style", "inset"); interact(5, "sage.server.notebook.interact.update(5, \"n\", 24, sage.server.notebook.interact.standard_b64decode(\""+encode64(this.value)+"\"), globals())")'>1</button>
<button style='border-style:outset;' value='1' onclick='$("BUTTON", this.parentNode).css("border-style", "outset"); $(this).css("border-style", "inset"); interact(5, "sage.server.notebook.interact.update(5, \"n\", 24, sage.server.notebook.interact.standard_b64decode(\""+encode64(this.value)+"\"), globals())")'>2</button>
<button style='border-style:outset;' value='2' onclick='$("BUTTON", this.parentNode).css("border-style", "outset"); $(this).css("border-style", "inset"); interact(5, "sage.server.notebook.interact.update(5, \"n\", 24, sage.server.notebook.interact.standard_b64decode(\""+encode64(this.value)+"\"), globals())")'>3</button>
<button style='border-style:outset;' value='3' onclick='$("BUTTON", this.parentNode).css("border-style", "outset"); $(this).css("border-style", "inset"); interact(5, "sage.server.notebook.interact.update(5, \"n\", 24, sage.server.notebook.interact.standard_b64decode(\""+encode64(this.value)+"\"), globals())")'>4</button>
<button style='border-style:outset;' value='4' onclick='$("BUTTON", this.parentNode).css("border-style", "outset"); $(this).css("border-style", "inset"); interact(5, "sage.server.notebook.interact.update(5, \"n\", 24, sage.server.notebook.interact.standard_b64decode(\""+encode64(this.value)+"\"), globals())")'>5</button>
<button style='border-style:inset;' value='5' onclick='$("BUTTON", this.parentNode).css("border-style", "outset"); $(this).css("border-style", "inset"); interact(5, "sage.server.notebook.interact.update(5, \"n\", 24, sage.server.notebook.interact.standard_b64decode(\""+encode64(this.value)+"\"), globals())")'>6</button>
<button style='border-style:outset;' value='6' onclick='$("BUTTON", this.parentNode).css("border-style", "outset"); $(this).css("border-style", "inset"); interact(5, "sage.server.notebook.interact.update(5, \"n\", 24, sage.server.notebook.interact.standard_b64decode(\""+encode64(this.value)+"\"), globals())")'>7</button>
<button style='border-style:outset;' value='7' onclick='$("BUTTON", this.parentNode).css("border-style", "outset"); $(this).css("border-style", "inset"); interact(5, "sage.server.notebook.interact.update(5, \"n\", 24, sage.server.notebook.interact.standard_b64decode(\""+encode64(this.value)+"\"), globals())")'>8</button>
<button style='border-style:outset;' value='8' onclick='$("BUTTON", this.parentNode).css("border-style", "outset"); $(this).css("border-style", "inset"); interact(5, "sage.server.notebook.interact.update(5, \"n\", 24, sage.server.notebook.interact.standard_b64decode(\""+encode64(this.value)+"\"), globals())")'>9</button>
<button style='border-style:outset;' value='9' onclick='$("BUTTON", this.parentNode).css("border-style", "outset"); $(this).css("border-style", "inset"); interact(5, "sage.server.notebook.interact.update(5, \"n\", 24, sage.server.notebook.interact.standard_b64decode(\""+encode64(this.value)+"\"), globals())")'>10</button>
</td></tr>
<tr><td><button style='border-style:outset;' value='10' onclick='$("BUTTON", this.parentNode).css("border-style", "outset"); $(this).css("border-style", "inset"); interact(5, "sage.server.notebook.interact.update(5, \"n\", 24, sage.server.notebook.interact.standard_b64decode(\""+encode64(this.value)+"\"), globals())")'>11</button>
<button style='border-style:outset;' value='11' onclick='$("BUTTON", this.parentNode).css("border-style", "outset"); $(this).css("border-style", "inset"); interact(5, "sage.server.notebook.interact.update(5, \"n\", 24, sage.server.notebook.interact.standard_b64decode(\""+encode64(this.value)+"\"), globals())")'>12</button>
<button style='border-style:outset;' value='12' onclick='$("BUTTON", this.parentNode).css("border-style", "outset"); $(this).css("border-style", "inset"); interact(5, "sage.server.notebook.interact.update(5, \"n\", 24, sage.server.notebook.interact.standard_b64decode(\""+encode64(this.value)+"\"), globals())")'>13</button>
<button style='border-style:outset;' value='13' onclick='$("BUTTON", this.parentNode).css("border-style", "outset"); $(this).css("border-style", "inset"); interact(5, "sage.server.notebook.interact.update(5, \"n\", 24, sage.server.notebook.interact.standard_b64decode(\""+encode64(this.value)+"\"), globals())")'>14</button>
<button style='border-style:outset;' value='14' onclick='$("BUTTON", this.parentNode).css("border-style", "outset"); $(this).css("border-style", "inset"); interact(5, "sage.server.notebook.interact.update(5, \"n\", 24, sage.server.notebook.interact.standard_b64decode(\""+encode64(this.value)+"\"), globals())")'>15</button>
<button style='border-style:outset;' value='15' onclick='$("BUTTON", this.parentNode).css("border-style", "outset"); $(this).css("border-style", "inset"); interact(5, "sage.server.notebook.interact.update(5, \"n\", 24, sage.server.notebook.interact.standard_b64decode(\""+encode64(this.value)+"\"), globals())")'>16</button>
<button style='border-style:outset;' value='16' onclick='$("BUTTON", this.parentNode).css("border-style", "outset"); $(this).css("border-style", "inset"); interact(5, "sage.server.notebook.interact.update(5, \"n\", 24, sage.server.notebook.interact.standard_b64decode(\""+encode64(this.value)+"\"), globals())")'>17</button>
<button style='border-style:outset;' value='17' onclick='$("BUTTON", this.parentNode).css("border-style", "outset"); $(this).css("border-style", "inset"); interact(5, "sage.server.notebook.interact.update(5, \"n\", 24, sage.server.notebook.interact.standard_b64decode(\""+encode64(this.value)+"\"), globals())")'>18</button>
<button style='border-style:outset;' value='18' onclick='$("BUTTON", this.parentNode).css("border-style", "outset"); $(this).css("border-style", "inset"); interact(5, "sage.server.notebook.interact.update(5, \"n\", 24, sage.server.notebook.interact.standard_b64decode(\""+encode64(this.value)+"\"), globals())")'>19</button>
<button style='border-style:outset;' value='19' onclick='$("BUTTON", this.parentNode).css("border-style", "outset"); $(this).css("border-style", "inset"); interact(5, "sage.server.notebook.interact.update(5, \"n\", 24, sage.server.notebook.interact.standard_b64decode(\""+encode64(this.value)+"\"), globals())")'>20</button>
</td></tr></table></td></tr>
<tr><td align=right><font color="black">p&nbsp;</font></td><td><table><tr><td>
    	<div id='slider-p-5' class='ui-slider-3' style='padding:0px;margin:0px;'><span class='ui-slider-handle'></span></div>
    	</td><td><font color='black' id='slider-p-5-lbl'></font></td></tr></table><script>(function(){ var values = ["0.000000000000000","0.0100000000000000","0.0200000000000000","0.0300000000000000","0.0400000000000000","0.0500000000000000","0.0600000000000000","0.0700000000000000","0.0800000000000000","0.0900000000000000","0.100000000000000","0.110000000000000","0.120000000000000","0.130000000000000","0.140000000000000","0.150000000000000","0.160000000000000","0.170000000000000","0.180000000000000","0.190000000000000","0.200000000000000","0.210000000000000","0.220000000000000","0.230000000000000","0.240000000000000","0.250000000000000","0.260000000000000","0.270000000000000","0.280000000000000","0.290000000000000","0.300000000000000","0.310000000000000","0.320000000000000","0.330000000000000","0.340000000000000","0.350000000000000","0.360000000000000","0.370000000000000","0.380000000000000","0.390000000000000","0.400000000000000","0.410000000000000","0.420000000000000","0.430000000000000","0.440000000000000","0.450000000000000","0.460000000000000","0.470000000000000","0.480000000000000","0.490000000000000","0.500000000000000","0.510000000000000","0.520000000000000","0.530000000000000","0.540000000000000","0.550000000000000","0.560000000000000","0.570000000000000","0.580000000000000","0.590000000000000","0.600000000000000","0.610000000000000","0.620000000000000","0.630000000000000","0.640000000000000","0.650000000000000","0.660000000000000","0.670000000000000","0.680000000000000","0.690000000000000","0.700000000000000","0.710000000000000","0.720000000000000","0.730000000000000","0.740000000000000","0.750000000000000","0.760000000000000","0.770000000000000","0.780000000000000","0.790000000000000","0.800000000000000","0.810000000000000","0.820000000000000","0.830000000000000","0.840000000000000","0.850000000000000","0.860000000000000","0.870000000000000","0.880000000000000","0.890000000000000","0.900000000000000","0.910000000000000","0.920000000000000","0.930000000000000","0.940000000000000","0.950000000000000","0.960000000000000","0.970000000000000","0.980000000000000","0.990000000000000","1"]; setTimeout(function() {
    $('#slider-p-5').slider({
    	stepping: 1, minValue: 0, maxValue: 100, startValue: 60,
    	change: function () { var position = Math.ceil($('#slider-p-5').slider('value')); if(values!=null) $('#slider-p-5-lbl').text(values[position]); interact(5, "sage.server.notebook.interact.update(5, \"p\", 25, sage.server.notebook.interact.standard_b64decode(\""+encode64(position)+"\"), globals())"); },
    	slide: function() { if(values!=null) $('#slider-p-5-lbl').text(values[Math.ceil($('#slider-p-5').slider('value'))]); }
    });
    if(values != null) $('#slider-p-5-lbl').text(values[Math.ceil($('#slider-p-5').slider('value'))]);
    }, 1); })();</script></td></tr>
</table><div id='cell-interact-5'><?__SAGE__START>
        <table border=0 bgcolor='#white' width=100% height=100%>
        <tr><td bgcolor=white align=left valign=top><pre><?__SAGE__TEXT></pre></td></tr>
        <tr><td  align=left valign=top><?__SAGE__HTML></td></tr>
        </table><?__SAGE__END></div></td>
                 </tr></table></div>
                 </html>
}}}

{{{id=10|
def f(...):
    ...

interact(f,
    [optgroup("Group 1", ["txt", slider('x', ...)]
///
Syntax Error:
        [optgroup("Group 1", ["txt", slider('x', ...)]
}}}

{{{id=11|

///
}}}

{{{id=12|

///
}}}

{{{id=13|

///
}}}

{{{id=14|

///
}}}