Skip to content

Slider Input

A user input component that allows users to select numeric values using a slider with optional constraints like min, max, and step.

Fields

NameTypeDescriptionOptions
LabelText
Minimum valueNumber
Maximum valueNumber
Step sizeNumber
Custom CSS classesTextCSS classes, separated by spaces. You can define classes in custom stylesheets.

Events

NameDescriptionUsage
ss-number-changeCapture changes to this control.

def onchange_handler(state, payload):

  # Set the state variable "new_val" to the new value

  state["new_val"] = payload

Low code usage

This component can be declared directly in Python, using backend-driven UI.

python
ui.SliderInput(content={
        "label": "", # str 
        "minValue": 0.0, # Union[float, str] 
        "maxValue": 0.0, # Union[float, str] 
        "stepSize": 0.0, # Union[float, str] 
        "cssClasses": "", # str 
    },
    handlers={
        "ss-number-change": handle_event,
    }
)
A function, in this example handle_event, should be implemented in your code to handle events.
python
def handle_event(state, payload, context, ui):
  pass

Reference