DiscreteSlider#

Download this notebook from GitHub (right-click to download).

import panel as pn
import panel_material_ui as pmui

pn.extension(inline=True)

The DiscreteSlider widget allows users to select a value from a discrete list or dictionary of values using a slider. Its built upon the Material UI Slider component.


It falls into the broad category of single-value, option-selection widgets that provide a compatible API and include the AutocompleteInput, and Select widgets.


Discover more on using widgets to add interactivity to your applications in the how-to guides on interactivity. Alternatively, learn how to set up callbacks and (JS-)links between parameters or how to use them as part of declarative UIs with Param.




Parameters:#


For details on other options for customizing the component see the customization guides.




Core#


    

  • disabled (boolean): Whether the widget is editable.
    • 

  • options (list | dict): A list or dictionary of options to select from.
    • 

  • value (object): The current value; must be one of the option values. Updated when the handle is dragged.
    • 

  • value_throttled (object): The current value; must be one of the option values. Updated when the handle is released.
    • 







Display#


    

  • bar_color (color): Color of the slider bar as a hexadecimal RGB value.
    • 

  • direction (str): Whether the slider should go from left to right (‘ltr’) or right to left (‘rtl’).
    • 

  • formatter (str): A custom Python format string. Default is ‘%.3g’.
    • 

  • label (str): The title of the widget.
    • 

  • marks (boolean | list[dict]):  Marks indicate predetermined values to which the user can move the slider. If True the options are shown as marks. If a list, it should contain dicts with ‘value’ and an optional ‘label’ keys.
    • 

  • orientation (Literal["horizonta", "vertical"]): Whether the slider should be displayed in a ‘horizontal’ or ‘vertical’ orientation.
    • 

  • show_value (boolean): Whether to show the widget value as a label or not.
    • 

  • tooltips (boolean | Literal["auto"]): Whether to display tooltips on the slider handle.
    • 

  • track (Literal["normal", "inverted"]): Whether to display ‘normal’ or ‘inverted’.
    • 







Styling#


    

  • sx (dict): Component level styling API.
    • 

  • theme_config (dict): Theming API.
    • 







Aliases#


For compatibility with Panel certain parameters are allowed as aliases:


    

  • name: Alias for label
    • 











Basic DiscreteSlider#


The DiscreteSlider allow users to select a value from a discrete range.


slider = pmui.DiscreteSlider(label='Age', options=['Ten', 'Twenty', 'Thirty'])

slider







            
            
Like most other widgets, DiscreteSlider has a value parameter that can be accessed or set:


slider.value





Ten


The options parameter also accepts a dictionary whose keys are going to be the labels of the slider.


slider = pmui.DiscreteSlider(name='Age', options={'Ten': 10, 'Twenty': 20, 'Thirty': 30})

slider







            
            
slider.value





Ten




Label#


You may remove the label/ name by not setting it.


pmui.DiscreteSlider(options=['Ten', 'Twenty', 'Thirty'])







            
            




Show Value#


You may remove the value label by setting show_value=False.


pmui.DiscreteSlider(name='Age', options=['Ten', 'Twenty', 'Thirty'], value='Twenty', show_value=False)







            
            




Disabled#


The widget can be disabled with disabled=True.


pmui.DiscreteSlider(name='Age', options=['Ten', 'Twenty', 'Thirty'], disabled=True)







            
            




Color#


You can specify a color.


pmui.DiscreteSlider(name="Age", options=['Ten', 'Twenty', 'Thirty'], color="secondary")







            
            




Sizes#


For smaller slider, use the parameter size="small".


pmui.Row(
    pmui.DiscreteSlider(name='Age Slider', options=['Ten', 'Twenty', 'Thirty'], size="small"),
    pmui.DiscreteSlider(name='Age Slider', options=['Ten', 'Twenty', 'Thirty'], size="medium"),
)







            
            




Marks#


You can generate a mark for each step with marks=True.


pmui.DiscreteSlider(name='Age Slider', options=['Ten', 'Twenty', 'Thirty'], marks=True)







            
            




Custom Marks#


You can have custom marks by providing a rich list to the marks parameter. Note that unlike continuous sliders the value of the marks should be the integer index of the option.


marks = [
  {
    "value": 0,
    "label": '0°C',
  },
  {
    "value": 1,
    "label": '20°C',
  },
  {
    "value": 2,
    "label": '37°C',
  },
  {
    "value": 3,
    "label": '100°C',
  },
]

pmui.DiscreteSlider(options=[0, 20, 37, 100], marks=marks)







            
            




Track#


The track shows the range available for user selection.


pmui.DiscreteSlider(name='Age Slider', options=['Ten', 'Twenty', 'Thirty'], value='Twenty', track="normal")







            
            




Label always visible#


You can force the thumb label to be always visible with tooltips=True.


pmui.DiscreteSlider(name='Age', options=['Ten', 'Twenty', 'Thirty'], value='Twenty', tooltips=True)







            
            




Removed track#


The track can be turned off with track=False.


pmui.DiscreteSlider(name='Age Slider', options=['Ten', 'Twenty', 'Thirty'], value='Twenty', track=False)







            
            




Inverted Track#


The track can be inverted with track=”inverted”.


pmui.DiscreteSlider(name='Age Slider', options=['Ten', 'Twenty', 'Thirty'], value='Twenty', track="inverted")







            
            






Vertical Sliders#


pmui.DiscreteSlider(name='Age Slider', options=['Ten', 'Twenty', 'Thirty'], value='Twenty', orientation="vertical")







            
            


Download this notebook from GitHub (right-click to download).