Adjust widget styles and layouts with ipywidgets

I tried to make an interactive GUI with Jupyter, but the width of the slider was small and it was difficult to use, and I did not know how to arrange multiple controls, so I investigated it.

Adjust widget style

You can adjust the style with CSS-like description

Uninflected word

The width is narrow and difficult to operate, so I want to make various adjustments

from ipywidgets import IntSlider

IntSlider(min=2000, max=2020,step=1,value=2010, description="year1: ")

Try changing the width and height

Specify 60% for the width and 100px for the height.

from ipywidgets import IntSlider, Layout

IntSlider(min=2000, max=2020,step=1,value=2010, description="year1: ",
                         orientation='horizontal',
                         layout=Layout(width='60%', height='100px'))

Try adding Border

I will also add a border.

from ipywidgets import IntSlider, Layout

IntSlider(min=2000, max=2020,step=1,value=2010, description="year1: ",
                         orientation='horizontal',
                         layout=Layout(width='60%', height='100px', border='solid'))

Other style adjustments

Each widget also has its own style. For example, you can color the handle of the slider.

from ipywidgets import IntSlider

year1 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year1: ")
year1.style.handle_color = 'lightblue'
year1

The handle is now light blue.

You can see the available styles below.

year1.style.keys

You can adjust various other styles. The official documentation lists the available styles. Layout and Styling of Jupyter widgets — Jupyter Widgets 7.5.1 documentation

Change the layout

If you have multiple widgets, you can also arrange them according to the layout.

Line up side by side and on shelves

Widgets can be placed in a horizontal container (HBox) and a vertical container (VBox).

from ipywidgets import IntSlider, Layout, HBox, VBox

year1 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year1: ")
year2 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year2: ")
year3 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year3: ")
year4 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year4: ")
year5 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year5: ")
year6 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year6: ")

VBox([HBox([year1,year2,year3]),HBox([year4,year5,year6])])

Arrange in 2x2

You can arrange widgets in a 2x2 layout.

from ipywidgets import IntSlider, TwoByTwoLayout
year1 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year1: ")
year2 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year2: ")
year3 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year3: ")
year4 = IntSlider(min=2000, max=2020,step=1,value=2010, description="year4: ")

TwoByTwoLayout(top_left=year1,
               top_right=year2,
               bottom_right=year3,
               bottom_left=year4)

Line up on the grid

You can place widgets on a grid of any size n x m.

from ipywidgets import IntSlider, GridspecLayout

grid = GridspecLayout(2, 3)

grid[0,0] = IntSlider(min=2000, max=2020,step=1,value=2010, description="year1-1: ")
grid[0,1] = IntSlider(min=2000, max=2020,step=1,value=2010, description="year1-2: ")
grid[0,2] = IntSlider(min=2000, max=2020,step=1,value=2010, description="year1-3 ")
grid[1,0] = IntSlider(min=2000, max=2020,step=1,value=2010, description="year2-1: ")
grid[1,1] = IntSlider(min=2000, max=2020,step=1,value=2010, description="year2-2: ")
grid[1,2] = IntSlider(min=2000, max=2020,step=1,value=2010, description="year2-3: ")

grid

Other layouts

It is described in the following documents on the official website. You can also use app-like App Layout. Using Layout Templates — Jupyter Widgets 7.5.1 documentation

Summary

If you use Jupyter, you don't need to create a fancy UI, but if you make the controls easier to use or look a little better, it will be easier to use. I hope it will be helpful for those who want to do such things.