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.

This component enhances user interaction by providing features like custom color options, step increments, and optional rounded edges. Its flexible design supports both numerical ranges and the addition of visual elements such as tick marks and labels to aid in usability.

JSON Schema

Field Defenitions

{
   "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"
   ]
}

Bellow are the various attributes you can assign to the component. Utlizing them can allow for modifications to the pre-created object.

zero_true.RangeSlider · Zero True Component

Show properties

field color

field color: str = ‘primary’; Color of the range slider. Can be custom or standard Material color.

field component

field component: str = ‘v-range-slider’; Vue component name.

field label

field label: str | None = None; A label for your slider.

field max

field max: int | float = 100; Maximum value of the slider.

field min

field min: int | float = 0; Minimum value of the slider.

field rounded

field rounded: bool = True; Determines if the slider has rounded edges.

field size

field size: str = ‘large’; Size of the slider.

field step

field step: int | float = 1; Step increment of the slider.

field thumb_label

field thumb_label: str = ‘always’; Displays the thumb label.

field thumb_size

field thumb_size: int = 0; Size of the thumb.

field tick_labels

field tick_labels: bool = False; Displays the tick labels.

field ticks

field ticks: list = []; Displays the ticks.

field triggerEvent

field triggerEvent: str = ‘end’; Trigger event for when to trigger a run.

field value

field value: List[int | float] = [0, 100]; Current value range of the slider.

Methods

classmethod get_value_from_global_state(value, values)