from awesome_panel_extensions.awesome_panel.notebook import Header
Header(folder="examples/reference/frameworks/material", notebook="MaterialIntSlider.ipynb")
The Material IntSlider
widget
value
(int): The selected value as an int typestart
(int): The range's lower boundend
(int): The range's upper boundstep
(int): The interval between valuespin
(boolean): Shows the thumb pin on a discrete slider.markers
(boolean): Shows the tick marks for each step on the track when the slider is discrete.The Material IntSlider
has the same layout and styling parameters as most other widgets. For example width
and sizing_mode
.
___
Let's start by importing the dependencies
import param
import panel as pn
from awesome_panel_extensions.frameworks.material import Extension, IntSlider, Stylesheet
pn.config.sizing_mode = "stretch_width"
pn.extension()
Let's explore the parameters of the material.IntSlider
.
slider = IntSlider(name="Slider", value=3, start=1, end=9, step=2, sizing_mode="fixed", width=200)
slider_parameters = ["name", "value", "start", "end", "step", "pin", "width", "height", "sizing_mode"]
settings_pane = pn.WidgetBox(pn.Param(slider, parameters=slider_parameters, show_name=False))
extension = Extension() # Loads the MWC JS, Material Fonts and MDC style sheet
stylesheet = Stylesheet()
app=pn.Row(
extension, stylesheet, slider, settings_pane
)
app
Let's verify that that Material IntSlider
can be used as a widget by pn.Param
.
WIDGETS = {
"value": {
"type": IntSlider, "sizing_mode": "fixed", "width": 200,
}
}
class ParameterizedApp(param.Parameterized):
value = param.Integer(0, bounds=(0,10), step=1)
def __init__(self, **params):
super().__init__(**params)
self.view = pn.WidgetBox(
pn.Param(self, parameters=["value"], widgets=WIDGETS),
pn.Param(self, parameters=["value"], show_name=False),
height=200)
ParameterizedApp(name="IntSlider App").view
The material.Stylesheet
ships with an interactive style editor. Lets try it out!
pn.Row(pn.Column(slider, pn.Param(slider, parameters=["pin"])), pn.Param(stylesheet.param, parameters=["secondary_color"]))
The MWC Slider on which the Material IntSlider
is built is work in progress. Some of the known issues are