BeakerX has a Groovy API for many of the standard collection of widgets. They are fully bidirectionally synchronized with the UI on the front-end. The work on their own, with interactive recomputation, and with EasyForm.
import com.twosigma.beakerx.widget.IntSlider
w = new IntSlider()
w.value = 60
w
w.value
60
w.value = 76
76
w.description = "description"
description
w.disabled = false
false
w.max = 200
w.min = 50
50
w.orientation = "vertical"
vertical
w.style.handle_color = "#F04080"
#F04080
w.step = 20
20
w.layout.visibility = false
false
import com.twosigma.beakerx.widget.IntProgress
bar = new IntProgress()
bar.value = 10
bar
bar.value
10
bar.value = 110
110
bar.max = 300
bar.min = 50
50
bar.step = 20
20
bar.orientation = 'horizontal'
horizontal
import com.twosigma.beakerx.widget.RadioButtons
rb = new RadioButtons()
rb.options=['alpha', 'beta', 'delta', 'gamma']
rb.value = 'beta'
rb
rb.value
beta
rb.value = 'delta'
delta
import com.twosigma.beakerx.widget.Select
select = new Select()
select.options=['Linux', 'Windows', 'OSX']
select.value = 'Windows'
select
select.value
Windows
select.value = 'Linux'
Linux
import com.twosigma.beakerx.widget.Checkbox
cb = new Checkbox()
cb
cb.value
false
cb.value = true
true
import com.twosigma.beakerx.widget.ColorPicker
cp = new ColorPicker()
cp.value = "blue"
cp
cp.value
blue
cp.value = 'red'
red
cp.concise = false
//cp.concise = true
false
import com.twosigma.beakerx.widget.Text
t = new Text()
t.value = "Text example 1"
t
t.value
Text example 1
t.value ="Text example 2"
Text example 2
import com.twosigma.beakerx.widget.Textarea
ta = new Textarea()
ta.value = "Textarea example 1"
ta
ta.value
Textarea example 1
ta.value ="Textarea example 2"
Textarea example 2
import com.twosigma.beakerx.widget.ToggleButton
tb = new ToggleButton()
tb.tooltip = "ToggleButton tooltip 1"
tb.icon = 'check'
tb.description = 'Click me'
tb
tb.value
false
tb.value = true
//tb.value = false
true
tb.tooltip = "ToggleButton tooltip 2"
ToggleButton tooltip 2
import com.twosigma.beakerx.widget.FloatSlider
fs = new FloatSlider()
fs.value = 10.1
fs
fs.value
10.1
fs.value = 22.2
22.2
import com.twosigma.beakerx.widget.FloatSlider
fs = new FloatSlider()
fs.max = 200
fs. min = 10
fs.value = 36.6
fs.style.handle_color = "orange"
fs
import com.twosigma.beakerx.widget.FloatProgress
floatProgress = new FloatProgress()
floatProgress.value = 10.2
floatProgress
floatProgress.value
10.2
floatProgress.value = 33.3
33.3
import com.twosigma.beakerx.widget.Label
label = new Label()
label.value = "Label 1"
label
label.value
Label 1
label.value = "Label 2"
Label 2
import com.twosigma.beakerx.widget.HTML
label = new HTML()
label.value = "Hello <b>World</b>"
label
label.value = "<b>Hello World</b>"
<b>Hello World</b>
import com.twosigma.beakerx.widget.Image
import java.nio.file.Files
byte[] picture = Files.readAllBytes(new File("../resources/img/widgetArch.png").toPath());
image = new Image()
image.format='png'
image.value= picture
image.width=300
image.height=400
image
import com.twosigma.beakerx.widget.DatePicker
datePicker = new DatePicker()
datePicker
datePicker.value
null
import com.twosigma.beakerx.widget.IntRangeSlider
w = new IntRangeSlider()
w.value = [10,40]
w.orientation = "horizontal"
//w.orientation = "vertical"
w
import com.twosigma.beakerx.widget.BoundedIntText
w = new BoundedIntText()
w.min = 0
w.max = 10
w
import com.twosigma.beakerx.widget.IntText
w = new IntText()
w
import com.twosigma.beakerx.widget.IntText
w = new IntText()
w
import com.twosigma.beakerx.widget.Play
w = new Play()
w
import com.twosigma.beakerx.widget.FloatRangeSlider
w = new FloatRangeSlider()
w.value = [10,40]
w.orientation = "horizontal"
//w.orientation = "vertical"
w
import com.twosigma.beakerx.widget.BoundedFloatText
w = new BoundedFloatText()
w.min = 0
w.max = 10
w
import com.twosigma.beakerx.widget.FloatText
w = new FloatText()
w
//Example with passing different type to value
import com.twosigma.beakerx.widget.IntRangeSlider
w = new IntRangeSlider()
w.value = ["10",[49.6]]
w.orientation = "horizontal"
//w.orientation = "vertical"
w
//Example with passing different type to value
import com.twosigma.beakerx.widget.IntRangeSlider
import java.util.Collection
Collection<Object> list = new ArrayList<>()
list.add(["19"])
list.add("53")
w = new IntRangeSlider()
w.value = list
w.orientation = "horizontal"
//w.orientation = "vertical"
w
import com.twosigma.beakerx.widget.Valid
w = new Valid()
w.description = 'Valid!'
w.value = true
w.disabled = false
w
import com.twosigma.beakerx.widget.Accordion
import com.twosigma.beakerx.widget.Valid
import com.twosigma.beakerx.widget.BoundedFloatText
import com.twosigma.beakerx.widget.Text
t = new Text()
t.value = "Text example 1"
valid = new Valid()
valid.description = 'Valid!'
valid.value = true
valid.disabled = false
accordion = new Accordion([t , valid], ['t' , 'valid']);
//accordion.set_title(0, 'Text')
//accordion.set_title(1, 'Valid')
accordion
import com.twosigma.beakerx.widget.Label
widget = new Label()
widget.value = "\$\$\\frac{n!}{k!(n-k)!} = \\binom{n}{k}\$\$"
widget
import com.twosigma.beakerx.widget.SelectionSlider
widget = new SelectionSlider()
widget.options=['scrambled', 'sunny side up', 'poached', 'over easy']
widget.value='sunny side up'
widget.description='I like my eggs ...'
widget.orientation='horizontal'
//widget.orientation='vertical'
widget
import com.twosigma.beakerx.widget.HTMLMath
widget = new HTMLMath()
widget.value = "\$x^2\$ and \$\$\\frac{x+1}{x-1}\$\$"
widget
widget.value
$x^2$ and $$\frac{x+1}{x-1}$$
import com.twosigma.beakerx.widget.ToggleButtons
widget = new ToggleButtons()
widget.description='Speed:'
widget.options=['Slow', 'Regular', 'Fast']
widget.button_style = 'success'
widget.tooltips=['SL', 'RE', 'Fast']
widget.icons=['check', 'check', 'check']
widget
import com.twosigma.beakerx.widget.Play
import com.twosigma.beakerx.widget.IntSlider
import com.twosigma.beakerx.widget.HBox
import com.twosigma.beakerx.widget.Link
import com.twosigma.beakerx.widget.DirectionalLink
import static com.twosigma.beakerx.widget.Link.jslink
import static com.twosigma.beakerx.widget.DirectionalLink.jsdlink
slider = new IntSlider()
play= new Play()
play.value=50
play.min=0
play.max=100
//link = new Link(play, "value", slider, "value")
link = jslink(play, "value", slider, "value")
//link = new DirectionalLink(play, "value", slider, "value")
//link = jsdlink(play, "value", slider, "value")
box = new HBox([play,slider])
import com.twosigma.beakerx.widget.IntSlider
invisibleSlider = new IntSlider()
invisibleSlider.max = 200
invisibleSlider.min = 10
invisibleSlider.value = 112
invisibleSlider.layout.visibility = "hidden"
invisibleSlider
If you are using slider widgets, you can set the continuous_update parameter to False.
continuous_update
is a parameter of slider widgets that restricts executions to mouse release events.
To see diferrence try to move first slider and notice different of updating his value.
import com.twosigma.beakerx.widget.IntSlider
import com.twosigma.beakerx.widget.HBox
import com.twosigma.beakerx.widget.VBox
continuosEnabled = new IntSlider()
test = new HBox([continuosEnabled, continuosEnabled])
import com.twosigma.beakerx.widget.IntSlider
import com.twosigma.beakerx.widget.HBox
import com.twosigma.beakerx.widget.VBox
continuousDisabled = new IntSlider()
continuousDisabled.continuous_update = false
test = new HBox([continuousDisabled, continuousDisabled])