Range Slider
Example Usage
import zero_true as zt
# Create a RangeSlider component
range_slider = zt.RangeSlider(
id="sample_range_slider",
color="primary", # Color of the range slider
label="Select Range", # A label for your slider
max=100, # Maximum value of the slider
min=0, # Minimum value of the slider
rounded=True, # Determines if the slider has rounded edges
size="large", # Size of the slider
step=1, # Step increment of the slider
thumb_label="always", # Displays the thumb label
thumb_size=20, # Size of the thumb
tick_labels=True, # Displays the tick labels
ticks=[0, 20, 40, 60, 80, 100], # Displays the ticks
triggerEvent="end", # Trigger event for when to trigger a run
value=[0, 100] # Current value range of the slider
)
# Assuming you have a mechanism to render or use this RangeSlider within a layout
layout = zt.Layout(components=[range_slider])
Example Output
Overview
pydantic model zero_true.RangeSlider
The RangeSlider component allows users to select a range of values within a defined interval, making it an ideal choice for input forms where users need to specify a range, such as price or time boundaries.
JSON Schema
{
"title": "RangeSlider",
"description": "A slider component that allows a user to select a range of values",
"type": "object",
"properties": {
"id": {
"description": "Unique id for a component",
"title": "Id",
"type": "string"
},
"variable_name": {
"default": "",
"description": "Optional variable name associated with a component",
"title": "Variable Name",
"type": "string"
},
"component": {
"default": "v-range-slider",
"description": "Vue component name",
"title": "Component",
"type": "string"
},
"value": {
"default": [
0,
100
],
"description": "Current value range of the slider",
"items": {
"anyOf": [
{
"type": "integer"
},
{
"type": "number"
}
]
},
"title": "Value",
"type": "array"
},
"min": {
"anyOf": [
{
"type": "integer"
},
{
"type": "number"
}
],
"default": 0,
"description": "Minimum value of the slider",
"title": "Min"
},
"max": {
"anyOf": [
{
"type": "integer"
},
{
"type": "number"
}
],
"default": 100,
"description": "Maximum value of the slider",
"title": "Max"
},
"step": {
"anyOf": [
{
"type": "integer"
},
{
"type": "number"
}
],
"default": 1,
"description": "Step increment of the slider",
"gt": 0,
"title": "Step"
},
"thumb_label": {
"default": "always",
"description": "Displays the thumb label",
"title": "Thumb Label",
"type": "string"
},
"thumb_size": {
"default": 0,
"description": "Size of the thumb",
"title": "Thumb Size",
"type": "integer"
},
"tick_labels": {
"default": false,
"description": "Displays the tick labels",
"title": "Tick Labels",
"type": "boolean"
},
"ticks": {
"default": [],
"description": "Displays the ticks",
"items": {},
"title": "Ticks",
"type": "array"
},
"color": {
"default": "primary",
"description": "Color of the range slider. Can be custom or standard Material color",
"pre": true,
"title": "Color",
"type": "string"
},
"size": {
"default": "large",
"description": "Size of the slider",
"title": "Size",
"type": "string"
},
"label": {
"anyOf": [
{
"type": "string"
},
{
"type": "null"
}
],
"default": null,
"description": "A label for your slider",
"title": "Label"
},
"rounded": {
"default": true,
"description": "Determines if the slider has rounded edges",
"title": "Rounded",
"type": "boolean"
},
"triggerEvent": {
"default": "end",
"description": "Trigger event for when to trigger a run",
"title": "Triggerevent",
"type": "string"
}
},
"required": [
"id"
]
}
field color: str = ‘primary’; Color of the range slider. Can be custom or standard Material color.
field component: str = ‘v-range-slider’; Vue component name.
field label: str | None = None; A label for your slider.
field max: int | float = 100; Maximum value of the slider.
field min: int | float = 0; Minimum value of the slider.
field rounded: bool = True; Determines if the slider has rounded edges.
field size: str = ‘large’; Size of the slider.
field step: int | float = 1; Step increment of the slider.
field thumb_label: str = ‘always’; Displays the thumb label.
field thumb_size: int = 0; Size of the thumb.
field tick_labels: bool = False; Displays the tick labels.
field ticks: list = []; Displays the ticks.
field triggerEvent: str = ‘end’; Trigger event for when to trigger a run.
field value: List[int | float] = [0, 100]; Current value range of the slider.
Methods
classmethod get_value_from_global_state(value, values)